CSS盒模型属性
每个盒子都有：边距,边框,填充,内容四个属性，除内容外每个属性都有上,下,左,右四个部分。
CSS盒模型
CSS盒模型对应的有：margin,border,padding,content四个部分，其中margin,border,padding都有top,right,bottom,left四个属性；
width
width
<length>|<percentage>|auto|inherit
/*块元素可以设置宽度，行内元素不能设置宽度*/
200px;
50%;
height
height
height:<length>|<percentage>|auto|inherit
/*块元素可以设置高度，行内元素不能设置高度*/
height:100px;
height:60%;
padding
padding
padding:[<length>|<percentage>]{1,4}|inherit
/* padding:top right bottom left; 对面相等，后面省略*/
padding:20px;/* 等价于：padding:20px 20px 20px 20px; */
padding:20px 10px;/* 等价于：padding:20px 10px 20px 10px; */
padding:20px 10px 30px;/* 等价于：padding:20px 10px 30px 10px */
margin
margin
margin:[<length>|<percentage>|auto]{1,4}|inherit
margin:20px;/* 等价于：margin:20px 20px 20px 20px; */
margin:30px 20px 10px 0;
margin合并：当两个margin遇到一起的时候，取较大的margin值；
水平居中： margin:0 auto;
border
border
border:[<border-width>||<border-style>||<border-color>]|inherit
border-[<length>|thin|medium|thick]{1,4}|inherit
border-style:[solid|dashed|dotted|...]{1,4}|inherit
border-color:[<color>|transparent]{1,4}|inherit
border:1px dashed blue;
border-0 1px 2px 3px;
border-style:solid;
border-color:#0ff;
圆角边框
border-radius
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
border-radius:10px;
border-radius:0px 5px 10px 15px/20px 15px 10px 5px;
溢出overflow
overflow
overflow:visible|hidden|scroll|auto
overflow:hidden;
/*引申：overflow-x,overflow-y*/
box-sizing
box-sizing
box-sizing:content-box|border-box|inherit
150px;
height:150px;
padding:50px;
border:5px solid blue;
box-sizing:content-box;/*设置了width和height作用的位置*/
盒子阴影
box-shadow
box-shadow:none|<shadow>[,<shadow>]*
<shadow>:inset?&&<length>{2,4}&&<color>?
box-shadow:4px 6px 3px 3px red;/*box-shadow：水平偏移 垂直偏移 模糊半径 阴影大小 颜色*/
/*阴影不占空间*/
box-shadow:3px 3px 5px 2px;/*外阴影，默认颜色为border颜色*/
box-shadow:inset 0px 0px 5px red;/*内阴影，这个里面没有阴影大小值*/
box-shadow:3px 3px 5px 2px,inset 0px 0px 5px red;/*多阴影*/
轮廓
outline
outline:[<outline-width>||<outline-style>||<outline-color>]|inherit
outline-<length>|thin|medium|thick|inherit
outline-style:solid|dashed|dotted|...|inherit
outline-color:<color>|invert|inherit
outline:5px dashed blue;/*outline不占空间，在border之外*/