2020-07-03 盒模型
box: 盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
1. 行盒 display等于inline的元素
2. 块盒 display等于block的元素
行盒在页面中独占一行，块盒在页面中不换行
注：没有行级元素和块级元素的叫法，因为元素是html的范畴，而html与显示无关，具有语义化。行盒和块盒是css的范畴，是显示的特征，所以行级元素和块级元素应该叫做行盒和块盒。
display默认值是inline，该元素不能继承
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
从内到外分别是：内容content、填充padding、边框border、外边距margin
内容部分通常叫做整个盒子的内容盒 content-box
填充(内边距) 是盒子边框到盒子内容的距离
填充区+内容区 = 填充盒 padding-box
边框 = 边框样式 border-style + 边框宽度 border-width + 边框颜色 border-color
边框样式默认为none，颜色默认是字体的颜色
边框 + 填充区 + 内容区 = 边框盒 border-box
外边距：边框到其它盒子的距离
简写属性（速写属性）
盒模型的应用
1. 改变宽高范围
默认情况下，width和height设置的是内容盒宽高。
- 页面重构师：将psd文件(设计稿)制作为静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
1. 精确计算 2. css3 ：box-sizing （改变宽高的影响范围）
单行文字居中：设置line-height
2. 改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过background-clip修改
3. 溢出处理
overflow，控制内容溢出边框盒后的处理方式，默认是可见的 visible 还有hidden、scroll、auto
4. 断词规则
word-break，会影响文字在什么位置被截断换行，
取值有：normal，普通，cjk字符（文字位置截断），是默认。非cjk字符（单词位置截断）
break-all：所有字符都在文字处截断。
keep-all：保持所有。所有文字都在单词之间截断。
5. 空白处理
white-space：nowrap 再加上 overflow：hidden和text-overflow：ellipsis 只能控制单行文本，多行需要使用js处理
默认值是normal，还有pre
前端面试题之CSS盒模型_simeng-han的博客-CSDN博客_盒模型面试题
介绍一下box-sizing属性？
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
