CSS---盒子模型

CSS盒子模型

盒子模型的概念

• 盒子模型用來存放網頁中的各類元素
• 網頁設計中內容，如文字、圖片等元素，均可是盒子（div嵌套）

形象描述：

盒子模型屬性

width屬性

寬度：

width：長度值|百分比|auto

最大寬度：

max-width：長度值|百分比|auto

最小寬度：

min-width：長度值|百分比|auto

代碼應用：

實現結果：

當最小寬度大於初始設置的寬度值時，最終展現的寬度值爲設置的最小寬度值

當最大寬度大於初始設置的寬度值時，最終展現的寬度值爲設置的初始寬度值

百分比設置是針對父元素進行百分比的設置

height屬性

高度：

height：長度值|百分比|auto

max-height：長度值|百分比|auto

min-height：長度值|百分比|auto

說明：設置塊級元素和替換元素的內容高度

代碼實現：

實現結果：

使用方式與width相同

max-height 與 min-height 在部分版本瀏覽器下不兼容

高度與寬度

替代元素應用：

應用結果：

屬性總結：

• width 和height 屬性設置是內容的高和寬
• width 和height 屬性設置對塊級元素和替換元素有效
• max 和min 有兼容性問題，IE不支持

border屬性

• border-width
• border-color
• border-style

設置邊框寬度：

border-width：thin | medium | thick | 長度值

設置邊框顏色：

border-color：顏色值|transparent

設置邊框類型：

值	類型
none	無邊框，默認值
hidden	與none相同，除非在表格元素中解決邊框衝突時
dotte	定義點狀邊框，在大多數瀏覽器中呈現爲實線
dashed	定義虛線，在大多數瀏覽器中呈現爲實線
solid	實線
double	定義雙線
groove	定義3D凹槽邊框
ridge	定義3D壟狀邊框
inset	定義3D inset邊框
outset	定義3D outset邊框
inherit	規定應該從父元素繼承邊框樣式

代碼應用：

實現結果：

邊框屬性：

4個不一樣方向來表示上下左右

表示：

border-[left | right |top | bottom]-width

border-[left | right |top | bottom]-color

border-[left | right |top | bottom]-style

padding屬性

設置元素的內容與邊框之間的距離（內邊距或填充），分四個方向

• padding-top：長度值百分比
• padding-right：長度值百分比
• padding-left：長度值百分比
• padding-bottom：長度值百分比

說明：值不能爲負值

簡單應用：

應用結果：

內邊距屬性縮寫：

順序爲順時針順序

外邊距屬性

設置元素與元素之間的距離，4個方向

• margin-top：長度值|百分比|auto
• margin-right：長度值|百分比|auto
• margin-bottom：長度值|百分比|auto
• margin-left：長度值|百分比|auto

說明：值能夠爲負

代碼應用：

外邊距屬性縮寫：

盒子模型計算

IE盒子模型

沒有doctype 聲明，各瀏覽器按照本身的方式解析盒子 有doctype聲明，按照標準盒子模型來解析

盒子模型的應用

• 塊級元素，佔一行：

<p>、<div>、<h1>~<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>
複製代碼

• 行內元素（內聯元素），一行顯示

<span>、<a>、<em>
複製代碼

塊級元素與內聯元素區別

代碼應用

顯示結果：

dispaly屬性

• inline 元素將顯示爲內聯元素，元素先後沒有換行符
• block 元素將顯示爲塊級元素，元素先後會帶有換行符
• inline-block 行內塊元素，元素呈現爲inline，具備block相應特性
• none 此元素不會被顯示

塊級元素與內聯元素的相互轉化

代碼展現：

顯示結果：

注意事項

應用

樣式繼承關係

樣式屬性	繼承
width,height	不繼承塊級元素，替換元素
padding	不繼承
margin	不繼承
border	不繼承

說明：對於樣式屬性，經過設置值爲inherit，指定從父元素繼承相對屬性值 eg：

div{padding：10px;}
div p{padding:inherit;}
複製代碼

小demo代碼：

效果展現：