CSS 布局 - 为什么边框和大小会这样？答案

【问题标题】：CSS layout - why do the borders and size behave like this?CSS 布局 - 为什么边框和大小会这样？
【发布时间】：2019-07-01 15:13:11
【问题描述】：

我想创建一个带有标题、边框（左、右、下）以及内容的对话框。当前源码：

<html>
<body>
<div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table">
<div style="display: table-row;">
<div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div>
</div>
<div style="display: table-row;">
<div style="background: #0f0; width: 100%; display: table-cell;">

<div style="display: table;">
<div style="display: table-row;">

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>

<div style="display: table-cell;">
<div style="overflow: scroll; white-space: nowrap">
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />

cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
</div>
</div>

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>

</div>
</div>



</div>
</div>
<div style="display: table-row;">
<div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div>
</div>

</div>
</body>
</html>

产生一个输出

左右边框发生了什么，为什么大小超过了上父级指定的宽度（152px）？

【问题讨论】：

标签： html css layout border

【解决方案1】：

如果您要使用表格，请使用表格。设置块元素的显示以模仿各种表格元素充其量是有问题的，而且跨浏览器非常不可预测。

【讨论】：

【解决方案2】：

您使用了太多内联规则，尝试使用 CSS 选择器、类和 id 将它们分隔到 div，适当地使用表格。

有些规则会抵消其他规则，这就是您看不到边界的原因。

【讨论】：

【解决方案3】：

抱歉，您的 HTML 代码是一团乱七八糟的标签汤，让人想起 90 年代初。

对于您的确切问题，宽度较大，因为您的规则 white-space: nowrap 拉伸了表格。这就是可能移除边框的原因 - 这些“单元格”中没有内容，因此它们会折叠到零宽度。

就像 Robusto 说的，如果你想要一张桌子，就用一张桌子。如果你想要一个类似对话框的框，你肯定不需要所有嵌套的div 标签。只要有你的外层并使用边框规则来设置边框：

<div style="border:4px solid #000; border-top:0; background:#0ff; width:152px; height:112px;">
    <h2 style="background:#f00;">top</h2>
    cwe cwe cwe cwe...
</div>

【讨论】：

【解决方案4】：

滚动不是由大小调整引起的，它是由您强制滚动值溢出引起的。根据我的经验，将其设置为滚动会一直显示滚动条 - 尽管处于禁用状态。尝试将溢出设置为自动

<div style="overflow: auto; white-space: nowrap">

【讨论】：

【解决方案5】：

您不必一开始就使用所有这些divs。您可以大幅简化 HTML：

<div>
  <h1>top</h1>
  <div>
    <p>cwe cwe cwe</p>
    <p>cwe cwe cwe</p>
  </div>
</div>

仍然可以轻松应用您需要的所有样式。无需为每个边框创建div。这就是 CSS 属性 border-left、border-right、border-bottom 和 border-top 的用途（这些都被古代浏览器支持，不像 display: table）。

【讨论】：