Question

请查看以下示例：

＆＃13;

<div class="wrapper">
  <div class="leftSidebar">
    <h2>Heading</h2>
    <pre>.leftSidebar {
  float:left;
  width:200px;
}</pre>
  </div>
  <div class="mainContent">
    <h2>Heading</h2>
    <pre>.mainContent {
  padding-right:200px;
  padding-left:200px;
}</pre>
  </div>
</div>

＆＃13;

.wrapper {
  width: 740px;
  background: #ccc;
}
.leftSidebar {
  float: left;
  width: 200px;
}
.mainContent {
  padding-right: 200px;
  padding-left: 200px;
  border: 1px solid rgba(0, 0, 0, 0);
}

＆＃13;

<div class="wrapper">
  <div class="leftSidebar">
    <h2>Heading</h2>
    <pre>.leftSidebar {
  float:left;
  width:200px;
}</pre>
  </div>
  <div class="mainContent">
    <h2>Heading</h2>
    <pre>.mainContent {
  padding-right:200px;
  padding-left:200px;
  border: 1px solid rgba(0, 0, 0, 0);
}</pre>
  </div>
</div>

＆＃13;

mainContent

＆＃13;

如上所示，border: 1px solid rgba(0, 0, 0, 0);的透明边框会以显着的方式更改布局。

以下是我对发生的事情的看法：由于某些原因，mainContent上应用leftSidebar会导致浮动mainContent的边距崩溃display: inline-block的保证金，就像在mainContent上应用的function saveAsXlsxFile(){ var pre="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,"; var inp = document.getElementById('base64input'); var anchor = document.getElementById('stuff'); anchor.href=pre+inp.value; anchor.style.display="block"; }一样。

但是，我不知道细节。 relevant part of CSS 2.1对我来说太难理解了。有人可以告诉我为什么以及如何完全崩溃？

Answer 1

边框不会导致.mainContent的边距与.leftSidebar的边距一起崩溃。它阻止其后代的边缘与自身崩溃（因此与.wrapper）。这就是为什么.mainContent > h2的上边距现在与.leftSidebar > h2的上限保持一致的原因 - .leftSidebar的后代边距同样不会与其自身或{{{0}折叠的原因1}}是因为它是浮动的。

.wrapper和.mainContent是并排的，所以他们的后代边距不能被认为是相邻的，所以他们的后代边缘不可能崩溃彼此。

边界如何导致利润率崩溃？

1 个答案: