盒模型与盒子阴影

1.盒模型原理

对所有的盒子在浏览器中所占据的空间进行计算

2.什么是盒子

只要在浏览器中【占据位置】的html元素，都是我们计算的盒子。

3.盒模型在浏览器中使用什么计算位置

宽度：width 高度：height 内边距：padding 边框：border-width 外边距：margin
盒子分类：边框盒子（ie默认）和内容盒子（谷歌默认）
边框盒子在浏览器中占据空间 = width * height
内容盒子在浏览器占据的空间 = width + border-width + padding + height + margin

4.总结

	内容盒子：width height决定盒子容纳多少东西；随着其他变化；盒子在浏览器中占据的位置也变化。
    边框盒子：width height决定盒子在父容器中占据的位置，其他变化只会改变盒子能容纳多少东西。

4.盒子阴影

box-shadow的取值：

1. none：无阴影
2. length：第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
3. length：第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
4. length：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
5. length：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩
6. color：定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
7. inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影