扯点：Box Modal - 盒模型

在文档中，元素被表示为一个矩形的盒子。

在CSS中，使用盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边(margin), 边框边(border), 内填充边(padding)与内容边(content)。

计算元素宽高

box-sizing 决定元素宽度和高度如何计算

box-sizing支持的属性

content-box | border-box

值	描述
content-box	宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

padding

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。但不允许使用负值。
%	规定基于父元素的宽度的百分比的内边距。

实际测试padding的百分比，测试结果并不是等于，而是近似等于。浏览器计算会存在偏差，

border

1. border绘制在“元素的背景之上”,换句话来说，元素的背景是内容、内边距和边框区的背景。
2. border默认样式border-style:none;
3. 默认颜色border-color: 元素文本颜色。利用这个特性，解决边框和文本颜色需要保持的设计要求。
4. 实现透明边框 border-color:transparent;

margin

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。
%	规定基于父元素的宽度的百分比的外边距

margin: auto计算规则

设置margin: auto后，

1. 行内元素，行内块级元素margin取值0；

2. 块级元素，在文档流中

   • margin-bottom和margin-top取值0；

   • margin-left和margin-right取值相同，按照下面公式计算

     'margin-left' + 'border' + 'padding' + 'width' + 'margin-right' = width of containing block

3. 块级元素，不在文档流中

   • margin-left和margin-right取值相同，按照下面公式计算

     'margin-left' + 'border' + 'padding' + 'width' + 'margin-right' = width of containing block

   • margin-top和margin-bottom取值相同，按照下面公式计算

     'margin-top' + 'border' + 'padding' + 'height' + 'margin-bottom' = height of containing block

margin collapsing(外边距塌陷、外边距合并)

1. 在同一个文档流中，同一个BFC内，两个相邻块级元素的垂直方向上外边距（margin-top/margin-bottom）会合并
2. 当两个元素属于不同的BFC时，这两个元素的外边距不会合并。

发生外边距塌陷的三种基本情况

1. 相邻的兄弟姐妹元素
2. 块级父元素与其第一个/最后一个子元素
3. 空块块级元素