开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？
答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。
但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
width > padding > margin原因：
margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、box-sizing: border-box 盒子大小为 width
2、box-sizing: content-box 盒子大小为 width + padding + border
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3盒子模型</title> <style> div:first-child { width: 200px; height: 200px; background-color: pink; box-sizing: content-box; /* 就是以前的盒模型 w3C*/ padding: 10px; border: 15px solid red; /* 盒子大小为 width + padding + border */ } div:nth-child(2) { width: 200px; height: 200px; background-color: purple; box-sizing: border-box; /*padding border 不撑开盒子*/ padding: 10px; border: 15px solid skyblue; margin: 10px; } </style> </head> <body> <div>content-box</div> <div>border-box</div> </body> </html>语法格式
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> h1 { font-size: 100px; text-shadow: 5px 3px 3px rgba(0,0,0,0.5);/* 水平距离 垂直距离 模糊 阴影颜色 */ } div { width: 200px; height: 200px; border: 1px solid #F00; /* 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影 */ box-shadow: 0px 15px 30px rgba(0,0,0,0.4) ; /* 小米商品的效果 */ } </style> </head> <body> <h1>逆天了</h1> <div></div> </body> </html>