子盒子
边框盒
- 由border、padding、content组成，是检查器默认显示的尺寸。
-
背景颜色覆盖默认覆盖边框盒，可通过background-clip属性修改
background-clip：border-box; 覆盖边框盒 background-clip：padding-box; 覆盖填充盒 background-clip：contentr-box; 覆盖内容盒
填充盒
*由padding。content组成。严格意义上，overflow（溢出），指溢出填充盒。
overflow：hidden；溢出部分隐藏（隐藏padding以外的内容）
overflow：inherit；强制继承父级设置
overflow：scroll；垂直和水平方向显示滚动条
overflow：auto；有溢出的方向显示滚动条
内容盒
- 由content组成，默认情况下，width和height属性，是指内容盒的宽度和高度。
-
width和height的设置范围可通过box-sizing属性修改
box-sizing：border-box；IE默认（border、padding、content） box-sizing：content-box；谷歌默认（content）
outline属性
- 外边框（轮廓），用法和border一样，不占像素（布局时使用）
- 使用outline时，只能同时对四条边同时设置。
视觉格式化模型
- 它是CSS的一种机制，它规定了页面中的多个盒子如何布局。
视口
- 可视窗口，通常指浏览器的可视区域。不同设备可视区域不同。
包含块
- 每个元素都有一个包含块，它是指元素在页面中摆放的区域。通常情况下，元素的包含块是它父元素的内容块。包含块会随父元素的内容盒移动。
元素定位 体系：
- 常规流，浮动，绝对定位
- 任何一个元素，必须属于其中的一种定位体系。
- 不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。
- 默认情况下，元素为常规流，块盒占满整个可用空间，自动换行。行盒紧挨显示，直到占用完整个可用空间，再换行。
块级元素在不同体系中自动值计算
常规流：普通流，文档流，普通文档流等
水平方向
常规流盒子水平方向的尺寸必须等于包含块的宽度
- margin-left、right，width全取自动，width占满整个空间
- margin一侧自动，一侧设置固定值，width设置自动，margin自动一侧会被width占满
- margin两侧设置固定值，width自动，width占满剩余空间 margin两侧自动，width固定值，width自动居中 margin两侧，width都固定，且三者之和小于父级content，则margin-right变为自动
垂直方向
- margin为auto：0px
- height为auto；适应内容的高度