這章我們討論CSS里面比較重要的一個概念：盒模型 顧名思義 我們可以把CSS中每一個元素都想象成一個盒子 盒子里包含他的相關內容。瀏覽器就好像一個大的盒子 裝著這些小盒子。每一個盒子都有他特定的屬性。下面讓我們以一個示例圖開始今天要分享的內容。
讓我們先從content說起
|content
盒模型概念中，由width*height決定congtent大小
1. width<length>|<percentage>|auto
需要注意的是用百分比表示時 絕大部分時候以自己的父元素為參照
一般只給塊級元素設置寬度
2. height<length>|<percentage>|auto
同width，不同的是默認高度為內容高度
|內邊距
padding[<length>|<percentage>]{1,4}
四個值的順序為 上右下左順時針方向 并遵守對面相等，后者省略。4面相等，只設1個的縮寫原則.
|外邊距
margin[<length>|<percentage>|auto]{1,4}
用法同padding
margin合并
對同一個margin設定多個值時會合并取較大值
詳見MDN合并
margin水平居中
margin:0 auto
表示為上下margin為0，auto代表瀏覽器會根據寬度大小自動設置左右距離
|邊框
border:[<border-width>||<border-style>||<border-color>]
邊框樣式
border-style:[solid|dashed|dotted]{1,4}
solid:實線
dashed:虛線
dotted:點線
邊框寬度
border-width:[<length>]{1,4}
邊框顏色
boerder-color[<color>|transparent]{1,4}
也可以用border-top/bottom/left/right:分別設置各邊框樣式
|圓角邊框
border-radius
|處理content內容超出部分
overflow:visible|hidden|scroll|auto
visible:顯示
hidden:隱藏
scroll:顯示滾動條
auto:根據內容自動顯示滾動條
|指定盒子
box-sizing:content-box|border-box
|盒子陰影
box-shadow:<shadow>[,<shadow>]*
陰影不占空間
|輪廓
outline:[<outline-width>||<outline-style>||<outline-color>]
與border的區別
- 不占空間
- 在border外
|兼容
關于CSS屬性的瀏覽器兼容性，可以通過 caniuse 查詢。
border-radius ie8及以下不支持
box-sizing ie7及以下不支持
box-shadow ie8及以下不支持
outline ie7及以下不支持
