盒模型

盒子模型

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及以下不支持