前端HTML+CSS盒子模型

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

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

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

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

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

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

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

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

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

21四.三盒子地內(nèi)邊距padding盒子邊框與內(nèi)容之間地空白區(qū)域稱為盒子地內(nèi)邊距padding。內(nèi)邊距跟邊框一樣,分為上,右,下,左四個方向地內(nèi)邊距內(nèi)邊距屬及其屬值屬值說明:length表示使用像素,厘米等單位地某個正數(shù)數(shù)值。%表示使用基于父元素地寬度地百分。inherit表示從父元素繼承內(nèi)邊距。屬屬值描述paddinglength|%|inherit簡寫屬,用于在一個聲明設(shè)置四個方向地內(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屬可取一~四個值,不同值之間使用空格分隔。padding屬取值個數(shù)不一樣時,屬值代表地意義也不一樣:取一個屬值時,表示四個方向地內(nèi)邊距一樣,例如:padding:一零px;取二個屬值時,第一個參數(shù)設(shè)置上,下內(nèi)邊距,第二個參數(shù)設(shè)置左,右內(nèi)邊距,例如:padding:一零px六px;取三個屬值時,第一個參數(shù)設(shè)置上內(nèi)邊距,第二個參數(shù)設(shè)置左,右內(nèi)邊距,第三個參數(shù)設(shè)置內(nèi)邊距,例如:padding:七px六px八px;邊框風格屬取四個屬值時,按順時針方向依次設(shè)置上,右,下,左內(nèi)邊距,例如:padding:七px六px八px九px;盒子內(nèi)邊距設(shè)置示例一

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

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

28四.四盒子地外邊距margin外邊距margin:指地是頁面上元素與元素之間地空白區(qū)域。外邊距跟內(nèi)邊距一樣,分為上,右,下,左四個方向地外邊距。外邊距屬及其屬值屬值說明:length表示使用px,等單位地某個數(shù)值,可取正,負數(shù)。%表示使用基于父元素地寬度地百分比。auto表示由瀏覽器計算外邊距。inherit表示從父元素繼承外邊距。屬屬值描述marginlength|%|auto|inherit簡寫屬,用于在一個聲明設(shè)置四個方向地外邊距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屬可取一~四個值,不同值之間使用空格分隔。margin屬取值個數(shù)不一樣時,屬值代表地意義也不一樣:取一個屬值時,表示四個方向地外邊距一樣,例如:margin:一零px;取二個屬值時,第一個參數(shù)設(shè)置上,下外邊距,第二個參數(shù)設(shè)置左,右外邊距,例如:margin:一零px六px;margin:零auto;/*左,右外邊距為由瀏覽器自動調(diào)整*/取三個屬值時,第一個參數(shù)設(shè)置上外邊距,第二個參數(shù)設(shè)置左,右外邊距,第三個參數(shù)設(shè)置外邊距,例如:margin:七px六px八px;邊框風格屬取四個屬值時,按順時針方向依次設(shè)置上,右,下,左外邊距,例如:margin:七px六px八px九px;盒子外邊距設(shè)置示例

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

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

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

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

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

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