盒子模型
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者相等披诗，只設(shè)一個(gè)
margin:[<length>|<percentage>|auto]{1,4}|inherit
margin合并：毗鄰元素的外邊距會合并，取兩者較大值立磁；父元素與其第一個(gè)/最后一個(gè)子元素的外邊距也可以合并呈队，取兩者較大值。
塊元素的top與bottom外邊距有時(shí)會合并（塌陷）為單個(gè)外邊距（合并后最大的外邊距）唱歧，這樣的現(xiàn)象稱之為外邊距合并(塌陷)掂咒。
下面三種基本情形會出現(xiàn)外邊距塌陷：
毗鄰兄弟元素
毗鄰的兄弟元素的外邊距會塌陷（當(dāng)靠后的元素清除浮動時(shí)除外）。
父元素與第一個(gè)/最后一個(gè)子元素
如果塊元素的marigin-top與它的第一個(gè)子元素的marigin-top之間沒有border迈喉、padding绍刮、inline content、clearance來分隔挨摸，或者塊元素的margin-bottom與它的最后一個(gè)子元素的margin-bottom之間沒有border孩革、padding、inline content得运、height膝蜈、min-height、max-height分隔熔掺，那么外邊距會合并(塌陷)饱搏。子元素多余的外邊距會被父元素的外邊距截?cái)唷?/p>
空塊元素
如果塊元素的marigin-top與margin-bottom之間沒有border、padding置逻、inline content推沸、height、min-height來分隔券坞，那么它的上下外邊距將會合并。
當(dāng)這些情形混合時(shí)恨锚，外邊距合并更加復(fù)雜（兩個(gè)以上外邊距）。
即使外邊距為0猴伶，這些規(guī)則仍舊生效。因此他挎，無論父元素的外邊距是否為0筝尾，第一個(gè)或者最后一個(gè)子元素的外邊距會被父元素的外邊距截?cái)?根據(jù)上面的規(guī)則)，在負(fù)外邊距的情況下雇盖，合并后的外邊距為最大正外邊距與最小負(fù)外邊距之和栖忠。
浮動及絕對定位元素外邊距不會合并贸街。
水平居中
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}]?
前面四個(gè)值表示X方向半徑，后面四個(gè)值表示Y方向上的半徑
border-radius:10px;
border-radius:
0px 5px 10px 15px/
20px 15px 10px 5px;
border-radius:50%;圓
?內(nèi)容溢出:overflow:visible|hidden|scroll|auto
引申：overflow-x,overflow-y
box-sizing:content-box|border-box|inherit
默認(rèn)情況下寬狸相、高設(shè)置的是內(nèi)容區(qū)
box-shadow:none|<shadow>[,<shadow>]*
<shadow>:inset?&&<length>{2,4}<color>?
box-shadow:4px 6px 3px 0 red;
第一個(gè)值是水平偏移
第二個(gè)值是垂直偏移
第三個(gè)值是模糊半徑
第四個(gè)值是陰影大小
color顏色默認(rèn)文字顏色
陰影不占空間
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外
關(guān)于CSS屬性的瀏覽器兼容性薛匪，可以通過caniuse?查詢。
border-radius ie8及以下不支持
box-sizing ie7及以下不支持
box-shadow ie8及以下不支持
outline ie7及以下不支持
