CSS盒模型
盒模型参数
宽度
width：<length> | <percentage> | auto
高度
height：<length> | <percentage> | auto
内填充
padding：[ <length> | <percentage> ]{1,4}
外边距
margin：[ <length> | <percentage> ]{1,4}
- margin合并
- 相邻两个盒子下面盒子的margin-top会和上面元素的margin-bottom合并
- 父元素与第一个子元素的margin-top会合并
- 父元素与最后一个子元素的margin-bottom会合并
- 水平居中
`marging:0 auto`
边框 border
边框可以分别设置四个方向的边框
border：<line-width> || <line-style> || <color>
border-width：<line-width>{1,4}
border-style：<line-style>{1,4}
border-color：<color>{1,4}
可以单独设置一个方向的边框
border-top border-top-width border-top-style border-top-color
border-right border-right-width border-right-style border-right-color border-bottom border-bottom-width border-bottom-style border-bottom-color border-left border-left-width border-left-style border-left-color
圆角边框
可以设置8个方向的参数，css3属性，不兼容ie8以下的浏览器
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
//提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
盒子内容溢出
overflow：<overflow-style>;
<overflow-style> = visible | hidden | scroll | auto
overflow-x //x轴方向
overflow-y //y轴方向
visible： 对溢出内容不做处理，内容可能会超出容器。
hidden： 隐藏溢出容器的内容且不出现滚动条。
scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
内容区域设置
box-sizing:content-box | border-box
// 用来改变默认的 CSS 盒模型 对元素宽高的计算方式。
content-box：默认值，标准盒模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。
border-box： width 与 height 包括内边距（padding）与边框（border），不包括外边距（margin）。这是IE 怪异模式（Quirks mode）使用的 盒模型 。
ie支持ie8以上浏览器
盒子阴影
CSS3属性，盒子阴影只有修饰性效果，不占用空间
box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{2,4} && <color>?
inset:
内阴影
<length>:
第一个值：水平偏移值。可以为负值
第二个值：垂直偏移值。可以为负值
第三个值：阴影模糊值。不允许负值
第四个值：阴影大小，可以为负值
<color>:
设置阴影颜色
阴影可以设置多个值，多个叠加叠加
描述轮廓
outlines相关属性不占据布局空间，不会影响元素的尺寸；
outline：<' outline-width '> || <' outline-style '> || <' outline-color '>
语法跟border差不多
不允许类似 <' border '> 属性那样能将自身拆分为 <' border-top '> , <' border-right '> , <' border-bottom '> , <' border-left '>
