盒子模型的概念
• 盒子模型用來“放”網頁中的各種元素。
• 網頁設計中內容，如文字、圖片等元素，都可是盒子（DIV嵌套）
寬度屬性
寬度 width：長度值 | 百分比 | auto
最大寬度 max-width：長度值 | 百分比 | auto
最小寬度 min-width：長度值 | 百分比 | auto
高度屬性
高度 height：長度值 | 百分比 | auto
最大高度 max- height ：長度值 | 百分比 | auto
最小高度 min- height ：長度值 | 百分比 | auto
邊框屬性
• 邊框寬度（border-width）
• 邊框顏色（border-color）
• 邊框樣式 ( border-style）
4個方向來表示（上、下、左、右）
設置元素邊框寬度 border-width : thin | medium | thick | 長度值
設置元素邊框顏色 border-color ： 顏色 | transparent
設置元素邊框樣式 border-style : 值 | none | hidden
不同方向表示：
border-[left | right | top | bottom]-width
border-[left | right | top | bottom]-color
border-[left | right | top | bottom]-style
邊框縮寫：
border : [寬度] | [樣式] | [顏色]
不同方向：
border-top : [寬度] | [樣式] | [顏色]
border-left : [寬度] | [樣式] | [顏色]
border-right : [寬度] | [樣式] | [顏色]
border-bottom ：[寬度] | [樣式] | [顏色]
| 值 | 描述 |
|---|---|
| none | 定義無邊框。默認值 |
| hidden | 與 “none” 相同。除非在表格元素中解決邊框衝突時 |
| dotted | 定義點狀邊框。在大多數瀏覽器中呈現爲實線 |
| dashed | 定義虛線。在大多數瀏覽器中呈現爲實線 |
| solid | 定義實線 |
| double | 定義雙線 |
| groove | 定義 3D 凹槽邊框 |
| ridge | 定義 3D 壟狀邊框 |
| inset | 定義 3D inset 邊框 |
| outset | 定義 3D outset 邊框 |
| inherit | 規定應該從父元素繼承邊框樣式。 |
內邊距屬性
設置元素的內容與邊框之間的距離（內邊距或填充）,分4個方向
（上、右、下、左）
– padding-top : 長度值 | 百分比
– padding-right :長度值 | 百分比
– padding-bottom :長度值 | 百分比
– padding-left :長度值 | 百分比
說明：值不能爲負值
內邊距屬性縮寫
padding : 值1； //4個方向都爲值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2
外邊距屬性
設置元素與元素之間的距離（外邊距）, 4個方向（上、右、下、左）
– margin-top : 長度值 | 百分比 | auto
– margin-right : 長度值 | 百分比 | auto
– margin-bottom : 長度值 | 百分比 | auto
– margin-left : 長度值 | 百分比 | auto
說明：值可爲負值
外邊距屬性縮寫
設置元素與元素之間的距離（外邊距）, 4個方向（上、右、下、左）
margin : 值1； //4個方向都爲值1
margin : 值1 值2 ; // 上下=值1，左右=值2
margin : 值1 值2 值3；// 上=值1，左右=值2，下=值3
margin : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2
• 默認情況下，相應HTML塊級元素存在外邊距
body、h1~h6、p……
• 聲明margin屬性，覆蓋默認樣式
• margin值爲auto , 實現水平方向居中顯示效果
• 由瀏覽器計算外邊距
• margin值爲auto , 實現水平方向居中顯示效果
• 由瀏覽器計算外邊距
標準盒子模型
• 在 CSS 中，width 和 height 指的是內容區域的寬度和高度
• 增加內邊距、邊框和外邊距不會影響內容區域的尺寸
• 但會增加元素框的總尺寸
IE盒子模型
display屬性
• inline
元素將顯示爲內聯元素，元素前後沒有換行符
• block
元素將顯示爲塊級元素 , 元素前後會帶有換行符
• inline-block
行內塊元素，元素呈現爲inline，具有block相應特性
• none
此元素不會被顯示