box-sizing
- box-sizing:content-box; 默认值，盒子的总尺寸=width+padding+border（算宽时要把两边的都算进去，即有两个padding，两个border）
- box-sizing:border-box; 盒子的尺寸=内容元素的尺寸=width（怪异盒模型）
- box-sizing:inherit; 继承父元素的盒子模型
学display之前需要先巩固一下：
- 块元素占一行，其宽度自动填满父元素宽度
- 行内元素不占一行，相邻的会在同一行展示，宽度随内容的变化而变化；
- 块元素可设置width，height；行内元素设置width和height可能无效（想要设置行内元素的宽高，可先把他用display转成块元素）
- 块元素可设置margin，padding；（行内元素设置margin，padding不能保证全部生效）
display
- display：block； 显示块元素（可将内联元素变成块元素）
- display：none； 隐藏
- display：inline； 将块元素变成行内元素
- display：inline-block； 行内块元素，具有块元素的一切特性（width，height，margin，padding）唯一不同的是不会独占一行，可并列显示【可以用于当想让块元素并列显示时，又不想他们变成行内元素失去width，height，margin，padding效果】
注意点
- 标准文档流套用规则：内联元素可以被包含于块元素，反过来则不成立
- 当使用display使得两个div并列时，div之间会产生空隙，因为标签之间有空白，删除空白，两个div就没有空隙间隔
- 盒子的组成=内容+border+padding+margin
- 盒子的视觉大小=内容+border+padding
