Question

我有以下代码：

<div style="display: table; border: 1px solid green;">
    <div style="display: table-cell; width: 1%; max-width: 1000px; background: red; height: 30px;"></div>
</div>

更改width属性具有完全违反直觉的后果。

这种行为的一个更好的例子：http://jsfiddle.net/8DUfr/2/。如何计算红色矩形的宽度？

Answer 1

您使用的是宽度：百分比％;在错误的div。你把它放在每个红条的父div中。我修复了你的JSFiddle。

http://jsfiddle.net/8DUfr/4/

<h3>1%</h3>
<div style="display: table; border: 1px solid green; width: 1%">
<div style="display: table-cell; max-width: 1000px; background: red; height: 30px;"></div>
</div>

Answer 2

CSS中的盒子模型传统上以这种方式工作：

给定宽度w，通过将w添加到元素的左右填充以及左右边框来计算框的实际可见宽度。通过CSS width属性指定的宽度，在现代浏览器中只告诉CSS内容区域应该有多宽。 See W3C documentation举个例子。

为了便于说明，我们假设您拥有以下内容：

<强> HTML

<div class="box">Something here</div>

<强> CSS

.box {
    width: 100px;
    border: solid 1px red;
    padding: 2px;
}

.box的可见宽度实际上是：100 + 2 * 1 + 2 * 2 = 106px。要使框精确测量100px，您必须从指定的宽度中减去6px以进行补偿。

<强> HTML

<div class="box-adjusted">Something here</div>

<强> CSS

.box-adjusted {
    width: 94px;
    border: solid 1px red;
    padding: 2px;
}

随着CSS3的出现，我们现在拥有box-sizing属性。使宽度按预期工作的值为border-box。

<强> HTML

<div class="box2">Something here</div>

<强> CSS

.box2 {
    width: 100px;
    border: solid 1px red;
    padding: 2px;
    box-sizing: border-box;
}

See fiddle: http://jsfiddle.net/nnN6t/3/

随着width属性变小，table-cell宽度变大

2 个答案: