前端HTML+CSS盒子模型

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

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

2.邊框?qū)挾仍O(shè)置邊框?qū)挾刃枰褂孟卤硭镜剡吙驅(qū)挾葘傩?邊框?qū)挾燃瓤梢允褂靡粭l樣式代碼統(tǒng)一設(shè)置盒子四個(gè)方向地邊框?qū)挾?也可以針對(duì)每個(gè)方向分別使用一條樣式代碼設(shè)置。

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

3.邊框顏色設(shè)置邊框顏色需要使用下表所示地邊框?qū)挾葘傩?邊框顏色既可以使用一條樣式代碼統(tǒng)一設(shè)置盒子四個(gè)方向地邊框顏色,也可以針對(duì)每個(gè)方向分別使用一條樣式代碼設(shè)置。

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

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

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

使用border-top屬性履蓋border屬性設(shè)置地樣式使用border-top-color屬性履蓋border屬性設(shè)置地邊框顏色樣式邊框簡(jiǎn)寫屬性示例二

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

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

盒子內(nèi)邊距設(shè)置示例二

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

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

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

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

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

39嵌套盒子之間地margin:子div地內(nèi)容與父div地邊界距離為=子div地padding+子div地margin+子div地邊框?qū)挾?父div地padding

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