什么是盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子分裂
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行，块盒在页面中独占一行（display默认属性是inline）
浏览器默认样式中设置为block的属性元素：容器元素（div、header、article...），文字元素（h1~h6），p
浏览器样式默认设置为inline的属性元素：span、a、img、video、audio
盒子组成部分
无论行盒还是快盒，都由以下四个部分组成，由内到外：
- 内容: content；width、height 这两个css值设置的是盒子内容的宽高。 内容部分通常叫做整个盒子的 内容盒content box
- 填充: padding；盒子的边框到盒子内容的距离，padding-left、padding-right、padding-top、padding-bottom可以设置边距。 填充区+内容区 = 填充盒（padding box）
- 边框: border 边框样式（border-style）+边框宽度(border-width)+边框颜色(border-color) 边框区 + 填充区+内容区 = 边框盒（border box）
- 外边距: margin 边框到其他盒子的距离
行盒模型
行盒有以下特点：
- 盒子沿着内容延伸，行盒的宽度可以默认就是内容区的宽度。行盒的没法设置宽高，只能通过一些渐接的手段处理，比如字体大小。
- 填充区，水平有效，垂直区域只会影响背景，不会实际占据空间
- 边框区和填充区一样
- 外边距也和填充区一样
