盒模型的介绍
什么是盒模型
盒模型是css的基石，它规定了网页元素如何显示以及元素之间的相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
盒模型的组成
盒模型由content, padding, border, margin这几部分组成的。
Content box
用来显示内容，大小可以通过设置width和height. width和height属性可以设置为以下这几个属性：
- auto: 默认。浏览器会计算出实际的宽度
- length: 使用px, cm, mm, em等单位定义宽度
- %: 基于包含它的块级对象的百分比定义宽度
max-width和max-height max-width定义元素的最大宽度 该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值
- none: 默认。对元素的宽度没有限制
- length: 使用px, cm, mm, em等单位定义元素的最大宽度值
- %: 基于包含它的块级对象的百分比定义最大宽度
max-height属性设置元素的最大高度 该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值 设置最大高度后，段落的高度不会超过最大高度，但文本会溢出，其他部分可以覆盖到溢出的部分
min-width和min-height min-width属性设置元素的最小宽度 该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值
- length: 使用px, cm, mm, em等单位定义元素的最小宽度值。默认值是0
- %: 基于包含它的块级对象的百分比定义最小宽度
min-height属性设置元素的最小高度 该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。
Padding box
包围在内容区域外部的空白区域，大小通过padding相关属性设置。
内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或者正值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。
我们可以使用padding简写属性控制元素所有边，或者每边单独使用等价的普通属性。
- padding-top
- padding-right
- padding-bottom
- padding-left
Border box
边框盒包裹内容和内边距，大小通过border相关属性设置。
边框是在边距和填充框之间绘制的。如果你正在使用标准的盒模型，边框的大小将添加到可视区的宽度和高度。如果你使用的是替代盒模型，那么边框的大小会使内容框的更小，因为它会占用一些可用的宽度和高度。
我们可以使用border属性一次性设置所有四个边框的宽度，颜色和样式。
也可以设置每边的宽度，颜色和样式, 如下设置
- border-top
- border-right
- border-bottom
- border-left
设置所有边的颜色，样式或宽度，如下设置：
- border-width
- border-style
- border-color
设置单边的颜色、样式或宽度，可以使用最细粒度的普通属性之一：
- border-top-width
- border-top-style
- border-top-color
- border-right-width
- border-right-style
- border-right-color
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-left-width
- border-left-style
- border-left-color
Margin box
这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过margin相关属性设置。
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁推开。外边距可以为正也可以为负。设置负值会导致和其他内容重叠。无论是怪异模型还是标准模型，外边距总是在计算可见部分后额外添加。
我们可以使用margin一次性控制一个元素的所有边距，也可以按照每边单独使用等价的普通属性控制：
- margin-top
- margin-right
- margin-bottom
- margin-left
在使用外边距的时候需要特别注意一下外边距折叠，也就是说如果有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。 出现外边距折叠的情况如下：
- 同一层相邻元素之间
- 没有内容将父元素和后代元素分开
- 空的块级元素
盒模型的分类
盒子模型有好几种分类，下面我们依次来看一下
标准盒模型和替代盒模型（IE盒模型，也叫怪异盒模型）
- 标准盒模型： 如果你给盒设置width和height, 实际上设置的是Content box。padding，border再加上设置的宽高一起决定整个盒子的大小。
- 替代盒模型： 如果你给盒设置width和height，那么盒子的大小就是这个设置的宽高，里面的Content box的大小需要减去padding和border。
??? 如何将标准盒模型和替代盒模型进行转换呢？
这里面涉及到一个属性：box-sizing。默认浏览器会使用标准模型，也就是box-sizing: content-box；如果想要让标准盒模型变成替代盒模型，只需要将box-sizing属性设置成border-box； 如果你希望所有的元素都是替代盒模型，那么就在html属性上设置box-sizing: border-box;，这样所有的元素都可以继承这个属性。
块级盒子和内联盒子
先来说明一下内部和外部显示类型：我们可以通过对盒子display属性的设置，比如inline或者block，来控制盒子的外部显示类型，决定是块级还是内联。所以这里的分类块级盒子和内联盒子是盒子的外部显示类型。 同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按正常文档流布局，也意味着它们和其他块元素和内联元素一样。但是我们可以通过设置display: flex来实现弹性盒子来更改内部显示类型。这时候外部显示类型就是block，内部显示类型修改为flex。该盒子的所有直接子元素都会成为flex元素。同理，grid也是这样的。
- 块级盒子
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大多数情况下意味着盒子会和父容器一样宽。
- 每个盒子都会换行
- width和height属性可以发挥作用
- padding, margin和border会将其他盒子从周围推开
- 内联盒子
- 盒子不会产生换行
- width和height属性将不起作用
- 垂直方向上的padding, margin和border会被应用但不会把其他处于inline状态的盒子推开
- 水平方向上的padding, margin和border会被应用并且会把其他处于inline状态的盒子推开
box-sizing属性
box-sizing属性最主要的用法是规定容器元素的最终尺寸计算方式 box-sizing: content-box； 这是默认属性，盒子的宽度和高度只包含内容，不包含内边距和边框 box-sizing: border-box; 盒子宽度和高度包括了padding和border
盒模型的应用
盒模型的应用在css样式中应用还挺广泛的，基本上每个元素都是一个盒模型，我们在写样式的时候都是在盒模型的基础上去写样式的，下面我们举几个我们平时容易忽略的几个例子。
改变宽高范围
我们在根据设计稿写样式的时候，一定要注意的是，设计稿上的宽度都是边框盒，但是我们浏览器默认的样式处理是内容盒。
在这之前，我们可能使用的方式就是精确计算，现在统一使用css3的box-sizing属性设置为border-box即可。
改变背景覆盖范围
一般默认情况下，背景会覆盖边框盒 如果我们不想背景覆盖边框盒，那就可以使用background-clip属性进行修改
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
// 全局属性值
background-clip: inherit;
background-clip: initial;
background-clip: unset;
溢出处理
控制内容溢出边框盒后的处理方式是使用overflow。
// 可视化
overflow: visible;
// 不可视化
overflow: hidden;
// 设置滚动条
overflow: scroll;
// 需要的时候显示进度条，不需要则进度条消失
overflow: auto;
断词规则
断词属性是word-break,影响文章在什么位置被截断换行。主要有以下几种情况
// 普通，CJK字符(文字位置截断)，非CJK字符(单词位置截断)
word-break: normal;
// 截断所有，不论什么字符，都在文字位置截断
word-break: break-all;
word-break: keep-all;
空白处理
空白处理属性white-space主要是用来处理文本中的空白和文字溢出。默认值是normal。 需要注意的是这个属性只能控制单行文本，多行文本用js处理。
// 将溢出的文字转换为...
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// 当white-space的值设置为pre时，空白不会被折叠
white-space: pre;
以上内容参考官方文档：developer.mozilla.org/zh-CN/docs/…
