定位div中uls高度的奥秘:它是如何工作的？

Question

我对css,盒子模型和一般定位有一个合理的理解.

但是有一个我从未理解过的谜团,也没有能够通过google来理解它,因为它已经减慢了我对布局的实现的速度:

在定位div内的ul之谜

为什么我必须将其设置ul font-size为0,line-height然后设置为1,然后将它们重置为我希望它们在的位置li,以便ul使其成为正确的高度并且(似乎)包含在div？中？

如果我设置ul line-height到我想要的标称线高度,神秘的额外高度从何而来？为什么每个浏览器的额外高度都不同？

还有很多其他方法可以达到神秘的高度和偏移,但我觉得如果我理解这些情况,我会有足够的模型.

有没有人拥有能让我预测这些行为的心理模型？(因此希望记住它们,这样我就不会浪费时间每6个月重新计算一次)？

这是一个展示我想要了解的东西的游乐场.

section {
  background-color: gray;
  width: 500px;
  height: 700px;
  padding-top: 10px;
  font-size: 12px;
  line-height: 25px;
}
.reference {
  background-color: aquamarine;
  height: 25px;
  width: 75px;
  float: left;
  padding: 0;
  margin: 0;
}
.container {
  padding: 0;
  margin: 0;
  background-color: white;
  height: 25px;
  width: 423px;
}
ul {
  list-style-type: none;
  background-color: rgba(255, 50, 50, 0.25);
}
li {
  display: inline;
}
.case-one {
  display: inline-block;
}
.reference-two {
  position: absolute;
  top: 130px;
}
.reference-two-b {
  position: absolute;
  top: 200px;
}
.case-two {
  position: absolute;
  left: 85px;
}
.case-two-a {
  top: 130px;
}
.case-two-b {
  top: 200px;
}
.case-two ul {
  position: relative;
  font-size: 0px;
}
.case-two-a ul {
  line-height: 1;
}
.case-two-b ul {
  line-height: 25px;
}
.case-two li {
  display: inline;
  font-size: 12px;
  line-height: 25px;
}

<section>
  <div class="container case-one">this I fully understand</div>
  <div class="reference">case one</div>
  <br/>
  <br/>


  <div class="container case-one">
    <div style="background-color: rgba(50,50,200,0.4); width:8px;height: 12px; position: absolute;"></div>
    <ul>
      <li>but</li>
      <li>not this.</li>
      <li>why is the ul offset?</li>
      <li>why by font-size, not line-height?</li>
    </ul>
  </div>
  <div class="reference">case one b</div>


  <div class="container case-two case-two-a">
    <ul>
      <li>why does</li>
      <li>setting the ul font-size to 0 work?</li>
    </ul>
    <div style="line-height: 1.2;">also, why does the ul line-height have to be set to 1? If it is set to 25px, the ul grows, see below</div>
  </div>
  <div class="reference reference-two">case two</div>

  <div class="container case-two case-two-b">
    <div style="background-color: rgba(50,50,200,0.4);left:4px;width:8px; height: 30px; position: absolute;"></div>
    <div style="background-color: rgba(50,200,50,0.4);width:8px; height: 29px; position: absolute;left:16px;"></div>
    <div style="background-color: rgba(200,50,50,0.4);width:8px; height: 28px; position: absolute;left:28px;"></div>
    <ul>
      <li>why does</li>
      <li>setting the ul line-height to 25px result in it being 30px high?</li>
    </ul>
    <div style="line-height: 1.4;margin-top: 8px;">where does the 5px come from?? Why is it 4px on chrome? Why is it 3px on firefox? Anyone else get any other heights, lol?</div>
  </div>
  <div class="reference reference-two-b">case two</div>

</section>

Answer 1

是的。你需要的心智模型就是支柱。这似乎是 CSS 最好的秘密，这很不幸，因为它对于理解案例二和许多类似的行为至关重要。弄清楚支柱的位置和高度，许多布局行为就开始有意义了。

首先是案例一。浏览器将 ul 元素的默认顶部（和底部）边距定义为字体大小的比例。不同的浏览器可以自由设置他们想要的任何比例，因此某种重置或标准化是很常见的。

现在情况二，回到支柱。仅包含行内元素的块框由一堆行框组成。每个行框都以一个零宽度的虚拟内联元素 - 支柱开始。现在，行高仅影响内联元素。但是当您设置块元素的行高时，每个子元素（包括支柱）都会继承该行高。您可以覆盖实际子元素的行高，但不能覆盖支柱。

所以当你说ul { font-size:0; line-height:1; }这意味着支柱的高度将是 0px 乘以系数 1 = 0px 时，因此无论支柱在哪里，它都不会占用空间。

然而，当你说 时ul { line-height:24px; }，这意味着支柱的有效高度将为 24px。内联元素的行高通过在元素字符上方和下方添加空格来影响它们所在文本行的高度。因此，如果字符高为 18 像素，行高为 24 像素，则要添加的额外空间为 6 像素。这就是所谓的领先。前导的一半添加到元素上方，一半添加到元素下方。这些被称为半领先。

因此，如果ul { font-size:0; line-height:24px; }每行文本上的支柱的字符大小为 0，但上方和下方的半行距均为 12 像素。但其他元素具有非零字符大小。如果它们的字体 em 大小为 12 像素，则根据字体，可能会给出 16 像素的使用字符高度（例如基线上方 13 像素，下方 3 像素）。所以他们会有半领先优势(24px - 16px) / 2 = 4px。

但除了它们的高度外，您还必须考虑它们的垂直对齐方式。支柱始终是“vertical-align:baseline”，并在此基础上与该文本行上的其他内联元素对齐。

为了简单起见，我们假设其他文本元素也是vertical-align:baseline。

那么该行文本的总行高是基线上方的最大高度max(13px + 4px (character), 12px (strut)加上基线下方的最大高度max(3px + 4px (character), 12px (strut)。这是17px + 12px = 29px，因此超过指定的 24px 行高。

李斯特先生在回答相关问题时提供了一些有用的图表