Question

我对CSS不太满意，但我对这里发生的事情感到很失落...... 任何人都可以解释一下吗？我只是在一个 div框

之后

<html>
  <head>
  <style>
    html,
    #presenter{
      position: fixed;
      width: 150px;
      height: 150px;
      border-style: dashed;
      border-color: red;
   }
  </style>
  </head>
  <body>
        <div id='presenter'>
        </div>
  </body>
</html>

enter image description here

Answer 1

这是因为您还要为html标记添加边框。从css中删除它的引用，它将起作用：http://jsfiddle.net/Eta8G/

#presenter{
      position: fixed;
      width: 150px;
      height: 150px;
      border-style: dashed;
      border-color: red;
   }

Answer 2

它是你的CSS中的html,部分。放弃它。

<html>
  <head>
  <style>
    #presenter{
      position: fixed;
      width: 150px;
      height: 150px;
      border-style: dashed;
      border-color: red;
   }
  </style>
  </head>
  <body>
        <div id='presenter'>
        </div>
  </body>
</html>

Answer 3

行为是因为您在整个html文档以及on div容器上应用样式。

html, #presenter {
      position: fixed;
      width: 150px;
      height: 150px;
      border-style: dashed;
      border-color: red;
   }

所以html文档的一个边框和你的一个div。

您只需使用#presenter而不是html

#presenter {
  //
}

Answer 4

您还为HTML应用了边框。这样你就有了两个边界。从样式中删除html。

 <html>
<head>
<style>
  #presenter{
  position: fixed;
  width: 150px;
  height: 150px;
  border-style: dashed;
  border-color: red;
}
</style>
</head>
<body>
    <div id='presenter'>
    </div>
</body>
</html>

Answer 5

从css中删除html

    #presenter{
      position: fixed;
      width: 150px;
      height: 150px;
      border-style: dashed;
      border-color: red;
   }

Answer 6

您还要为html提供样式

   html, #presenter{
      position: fixed;
      width: 150px;
      height: 150px;
      border-style: dashed;
      border-color: red;
   }

更改为

    #presenter{
      position: fixed;
      width: 150px;
      height: 150px;
      border-style: dashed;
      border-color: red;
   }

Answer 7

从css中删除html。

#presenter {
  position: fixed;
  width: 150px;
  height: 150px;
  border-style: dashed;
  border-color: red;
}

CSS，div边框显示为double

7 个答案: