第 3 章 盒模型

1 元素宽度的问题

当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。

1.1 　避免魔术数值

在我的屏幕上，侧边栏改为宽26%，两列能够并排放下，但是这种方式不可靠。26%是一个魔术数值（magic number）。它不是一个理想的值，而是通过改样式试出来的值。

在编程中不推荐魔术数值，因为往往难以解释一个魔术数值生效的原因。如果不理解这个数值是怎么来的，就不会知道在不同的情况下会产生什么样的结果。我的屏幕宽1440px，在更小的视口下，侧边栏仍然会换行。虽然CSS中有时确实需要反复试验，但目的是为了得到更好的样式，而不是为了强行将一个元素填入一个位置。

1.1.2 调整盒模型

在CSS中可以使用box-sizing属性调整盒模型的行为，让指定的宽度包含内边距和边框。
box-sizing的默认值为content-box，这意味任何指定的宽或高都只会设置内容盒子的大小
将box-sizing设置为border-box后，height和width属性会设置内容、内边距以及边框的大小总和，这刚好符合示例的要求

2 元素高度的问题

border-box的修改依然适用于高度，而且很有用，但是通常最好避免给元素指定明确的高度。因此，容器的高度由内容天然地决定，而不是容器自己决定。

2.1.1 内容溢出了容器

用overflow属性可以控制溢出内容的行为，该属性支持以下4个值。

• visible（默认值）——所有内容可见，即使溢出容器边缘
• hidden——溢出容器内边距边缘的内容被裁剪，无法看见
• scroll——容器出现滚动条，用户可以通过滚动查看剩余内容。在一些操作系统上，会出现水平和垂直两种滚动条，即使所有内容都可见（不溢出）不过，在这种情况下，滚动条不可滚动（置灰）
• auto——只有内容溢出时容器才会出现滚动条