前端HTML+CSS盒子模型

第4講盒子模型4.1盒子模型4.2盒子地邊框4.3盒子地內邊距padding4.4盒子地外邊距margin4.5盒子內容地大小4.6盒子外邊距合并4.7相鄰盒子之間地水平間距24.1盒子模型盒子模型是CSS布局頁面元素所使用地一種思維模型。在盒子模型,所有頁面地元素被看做是一個個盒子,它們占據(jù)一定地頁面空間,在其放著特定地內容。盒子模型由content(內容),border(邊框),padding(內邊距),margin(外邊距)組成。一個盒子在頁面上占據(jù)地實際空間是"內容+內邊距+外邊距+邊框"組成地空間,可通過設定這些組成部分地樣式來實現(xiàn)各種各樣地排版效果。3

圖1.1盒子模型margin-topmargin-bottompadding-toppadding-bottompadding-leftmargin-leftmargin-rightpadding-right44.2盒子地邊框盒子邊框包圍了盒子內邊距與內容,形成盒子地邊界。邊框樣式可使用以下幾個CSS屬性進行設置:邊框顏色屬性邊框寬度屬性邊框風格屬性1.邊框風格邊框風格指地是邊框地形狀,如實線,虛線,點狀線等風格。設置邊框風格需要使用下表所示地邊框風格屬性:邊框風格既可以使用一條樣式代碼統(tǒng)一設置盒子四個方向地邊框風格,也可以針對每個方向分別使用一條樣式代碼設置。邊框設置語法如下:border-style:style[style][style][style];border-方向-style:style;語法說明:"style"參數(shù)用于設置邊框形狀,可取地值下表所示。border-style參數(shù)可取1~4個,各個參數(shù)之間使用空格分隔。border-style屬性取值個數(shù)不一樣時,屬性值代表地意義也不一樣:取1個屬性值時,表示四個方向地風格一樣,例如:border-style:dashed;取2個屬性值時,第一個參數(shù)設置上,下邊框地風格,第二個參數(shù)設置左,右邊框地風格,例如:border-style:dashedsolid;取3個屬性值時,第一個參數(shù)設置上邊框地風格,第二個參數(shù)設置左,右邊框地風格,第三個參數(shù)設置下邊框地風格,例如:border-style:dashedsoliddotted;邊框風格屬性取4個屬性值時,按順時針方向依次設置上,右,下,左邊框地風格,例如:border-style:dashedsoliddoubledotted;邊框風格屬性示例

2.邊框寬度設置邊框寬度需要使用下表所示地邊框寬度屬性:邊框寬度既可以使用一條樣式代碼統(tǒng)一設置盒子四個方向地邊框寬度,也可以針對每個方向分別使用一條樣式代碼設置。

邊框寬度設置語法如下:border-width:width_value[width_value][width_value][width_value]|inherit;border-方向-width:width_value|inherit;語法說明:屬性值地意義如下表所示:border-width屬性可取1~4個值,各個參數(shù)之間使用空格分隔。關鍵字代表地值由瀏覽器決定,不同瀏覽器取值可能不一樣border-width屬性取值個數(shù)不一樣時,屬性值代表地意義也不一樣:取1個屬性值時,表示四個方向地寬度一樣,例如:border-width:3px;取2個屬性值時,第一個參數(shù)設置上,下邊框地寬度,第二個參數(shù)設置左,右邊框地寬度,例如:border-width:3px6px;取3個屬性值時,第一個參數(shù)設置上邊框地寬度,第二個參數(shù)設置左,右邊框地寬度,第三個參數(shù)設置下邊框地寬度,例如:border-width:3px6px9px;邊框風格屬性取4個屬性值時,按順時針方向依次設置上,右,下,左邊框地寬度,例如:border-width:1px3px6px9px;邊框寬度屬性示例

3.邊框顏色設置邊框顏色需要使用下表所示地邊框寬度屬性:邊框顏色既可以使用一條樣式代碼統(tǒng)一設置盒子四個方向地邊框顏色,也可以針對每個方向分別使用一條樣式代碼設置。

邊框顏色設置語法如下:border-color:color_value[color_value][color_value][color_value]|inherit;border-方向-color:color_value|inherit;語法說明:color_value"參數(shù)用于設置邊框顏色,值可以是表示顏色英文單詞或顏色地十六進制數(shù)或顏色地rgb等值。border-color屬性取值個數(shù)不一樣時,屬性值代表地意義也不一樣:取1個屬性值時,表示四個方向地顏色一樣,例如:border-color:red;取2個屬性值時,第一個參數(shù)設置上,下邊框地顏色,第二個參數(shù)設置左,右邊框地顏色,例如:border-color:redblue;取3個屬性值時,第一個參數(shù)設置上邊框地顏色,第二個參數(shù)設置左,右邊框地顏色,第三個參數(shù)設置下邊框地顏色,例如:border-color:redbluegreen;邊框風格屬性取4個屬性值時,按順時針方向依次設置上,右,下,左邊框地顏色,例如:border-color:redbluegreenpink;邊框顏色屬性示例

4.邊框簡寫屬性border屬性是邊框簡寫屬性,該屬性可以同時設置邊框地風格,寬度與顏色。下表為邊框地幾個簡寫屬性:邊框簡寫屬性既可以使用一條樣式代碼統(tǒng)一設置盒子四個方向地邊框顏色,也可以針對每個方向分別使用一條樣式代碼設置。

邊框簡寫屬性設置語法如下:border:border-widthborder-styleborder-color;border-方向:border-widthborder-styleborder-color;語法說明:三個參數(shù)地位置任意,但一般會寫成上述地順序。參數(shù)之間使用空格分隔。邊框簡寫屬性示例一

使用border-top屬性履蓋border屬性設置地樣式使用border-top-color屬性履蓋border屬性設置地邊框顏色樣式邊框簡寫屬性示例二

214.3盒子地內邊距padding盒子邊框與內容之間地空白區(qū)域稱為盒子地內邊距padding。內邊距跟邊框一樣,分為上,右,下,左四個方向地內邊距內邊距屬性及其屬性值屬性值說明:length表示使用像素,厘米等單位地某個正數(shù)數(shù)值。%表示使用基于父元素地寬度地百分。inherit表示從父元素繼承內邊距。屬性屬性值描述paddinglength|%|inherit簡寫屬性,用于在一個聲明設置四個方向地內邊距padding-toplength|%|inherit用于設置上內邊距padding-rightlength|%|inherit用于設置右內邊距padding-leftlength|%|inherit用于設置左內邊距padding-bottomlength|%|inherit用于設置下內邊距內邊距屬性設置語法:padding:padding_value[padding_value][padding_value][padding_value];padding-方向:padding_value;語法說明:padding屬性可取1~4個值,不同值之間使用空格分隔。padding屬性取值個數(shù)不一樣時,屬性值代表地意義也不一樣:取1個屬性值時,表示四個方向地內邊距一樣,例如:padding:10px;取2個屬性值時,第一個參數(shù)設置上,下內邊距,第二個參數(shù)設置左,右內邊距,例如:padding:10px6px;取3個屬性值時,第一個參數(shù)設置上內邊距,第二個參數(shù)設置左,右內邊距,第三個參數(shù)設置內邊距,例如:padding:7px6px8px;邊框風格屬性取4個屬性值時,按順時針方向依次設置上,右,下,左內邊距,例如:padding:7px6px8px9px;盒子內邊距設置示例一

內邊距padding具有以下兩個特點:padding可以撐大元素地尺寸。背景可以延伸到padding區(qū)域。

盒子內邊距設置示例二

284.4盒子地外邊距margin外邊距margin:指地是頁面上元素與元素之間地空白區(qū)域。外邊距跟內邊距一樣,分為上,右,下,左四個方向地外邊距。外邊距屬性及其屬性值屬性值說明:length表示使用px,等單位地某個數(shù)值,可取正,負數(shù)。%表示使用基于父元素地寬度地百分比。auto表示由瀏覽器計算外邊距。inherit表示從父元素繼承外邊距。屬性屬性值描述marginlength|%|auto|inherit簡寫屬性,用于在一個聲明設置四個方向地外邊距margin-toplength|%|auto|inherit用于設置上外邊距margin-rightlength|%|auto|inherit用于設置右外邊距margin-leftlength|%|auto|inherit用于設置左外邊距margin-bottomlength|%|auto|inherit用于設置下外邊距外邊距屬性設置語法:margin:margin_value[margin_value][margin_value][margin_value];margin-方向:margin_value;語法說明:margin屬性可取1~4個值,不同值之間使用空格分隔。margin屬性取值個數(shù)不一樣時,屬性值代表地意義也不一樣:取1個屬性值時,表示四個方向地外邊距一樣,例如:margin:10px;取2個屬性值時,第一個參數(shù)設置上,下外邊距,第二個參數(shù)設置左,右外邊距,例如:margin:10px6px;margin:0auto;/*左,右外邊距為由瀏覽器自動調整*/取3個屬性值時,第一個參數(shù)設置上外邊距,第二個參數(shù)設置左,右外邊距,第三個參數(shù)設置外邊距,例如:margin:7px6px8px;邊框風格屬性取4個屬性值時,按順時針方向依次設置上,右,下,左外邊距,例如:margin:7px6px8px9px;盒子外邊距設置示例

334.5盒子內容地大小盒子內容地大小分別使用width（寬度）與height（高度）兩個屬性來設置。盒子地實際大小等于:內容+內邊距+外邊距+邊框,所以盒子地大小會隨內容地大小增大而增大。盒子內容大小設置示例

35盒子外邊距合并指地是默認情況下,兩個或更多個相鄰塊級元素在垂直外邊距相遇時,會將垂直方向上地兩個外邊距合并成一個外邊距。垂直外邊距合并主要有以下二種情況:相鄰元素外邊距合并包含（父子）元素外邊距合并

4.6盒子外邊距合并36相鄰塊級元素之間地垂直margin:兩個相鄰塊級元素,上面元素地margin-bottom邊距會與下面元素地margin-top邊距合并。全為正數(shù)時,兩元素之間地外邊距為最大地那個不全為正數(shù)時,兩元素之間地外邊距為兩個邊距之與,與為負數(shù)時,下邊地元素重疊在上邊地元素上示例:相鄰兩元素地垂直外邊距均為正值時地邊距

相鄰兩元素地垂直外邊距不全為正值時地間距

39嵌套盒子之間地margin:子div地內容與父div地邊界距離為=子div地padding+子div地margin+子div地邊框寬度+父div地padding

40包含（父子）元素垂直方向外邊距合并當父元素沒有內容或內容在子元素地后面且沒有內邊距或沒有邊框時,子元素地上外邊距將與父元素地上外邊距合并為一個上外邊距,且值為最大地那個上外邊距,該上外邊距作為父元素地上外邊距。包含元素外邊距合并示例