box：盒子，每个元素允许在页面中都会生成一个矩形区域（盒子）
网页布局本质：先准备好相关的网页元素，网页元素基本上都是盒子Box；利用css设置盒子样式，摆放到相应位置；往盒子里面装内容。
## 1. 盒子类型：
1. 行盒，display=inline的元素
2. 块盒，display=block的元素
行盒在页面中不换行，块盒独占一行
同时display=inline（为默认值）
浏览器默认样式表设置的块盒：容器元素，h1~h6，p
常见的行盒：span、a、 img、video、audio
## 2. 盒子的组成部分
无论是行盒，还是块盒，都由下面几个部分组成，从内到外分别是：
1. 内容 content
width、height设置的是盒子内容的宽高
内容部分通常叫做整个盒子的“内容盒 content-box”
2. 填充（内边距） padding
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性/ 上 右 下 左
填充区+内容区=“填充盒 padding-box”
3. 边框 （外边框）border
边框=边框样式+边框宽度+边框颜色
border-style: 边框样式; border-width: 边框宽度; border-color: 边框颜色;
边框+填充区+内容区=“边框盒 border-box”
边框颜色默认为字体颜色
4. 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
margin可以让块级盒子水平居中，前提条件：盒子指定宽度，盒子左右外边距为auto。
inline和inline-block元素水平据中国，给其父元素添加text-align：center即可。
# 3. 行盒的盒模型
常见的行盒：包含具体内容的元素
span、strong、em、i、img、video、audio
## 显著特点
1. 盒子沿着内容延伸
2. 行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型、间接调整
3. 内边距(填充区)
水平方向有效，垂直方向仅会影响背景，不会实际占据空间
4.边框
水平方向有效，垂直方向不会实际占据空间
5.外边距
水平方向有效，垂直方向不会实际占据空间
## 4. 行块盒
display:inline-block的盒子，在开发中常用来做分页
1. 不独占一行
2.盒模型中所有尺寸都有效
## 5. 空白折叠
空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间
## 6. 可替换元素 和 非可替换元素
大部分元素，页面上显示的效果，取决于元素内容，称为“非可替换元素”
少部分元素，页面上显示的结果，取决于元素属性，称为“可替换元素”
可替换元素：img、video、audio，利用src属性进行改变
绝大部分可替换元素为行盒
可替换元素类似于行块盒，盒模型中所有尺寸都有效
