Question

我在类似博客的div布局上测试一些css样式。我使用div{border: 1px solid black;}来查看div并查看其位置。

当这条线符合我的风格时，它看起来是正确的，但我不想拥有边框（只是用于开发）。

一旦我发表评论，一切都会改变它的立场。为什么会这样？

div{border: 1px solid black;} /* Comment this to see the problem */

body{ text-align:center; }

.postTabs{
    float:left;
    background-color: #c8c8c8;
    width: 60px;
    height: 38px;
    padding: 27px 5px 5px 5px;
    border-radius: 50%;
}

.postContent{
    padding: 15px 15px 15px 50px;
    margin-left: 35px;  
    margin-top: 36px;
    text-align: left;
    background-color: #a7a7a7;
}

<div class="postContainer">
  <div class="postTabs">asdf</div>
    <div class="postContent">
      <div class="postBody">adf</div>
  </div>
</div>

Answer 1

检查这里的小提琴

JS Fiddle

因为浮动而发生：左转为.postTabs类

.postContainer{
    clear: both;
    float: left;
    width: 100%;
}

Answer 2

这是因为collapsing margins：

<强> 8.3.1 Collapsing margins

在CSS中，两个或多个框的相邻边距（可能或   可能不是兄弟姐妹）可以组合形成单一的边缘。边距   结合这种方式据说会崩溃，并由此产生组合   保证金称为折现保证金。

该规范还指出：

当且仅当：
时，两个边距相邻

都属于参与相同块格式化上下文的流内块级框

没有线框，没有间隙，没有填充，没有边框将它们分开（请注意，某些零高度线框（见9.4.2）会被忽略   这个目的。）

都属于垂直相邻的盒子边缘，即形成以下对中的一个：

盒子的上边距及其第一个流入的孩子的上边距

箱子的下边距和下一个流入的兄弟姐妹的上边缘

最后一个流入子项的下边距和父项的下边距（如果父项具有'自动'计算高度

框的顶部和底部边距，它不会建立新的块格式化上下文，并且计算的“min-height”为零，为零   或'自动'计算'高度'，没有流入的孩子

在这种情况下，第一个孩子被float编辑到一侧，并从正常流程中移除。因此，.postContainer容器的第一个 in-flow 子元素是.postContent元素，其margin-top为36px。

由于容器没有建立块格式化上下文，并且没有边框，它们之间有填充，因此边距将折叠成一个。

您可以通过提供容器来阻止这种情况：

padding-top 1px - 例如 - Example here 。
border-top 1px solid transparent Example here 。
overflow以外的任何visible创建新的块格式设置上下文 - Example Here 。

有关详细信息，请参阅the spec。

Answer 3

这是因为CSS中的默认框模型。元素与宽度一样宽，加上任何填充，加上任何边框。

您可能期望边框位于元素内部，但它实际上使其更宽（在您的情况下为2px）和更高（再次为2px）。

您可以相应地调整宽度和高度，也可以更改CSS box-sizing: border-box;

使用的框模型

但是，在您的情况下，您只是为了开发目的而应用边框，因此更改CSS以支持边框将意味着稍后将其重新更改。

使用您的浏览器工具，而不是完成所有工作。下面的屏幕截图显示了Firefox中的浏览器工具（所有浏览器都有类似的工具）。当您突出显示工具中显示的HTML中的元素时，它会在实际页面上显示元素的轮廓。

无需更改代码，即可随时为您提供开发视图。

Firefox Tools

Div定位正在变化，有边框和没有边框

3 个答案: