Firefox开发者工具里查看HTML元素的Box模型

简介： Firefox开发者工具里查看HTML元素的Box模型

box模型的组成部分：

Content box：通过width和height属性指定大小。

padding box：衬垫。包裹content盒模型。

border box

margin box

如下图所示：

标准的CSS模型里，box的尺寸为content box，padding和border之和：

切换成另一种盒模型: alternative model

语法：

box-sizing: border-box

切换成alternative mode之后，height和width属性指定的就是border box的高度和宽度，而不是standard盒模型里的content box的高度和宽度。

Whether you are using the standard or alternative box model, the margin is always added after the size of the visible box has been calculated.

无论哪种模型，margin值都是visible box的尺寸被计算之后，再累加上去的。

什么叫做margin collapse

如果两段margin相邻，比如下图两个段落，分别具有50px 的margin-bottom和30px的margin-top，则两个段落间的间隔，不是50 + 30 = 80px，而是两者的最大值，即50px.