CSS盒子模型——标准与怪异

上回咱们说到盒子模型的四大属性，这次我们接着唠唠盒子的标准模式与怪异模式以及盒子如何产生更大的作用。

01

标准模式和怪异模式

盒子模型有两种模式——标准与怪异，如何理解？我们想象一下，老师让格列和格宁两兄弟画一张同样尺寸的画。画完之后，格列买了一个大画框，画框中间的空白区域刚好与画的尺寸一样大。而格宁则买了个小画框，画布和画框的宽度和高度恰好均相同。那么很显然，格宁的画看起来一定会比格列的画小。

其实，如果把画当成盒子来看的话，格列是典型的标准模式派，而格宁则是怪异模式派。那么我们就知道两者的区别了：

标准模式下，盒子的最终宽度/高度 = 原始宽度/高度 + 左右/上下的内边距 + 左右/上下的外边距；

怪异模式下，盒子的最终宽度/高度 = 原始宽度/高度。

CSS 中，标准模式用 content-box 表示，怪异模式是 border-box，它们都是box-sizing 属性的值，如果不设置该属性，那么盒子默认的是标准模式。比如我建一个300px 宽，200px 高的盒子，并设置20px 的padding（内边距）和10px 的border（边框），在网页上得到的盒子大小变成了360px *260px：

如果我们要将之改为怪异模式，则需要设置box-sizing 的值为border-box，整个区域还是300px *200px，相当于边框和内边距都是内折的：

02

用盒子模型建造边框均为1px 的表格

先来看看分别用普通方法和盒子模型建的1px 边框的表格的对比：

不比不知道，一比较就可以明显看出左边的表格比右边的表格边框要宽，而且实际上要大一点。这是因为我们直接用table 新建表格时，td 和th 会把每个单元格当成独立的格子来设置边框，那么相邻两个单元格的之间的边框实际上是2px。而用盒子模型可以将建立的表格看成一个整体，只需要通过CSS 合并边框，从而实现边框只有1px 宽：

03

盒子里的鼠标

鼠标的形状用cursor 属性定义，属性值大概有这么些：default（默认：箭头）、 move（移动、 hand/pointer（手型）、crosshair（“+”型）、text（“I”型）、wait（等待）、help（帮助：“?”型）、e-resize（指向东的箭头）、w-resize（指向西的箭头）、n-resize（指向北的箭头）、s-resize（指向南的箭头）、ne-resize（指向东北的箭头）、sw-resize（指向西南的箭头）等。定义不同的属性值就能实现在盒子的内部呈现不同的鼠标形状，下面是我演示的四种不同鼠标类型，大家可以猜猜它们的属性值分别是什么：

提示一下，其中一种的HTML 代码为：

04

盒子里的列表

列表符号类型也非常之多，可以用数字、字母、形状，这些符号用list-style-type 属性定义，还可以使用图片，用list-style-image 定义。常见的列表符号有：disc（实心圆）、circle（空心圆）、square（方形）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写字母）、upper-alpha（大写字母）。以下是演示的三种：

其中一种的HTML 为：

把图片当做列表项目符号可以使用list-style-image: url(图片名称.图片格式)，例如：

其结果是这样。可以看出来图片并没有和文字保持同样的高度，正是因为这种方法无盖改变图片的位置，所以不建议使用。

那么要如何实现以图片为项目符号的列表呢？可以使用下面的方法，请注意看注释，我在那里解释了每一步的作用：

这种方法的逻辑就是把图片当做背景，使之单一并设置好它的位置。现在图片和文字终于匹配且对齐了：

05

总结

盒子模型能将很多元素组织起来，所以它能创造很多有组织有纪律的部分。或许我们还可以用盒子模型尝试更多~~