关键词：box-sizing、border、margin、padding、content、display
我们网页中的每一个元素都可以看做是一个盒子，这个盒子由内容、内边距、外边距、边框组成。
这些盒子根据不同的方式可以分为不同的种类。
块级盒子和行内盒子还有行内块级盒子
块级盒子
- 宽度自动占满
- 自动换行
- 宽高都起作用
- 内边距、外边距、边框会将其他元素推开、
行内盒子
- 不会换行
- 宽高将不起作用
- 垂直方向的内外边距、边框会起作用，但是不会把其他inline元素推开。
- 水平方向的内味边距、边框会起作用，且会把其他的inline元素推开。
行内块级盒子
既有行内盒子的特性又有块级盒子的特性
我们可以通过display属性来改变一个盒子的属性
block：块级元素
inline：行内元素
inline-block：行内块级元素
flex：弹性盒子
grid：网格盒子
什么是css的盒模型
一个盒子由：
content：内容区域，可以通过width和height来设置大小
padding ：包围在内容外边框内的区域，可以通过padding来设置，有上下左右四个值
border：边框，可以通过border属性设置，有上下左右四个边框
margin：边框外的距离，可以通过margin来设置，有上下左右四个值
组成。
标准盒模型和ie盒模型
按照不同的盒子宽高计算方式，现在的盒模型分为IE盒模型和标准盒模型，我们可以使用box-sizing属性来切换一个元素的盒模型。
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
标准盒模型 content-box实际的大小包含内容、内边距、边框的大小 宽度=410，高度=210
IE盒模型 border-box实际大小就是width和height的大小 宽度=350，高度=150
在实际开发中，IE盒模型更符合我们的思维模式，所以一般都是使用ie盒模型。
外边距
外边距将相当于空气墙，当两个元素的外边距相遇时，他们会融合在一起，而且外边距还可以为负值
内边距
边框
边框由宽度、样式、和颜色三个属性组成，还有上下左右四个边框
