盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型
1. 行盒，display等于inline的元素 行盒在页面中不换行
2. 块盒，display等于block的元素 块盒独占一行
浏览器默认样式表设置的块盒：容器元素、h1~h6、p等
常见的行盒：span、a、img、video、audio、br等
盒子的组成部分
1.内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
2.填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
padding: 上 右 下 左
填充区+内容区 = 填充盒 padding-box
3.边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style 边框宽度：border-width 边框颜色：border-color
边框+填充区+内容区 = 边框盒 border-box
4.外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
盒模型的应用
1.改变宽高范围
默认情况下，width 和 height 设置的是内容盒宽高。
页面重构师：将psd文件（设计稿）制作为静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
1.1 精确计算
2.2 CSS3：box-sizing
2. 溢出处理
overflow，控制内容溢出边框盒后的处理方式
3. 断词规则
word-break，会影响文字在什么位置被截断换行
normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）
break-all：截断所有。所有字符都在文字处截断
keep-all：保持所有。所有文字都在单词之间截断
4. 空白处理
white-space: nowrap
行盒的盒模型
常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio
显著特点
1. 盒子沿着内容沿伸
2. 行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
3.内边距（填充区）
水平方向有效，垂直方向不会实际占据空间。
4.边框
水平方向有效，垂直方向不会实际占据空间。
5.外边距
水平方向有效，垂直方向不会实际占据空间。
行块盒
display：inline-block 的盒子 不独占一行 盒模型中所有尺寸都有效
空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。
