扩展（盒子圆角、阴影等）

盒子模型布局的优先度

优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。

  width >  padding  >   margin

原因：

• margin 会有外边距合并（塌陷）的问题，还有 ie6 下面margin加倍的bug，所以最后使用。
• padding 会影响盒子大小，需要进行加减计算，比较麻烦，其次使用。
• width 问题较少，经常使用宽度剩余法、高度剩余法来做。

去掉列表默认的样式

无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看。下面这段代码可以去掉列表默认的样式：

li { list-style: none; }

CSS3 圆角边框

1. 语法：

 border-radius:length;

length 可以为数值或百分比的形式。

1. 让一个正方形变成圆圈 ，如下代码：

 border-radius: 50%;

1. 一个好看的圆角矩形，设置 length 为矩形宽度的一半，可以得的：

1. 可以为4个角分别设置圆度， 但是是有书写顺序

   border-top-left-radius:20px;
   border-top-right-radius:20px;
   border-bottom-right-radius:20px;
   border-bottom-left-radius:20px;
   

   综合写法：

   border-radius: 左上角 右上角  右下角  左下角;
   

   CSS3 盒子阴影

2. 语法

box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；

1. 小米官网盒子的阴影：

   div {
            width: 200px;
            height: 200px;    
            box-shadow: 0 15px 30px  rgba(0, 0, 0, .1);
   }