这是我参与更文挑战的第 9 天，活动详情查看： 更文挑战
1 CSS3 版本新增盒子模型属性
CSS3 中可以通过 box-sizing 来指定盒模型，即可以指定为 content-box（经典盒模型）、 border-box （CSS3 新增盒模型），这样我们计算盒子大小的方式就发生了改变。
box-sizing: content-box; 盒子大小为 width （作用在盒子里的内容（ content ）上） + padding + border 。
box-sizing: border-box; 盒子大小为 width 指定的大小，此时 width 属性作用于整个盒模型上，即盒子就是定义的这么大，再添加 padding 和 border 属性时，会往盒子内部扩充空间。
2 盒子模型的内外边距使用方式
在给嵌套的盒子模型中的内容设置边距的时候，如果利用内边距和外边距和给内容本身设置宽度都能实现想要的布局效果，那什么时候使用何种方式？
一般按照优先程度依次使用 width padding margin ，因为 margin 会有外边距合并问题，再就是 IE6 中 margin 存在的 BUG 比较多。设置 padding 会影响盒子的大小，需要重新计算 width 的大小。 width 可以使用宽度剩余法或高度剩余法进行布局。
3 盒子阴影
可以使用 box-shadow 属性来设置盒子的阴影。
box-shadow 属性值
box-shadow 属性值 | 描述 | 是否必需 |
|---|---|---|
h-shadow | 水平阴影的位置，允许负值 | 必需 |
v-shadow | 垂直阴影的位置，允许负值 | 必需 |
blur | 模糊距离 | 可选 |
spread | 阴影的尺寸 | 可选 |
color | 阴影的颜色 | 可选 |
inset | 将外部阴影（ outset ）改为内部阴影 | 可选 |
语法格式：
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
实例：
.im {
border: 3px solid #d093d8;
box-shadow:5px 5px 10px 8px rgba(0,0,0,0.8);
}
4 Tips
- 盒子水平居中 （块级元素） 设置
margin: 0 auto;盒子里的文字水平居中text-align: center; - 设置不同宽度的元素的时候，不要给宽度，设置
padding值。 - 插入图片和背景图片的区别：背景图片不占位置，添加新元素时从背景图片的上方显示，一般小图标和大图片用背景图片，产品图片用插入图片。
- 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效。
- 行内元素只有左右外边距，没有上下外边据。行内元素的上下内边距显示效果也不好，ie6以下不支持上下内边距。所以：尽量不要给行内元素指定上下的内外边距。
各位大佬，如果感觉本文章还不错的话，可否点个赞呀 ( ๑￣▽￣ʃ♡ƪ )
如有错误之处, 恳请留言, 定会及时改正
