盒模型
盒子模型
CSS盒模型
width:<length>|<percentage>|auto|inherit
width:200px;
width:50%;参照父元素
引申：max-width,min-width
height:<length>|<percentage>|auto|inherit
引申：max-height,min-height
padding:[<length>|<percentage>]{1,4}|inherit
padding:20px;
padding:40px 30px 20px 10px;
TRBL 上右下左
padding的值缩写
padding:20px; == padding:20px 20px 20px 20px;
padding:20px 10px; == padding:20px 10px 20px 10px;
padding:20px 10px 30px; == padding:20px 10px 30px 10px;
对面相等，后者省略，4者相等，只设一个
margin:[<length>|<percentage>|auto]{1,4}|inherit
margin合并：毗邻元素的外边距会合并，取两者较大值；父元素与其第一个/最后一个子元素的外边距也可以合并，取两者较大值。
块元素的top与bottom外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为外边距合并(塌陷)。
下面三种基本情形会出现外边距塌陷：
毗邻兄弟元素
毗邻的兄弟元素的外边距会塌陷（当靠后的元素清除浮动时除外）。
父元素与第一个/最后一个子元素
如果块元素的marigin-top与它的第一个子元素的marigin-top之间没有border、padding、inline content、clearance来分隔，或者块元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有border、padding、inline content、height、min-height、max-height分隔，那么外边距会合并(塌陷)。子元素多余的外边距会被父元素的外边距截断。
空块元素
如果块元素的marigin-top与margin-bottom之间没有border、padding、inline content、height、min-height来分隔，那么它的上下外边距将会合并。
当这些情形混合时，外边距合并更加复杂（两个以上外边距）。
即使外边距为0，这些规则仍旧生效。因此，无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距截断(根据上面的规则)，在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。
浮动及绝对定位元素外边距不会合并。
水平居中
margin:0 auto;浏览器自动分配多余空间
border:[<border-width>||<border-style>||<border-color>]|inherit
border-width:[<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-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
前面四个值表示X方向半径，后面四个值表示Y方向上的半径
border-radius:10px;
border-radius:
0px 5px 10px 15px/
20px 15px 10px 5px;
border-radius:50%;圆
内容溢出:overflow:visible|hidden|scroll|auto
引申：overflow-x,overflow-y
box-sizing:content-box|border-box|inherit
默认情况下宽、高设置的是内容区
box-shadow:none|<shadow>[,<shadow>]*
<shadow>:inset?&&<length>{2,4}<color>?
box-shadow:4px 6px 3px 0 red;
第一个值是水平偏移
第二个值是垂直偏移
第三个值是模糊半径
第四个值是阴影大小
color颜色默认文字颜色
阴影不占空间
outline:[<outline-width>||<outline-style>||<outline-color>]|inherit 轮廓,描边
outline-width:<length>|thin|medium|thick|inherit
outline-style:solid|dashed|dotted|inherit
outline-color:<color>|invert|inherit
outline:5px dashed blue;
- 不占空间
- border外
关于CSS属性的浏览器兼容性，可以通过caniuse 查询。
border-radius ie8及以下不支持
box-sizing ie7及以下不支持
box-shadow ie8及以下不支持
outline ie7及以下不支持
