CSS盒模型要点

盒模型的概念

在文档中的每一个HTML元素都被认为是一个矩形盒子
盒子是由内容区以及围绕着内容区的内边距，边框，外边距组成

内容

当盒子类型为content-box（默认）时，主要由width和height属性分别控制其宽度和高度

内边距

指内容与边框之间的区域，由padding属性控制

边框

使用border属性设置元素边框

外边距

指元素和相邻元素之间的空白区域，由margin属性控制

布局方式

外部显示类型：控制相邻盒子之间的布局

块级盒子（display: block）：盒子的宽度会占满整个浏览器，并将相邻盒子挤占到下一行显示
行内盒子（display: inline）：盒子的宽度是内盒宽度，后面的盒子会继续排列。
注：
1.块级盒子的padding和margin在水平和垂直方向都会生效并挤占空间
2.行内盒子无法手动设置宽高；垂直方向的padding和margin能设置生效，但并不会挤占其他盒子的空间从而导致重叠；水平方向上的padding和margin会挤占其他盒子的空间

内部显示类型：控制盒子之中子盒子的排列方式

流式布局（display: flex）
栅格布局（display: grid）
inline-block（display: inline-block）可以使盒子的外部类型保持行内状态，同时可以设置宽高，padding，margin，从而挤占周围盒子的空间
注：行内盒子中不能嵌套块级盒子

box-sizing属性

该属性是对盒子模型的类型设置

box-sizing: content-box;（默认）

此时width和height分别表示内容的宽度和高度，盒子的尺寸不包括外边距

box-sizing: border-box;

此时width和height分别表示盒子的宽度和高度，盒子的尺寸也不包括外边距

特殊的盒子模型

替换元素，如<iframe /><img /><video />等，它们加载外部元素，不受现有css影响（但可以通过css控制替换元素在当前页面中的位置）

边距塌陷

给相邻的盒子或父子盒子之间同时设置外边距，它们之间最终的距离可能并不是两个盒子的外边距之和

规则

如果都是正数，取最大
如果相同，取其一
如果正负都有，取最大正数和最小负数之和
如果都是负数，取最小
注：父子盒子之间如果只有外边距设置，边距塌陷位于父盒子之外；如果有其他尺寸属性设置，则不会有边距塌陷