盒子模型
- padding和margin
1.使用padding时，如果未指定盒子的width，则盒子的尺寸不会改变，当指定了时，盒子的尺寸会相应的发生变化。
2.行内元素只有左右外边距，没有上下外边距，应尽量避免调整垂直方向的padding，因为可能会与预料的不同（浏览器问题）。
3.块元素垂直方向上使用margin时，相邻块元素可能会发生外边距合并，之间的外边距取两者之间的最大值。
4.块元素内嵌块元素时使用margin，可能会发生外边距合并（现象是，父元素外边距改变，子元素相对于父元素外边距没变），解决办法：
（1）可以为父元素定义1像素的上边框或上内边距。
（2）可以为父元素添加overflow：hidden。
详细请查看：https://www.w3school.com.cn/css/css_margin_collapsing.asp
- content宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height属性值可以是不同单位的数值或相对于父元素的百分比%。最常用的是像素值。·
| 盒子尺寸计算 | 计算方式 |
|---|---|
| 外盒尺寸（元素空间尺寸） | 元素空间高度=height+padding+border+margin 元素空间宽度=width+padding+border+margin |
| 内盒尺寸（元素大小） | 元素Height=height+padding+border 元素Width=width+padding+border |
注意：
1.宽度属性width和高度属性height仅适用于块级元素，对于行内元素无效。
2.计算盒子模型的总高度时，还应该考虑上下两个盒子垂直外边距合并的情况。
- 盒模型（CSS3）
以上为标准和模型的相关内容，在这介绍其他盒模型。CSS3中可以通过box-sizing属性来指定盒模型，既可以指定为content-box、border-box，区别在于计算盒子大小的方式发生了变化。
| 属性 | 描述 | 格式 |
|---|---|---|
| box-sizing | 不设置的话默认值为 content-box。 1.content-box：盒子大小为width+padding+border 2.border-box：盒子大小为width，即width包括了padding和border，设置这些属性时，只是改变内容的大小，width属性值不会改变。 |
box-sizing: content-box | border-box |
注意：容易 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。
- 边框阴影
| 属性 | 描述 | 格式 |
|---|---|---|
| box-shadow | box-shadow 属性向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。参数： 1.h-shadow ：必需。水平阴影的位置。允许负值。 2.v-shadow ：必需。垂直阴影的位置。允许负值。 3.blur ：可选。模糊距离。 4.spread ：可选。阴影的尺寸。 5.color ：可选。阴影的颜色。 6.inset ：可选。将外部阴影 (outset为默认，不能写，写了会出错) 改为内部阴影。 |
box-shadow: h-shadow v-shadow blur spread color inset; |
