2、Padding属性包含了paddingleft：左补距离(设置距左内边距)。paddingtop：头顶补距离(设置距顶部内边距)。paddingright：右补距离(设置距右内边距)。paddingbottom：底补距离(设置距低内边距)。其二维构建图可见CSS属性二维图。
3、paddingleft用法：padding-left：10px。这个意思距离左边补距10像素，可跟百分比如(padding-left：10%。距离左边补10%的距离)。
4、paddingright用法：padding-right：10px。这个意思距离右边补距10像素，可跟百分比如(padding-right：10%。距离右边补10%的距离)。
5、paddingtop用法：padding-top：10px。这个意思距离顶边补距10像素，可跟百分比如(padding-top：10%。距离顶边补10%的距离)。
6、paddingbottom用法：padding-bottom：10px。这个意思距离低边补距10像素，可跟百分比如(padding-bottom：10%。距离底边补10%的距离)。
标准CSS盒模型规定width和height样式属于给定内容区域的尺寸，并且不包含boder和padding,可以称此盒子为“内容盒模型＂。在老版的IE里和新版的CSS中都有一些例外，再IE6之前和IE6~8“怪异模式”下显示一个页面时（页面中缺少 ＜IDOCTYPE>或有一个不够严格的 doctype 时），width和height属性确是包含boder和padding的。
IE的为是一个bug,但是IE的非标准盒模型通常也很有用。所以CSS3引进了 box-sizing 属性，默认值是 content-box ,它指定了上面描述的标准的盒模型。如果替换为 box-sizing:border-box ,浏览器将会为那个元素应用IE的盒模型，即width和height属性将包括border和padding,当想以百分比形式为元素是指总体尺寸，又想以像素单位指定border和padding时，边框盒模型特别有用
box-sizing 属性再当今所有浏览器中都支持，但是还没有不带前缀通用的实现。再Chrome和Safari中，使用 -webkit-box-sizing .在Firefox中，使用 -moz-box-sizing .在Opera和IE8及其更高的版本中，可以使用不带前缀的 box-sizing .
边框盒模型在未来CSS3中的一个可选方案是使用盒子尺寸计算值；
在IE9中支持使用 cale() 计算CSS的值，在Firefox为 -moz-cale()
最近写一个四周加阴影的项目用到了box-shadow属性，感觉项目里面好多地方都会用到这个属性，于是就专门整理了一下。
语法：
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
为了更清楚的了解box-shadow，做几个demo来给大家演示一下效果：
h-shadow代表的是阴影的水平位置偏移量，可以是正负值
即在x轴的阴影位置，正值阴影出现在右边，负值阴影出现在左边
v-shadow代表垂直阴影位置，即在y轴的阴影位置，可以是正负值
当v-shadow的正值时阴影出现在下面，当v-shadow的负值时阴影出现在上面
blur阴影的模糊距离，这使得阴影部分的过渡看起来更加柔和
spread代表阴影的大小，也是最后一个长度值代表阴影的尺寸。到这里大家心中是不是对blur和spread 产生疑问，其实blur是用于描述模糊半径，它的取值决定了阴影的模糊程度；而spread表示阴影所占区域的大小。
color阴影的颜色值，可以用任何颜色单位的来表示。当我们没有设置颜色值，默认是黑色
默认情况下，设置的阴影都是外部阴影，inset的作用是将外部阴影转换成内部阴影
附：
属性定义及使用说明：
box-shadow属性可以设置一个或多个下拉阴影的框。
兼容性：
