第四章盒子模型

第四章盒子模型盒子模型的概念元素的類(lèi)型盒子相關(guān)屬性元素的轉(zhuǎn)換2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)24.1認(rèn)識(shí)盒子模型4.2盒子模型相關(guān)屬性4.3元素的類(lèi)型與轉(zhuǎn)換4.4塊元素垂直外邊距的合并4.5階段案例—制作音樂(lè)盒2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)34.1認(rèn)識(shí)盒子模型盒子模型的概念所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)44.1認(rèn)識(shí)盒子模型以手機(jī)盒子為例，更形象地認(rèn)識(shí)CSS盒子模型如果把手機(jī)想象成HTML元素，那么手機(jī)盒子就是一個(gè)CSS盒子模型，其中手機(jī)為CSS盒子模型的內(nèi)容，填充泡沫的厚度為CSS盒子模型的內(nèi)邊距，紙盒的厚度為CSS盒子模型的邊框。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)54.1認(rèn)識(shí)盒子模型多個(gè)手機(jī)盒子放在一起時(shí)，它們之間的距離就是CSS盒子模型的外邊距。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)64.1認(rèn)識(shí)盒子模型example01盒子模型的結(jié)構(gòu)P87，圖4-4網(wǎng)頁(yè)就是多個(gè)盒子嵌套排列的結(jié)果。內(nèi)邊距出現(xiàn)在內(nèi)容區(qū)域的周?chē)?，?dāng)給元素添加背景色或背景圖像時(shí)，該元素的背景色或背景圖像也將出現(xiàn)在內(nèi)邊距中。外邊距是該元素與相鄰元素之間的距離。如果給元素定義邊框?qū)傩?，邊框?qū)⒊霈F(xiàn)在內(nèi)邊距和外邊距之間。注意：雖然盒子模型擁有內(nèi)邊距、邊框、外邊距、寬和高這些基本屬性，但是并不要求每個(gè)元素都必須定義這些屬性。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)74.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩栽O(shè)置內(nèi)容樣式屬性常用屬性值

上邊框

border-top-style:樣式;

border-top-width:寬度;

border-top-color:顏色;

border-top:寬度樣式顏色;

下邊框

border-bottom-style:樣式;

border-bottom-width:寬度;

border-bottom-color:顏色;

border-bottom:寬度樣式顏色;

左邊框border-left-style:樣式;

border-left-width:寬度;

border-left-color:顏色;

border-left:寬度樣式顏色;

右邊框border-right-style:樣式;

border-right-width:寬度;

border-right-color:顏色;

border-right:寬度樣式顏色;

樣式綜合設(shè)置border-style:上邊

[右邊下邊左邊];none無(wú)（默認(rèn)）、solid單實(shí)線(xiàn)、dashed虛線(xiàn)、dotted點(diǎn)線(xiàn)、double雙實(shí)線(xiàn)寬度綜合設(shè)置border-width:上邊

[右邊下邊左邊];像素值顏色綜合設(shè)置border-color:上邊

[右邊下邊左邊];顏色值、#十六進(jìn)制、rgb(r,g,b)、rgb(r%,g%,b%)邊框綜合設(shè)置border:四邊寬度四邊樣式四邊顏色;

2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)84.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩浴O(shè)置邊框樣式（border-style）邊框樣式用于定義頁(yè)面中邊框的風(fēng)格，常用屬性值如下：none：沒(méi)有邊框即忽略所有邊框的寬度（默認(rèn)值）solid：邊框?yàn)閱螌?shí)線(xiàn)dashed：邊框?yàn)樘摼€(xiàn)dotted：邊框?yàn)辄c(diǎn)線(xiàn)double：邊框?yàn)殡p實(shí)線(xiàn)2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)94.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩浴O(shè)置邊框樣式（border-style）既可以對(duì)盒子的單邊進(jìn)行設(shè)置，也可以綜合設(shè)置四條邊的樣式：border-top-style:上邊框樣式border-right-style:右邊框樣式border-bottom-style:下邊框樣式border-left-style:左邊框樣式border-style:上邊框樣式

右邊框樣式

下邊框樣式

左邊框樣式border-style:上邊框樣式

左右邊框樣式

下邊框樣式border-style:上下邊框樣式

左右邊框樣式border-style:上下左右邊框樣式使用border-style屬性綜合設(shè)置四邊樣式時(shí)，必須按上右下左的順時(shí)針順序。省略時(shí)采用值復(fù)制的原則，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)104.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩浴O(shè)置邊框樣式（border-style）<p>只有上邊為虛線(xiàn)dashed，其他三邊為單實(shí)線(xiàn)solid，可以使用border-style綜合屬性分別設(shè)置各邊樣式：p{border-style:dashedsolidsolidsolid;}p{border-style:solid;}/*綜合設(shè)置四邊樣式*/p{border-top-style:dashed;}/*上邊樣式覆蓋*/或綜合設(shè)置四條邊，然后采用上邊覆蓋：example022023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)114.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩浴O(shè)置邊框?qū)挾龋╞order-width）border-top-width：上邊框?qū)挾萣order-right-width：右邊框?qū)挾萣order-bottom-width：下邊框?qū)挾萣order-left-width：左邊框?qū)挾萣order-width：上邊框?qū)挾?/p>

[右邊框?qū)挾认逻吙驅(qū)挾茸筮吙驅(qū)挾萞綜合設(shè)置四邊寬度必須按上右下左的順時(shí)針順序采用值復(fù)制，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。邊框?qū)挾纫部梢葬槍?duì)四條邊分別設(shè)置，或綜合設(shè)置四條邊的寬度：自己創(chuàng)建example03:邊框?qū)挾取?px，下左右1px。邊框樣式—單實(shí)線(xiàn)。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)124.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩浴O(shè)置邊框顏色（border-color）邊框顏色的單邊與綜合設(shè)置如下：border-top-color:上邊框顏色border-right-color:右邊框顏色border-bottom-color:下邊框顏色border-left-color:左邊框顏色border-color:上邊框顏色

[右邊框顏色下邊框顏色左邊框顏色]順時(shí)針順序，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。其取值可為預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或RGB代碼rgb(r,g,b)，最常用的是十六進(jìn)制#RRGGBB。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)134.2.1邊框?qū)傩浴O(shè)置邊框顏色（border-color）設(shè)置段落的邊框樣式為實(shí)線(xiàn)，上下邊灰色，左右邊紅色，代碼如下4.2盒子模型相關(guān)屬性p{border-style:solid;/*綜合設(shè)置邊框樣式*/border-color:#CCC#FF0000;/*設(shè)置邊框顏色：兩個(gè)值為上下、左右*/}h2{ border-style:solid;/*綜合設(shè)置邊框樣式*/ border-bottom-color:red;/*單獨(dú)設(shè)置下邊框顏色*/}設(shè)置二級(jí)標(biāo)題的邊框樣式為實(shí)線(xiàn)，且下邊框?yàn)榧t色，其余邊框采用默認(rèn)文本的顏色，代碼如下：2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)144.2.1邊框?qū)傩浴O(shè)置邊框顏色（border-color）注意：設(shè)置邊框顏色時(shí)同樣必須設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則其他的邊框?qū)傩詿o(wú)效。4.2盒子模型相關(guān)屬性2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)154.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩浴C合設(shè)置邊框border-top:上邊框?qū)挾葮邮?/p>

顏色border-right:右邊框?qū)挾葮邮?/p>

顏色border-bottom:下邊框?qū)挾葮邮?/p>

顏色border-left:左邊框?qū)挾葮邮?/p>

顏色border:四邊寬度樣式

顏色該設(shè)置方式中，寬度、樣式、顏色順序任意，不分先后，可以只指定需要設(shè)置的屬性，省略的部分將取默認(rèn)值（樣式不能省略）。CSS提供了更簡(jiǎn)單的邊框設(shè)置方式：2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)164.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩浴C合設(shè)置邊框像border、border-top等這樣，能夠一個(gè)屬性定義元素的多種樣式在CSS中稱(chēng)之為復(fù)合屬性。常用的復(fù)合屬性有font、border、margin、padding和background等。復(fù)合屬性可以簡(jiǎn)化代碼，提高頁(yè)面的運(yùn)行速度，但是如果只有一項(xiàng)值，最好不要應(yīng)用復(fù)合屬性，以免樣式不被兼容。example042023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)174.2盒子模型相關(guān)屬性4.2.2內(nèi)邊距屬性padding-top:上內(nèi)邊距padding-right:右內(nèi)邊距padding-bottom:下內(nèi)邊距padding-left:左內(nèi)邊距padding:上內(nèi)邊距[右內(nèi)邊距

下內(nèi)邊距

左內(nèi)邊距]padding相關(guān)屬性的取值可為auto自動(dòng)（默認(rèn)值）、不同單位的數(shù)值、相對(duì)于父元素（或?yàn)g覽器）寬度的百分比%，實(shí)際工作中最常用的是像素值px，不允許使用負(fù)值。padding取1~4個(gè)值的情況與border相同example05padding屬性用于設(shè)置內(nèi)邊距，也是復(fù)合屬性，相關(guān)設(shè)置如下：2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)184.2盒子模型相關(guān)屬性4.2.3外邊距屬性margin-top:上外邊距margin-right:右外邊距margin-bottom:下外邊距margin-left:上外邊距margin:上外邊距

[右外邊距

下外邊距

左外邊距]margin相關(guān)屬性的值，以及復(fù)合屬性margin取1~4個(gè)值的情況與padding相同。外邊距可以使用負(fù)值，使相鄰元素重疊。margin屬性用于設(shè)置外邊距，也是復(fù)合屬性，相關(guān)設(shè)置如下：2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)194.2.3外邊距屬性對(duì)塊元素應(yīng)用寬度屬性width，并將左右的外邊距都設(shè)置為auto，可使塊級(jí)元素水平居中，實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁(yè)布局，示例代碼如下：為了更方便地控制網(wǎng)頁(yè)中的元素，制作網(wǎng)頁(yè)時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：example064.2盒子模型相關(guān)屬性.header{width:960px;margin:0auto;}*{ padding:0;/*清除內(nèi)邊距*/ margin:0;/*清除外邊距*/}2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)204.2盒子模型相關(guān)屬性4.2.3外邊距屬性使用margin定義塊元素的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。注意：2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)211、設(shè)置背景顏色background-color屬性值可使用預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或RGB代碼rgb(r,g,b)設(shè)置。background-color的默認(rèn)值為transparent，這時(shí)子元素會(huì)顯示其父元素的背景。example072、設(shè)置背景圖像通過(guò)background-image屬性實(shí)現(xiàn)背景圖像的設(shè)置。給example07加背景圖像jianbian.jpg4.2盒子模型相關(guān)屬性4.2.4背景屬性2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)224.2盒子模型相關(guān)屬性4.2.4背景屬性3、設(shè)置背景圖像平鋪默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望圖像平鋪或只沿著一個(gè)方向平鋪，可以通過(guò)background-repeat屬性來(lái)控制，該屬性的取值如下：repeat：沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x：只沿水平方向平鋪repeat-y：只沿豎直方向平鋪2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)234.2盒子模型相關(guān)屬性4.2.4背景屬性3、設(shè)置背景圖像平鋪默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望圖像平鋪或只沿著一個(gè)方向平鋪，可以通過(guò)background-repeat屬性來(lái)控制，該屬性的取值如下：repeat：沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x：只沿水平方向平鋪repeat-y：只沿豎直方向平鋪round會(huì)讓background-image自動(dòng)縮放直到適應(yīng)且填充滿(mǎn)整個(gè)容器space會(huì)讓background-image以相同的間距平鋪且填充滿(mǎn)整個(gè)容器或某個(gè)方向2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)244.2盒子模型相關(guān)屬性repeatroundspaceexample082023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)254.2盒子模型相關(guān)屬性4.2.4背景屬性4、設(shè)置背景圖像的位置background-position屬性的值通常有兩個(gè)，中間用空格隔開(kāi)，水平和垂直方向的坐標(biāo)。background-position屬性的取值有多種，具體如下：使用不同單位的數(shù)值：直接設(shè)置圖像左上角在元素中的坐標(biāo)，例如“background-position:20px20px;”使用預(yù)定義的關(guān)鍵字：指定背景圖像在元素中的對(duì)齊方式水平方向：leftcenterright垂直方向：topcenterbottom2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)264.2盒子模型相關(guān)屬性4.2.4背景屬性4、設(shè)置背景圖像的位置使用百分比：按背景圖像和元素的指定點(diǎn)對(duì)齊0%0%圖像左上角與元素左上角對(duì)齊20%30%圖像20%30%的點(diǎn)與元素20%30%的點(diǎn)對(duì)齊100%100%圖像右下角與元素右下角對(duì)齊只有一個(gè)百分?jǐn)?shù)時(shí)，將作為水平值，垂直值默認(rèn)為50%2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)274.2盒子模型相關(guān)屬性4.2.4背景屬性5、設(shè)置背景圖像固定用background-attachment屬性來(lái)設(shè)置背景圖像固定，其屬性值如下：scroll：圖像隨頁(yè)面元素一起滾動(dòng)（默認(rèn)值）fixed：圖像固定在屏幕上，不隨頁(yè)面元素滾動(dòng)2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)284.2盒子模型相關(guān)屬性4.2.4背景屬性6、綜合設(shè)置元素的背景背景屬性是一個(gè)復(fù)合屬性，可以將背景相關(guān)的樣式都綜合定義在一個(gè)復(fù)合屬性background中。其語(yǔ)法格式如下：在上面的語(yǔ)法格式中，各個(gè)樣式順序任意，中間用空格隔開(kāi)，不需要的樣式可以省略。但實(shí)際工作中通常按照背景色、url("圖像")、平鋪、定位、固定的順序來(lái)書(shū)寫(xiě)。background:背景色

url("圖像")平鋪定位固定;2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)294.2盒子模型相關(guān)屬性4.2.5盒子的寬與高使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比%，實(shí)際工作中最常用的是像素值。example09大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：盒子的總寬度=width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和盒子的總高度=height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)304.2盒子模型相關(guān)屬性4.2.5盒子的寬與高注意：1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效（<img/>標(biāo)記和<input/>除外）。2、計(jì)算盒子模型的總高度時(shí)，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)314.3元素的類(lèi)型與轉(zhuǎn)換4.3.1元素的類(lèi)型HTML標(biāo)記一般分為塊標(biāo)記和行內(nèi)標(biāo)記兩種類(lèi)型，它們也稱(chēng)塊元素和行內(nèi)元素。具體如下：塊元素每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁(yè)布局和網(wǎng)頁(yè)結(jié)構(gòu)的搭建。常見(jiàn)的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標(biāo)記是最典型的塊元素。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)324.3元素的類(lèi)型與轉(zhuǎn)換4.3.1元素的類(lèi)型行內(nèi)元素行內(nèi)元素不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來(lái)支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對(duì)齊等屬性，常用于控制頁(yè)面中文本的樣式。常見(jiàn)的行內(nèi)元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>標(biāo)記最典型的行內(nèi)元素。example102023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)334.3元素的類(lèi)型與轉(zhuǎn)換4.3.1元素的類(lèi)型在行內(nèi)元素中有幾個(gè)特殊的標(biāo)記——<img/>、<input/>、<td>，可以對(duì)它們?cè)O(shè)置寬高和對(duì)齊屬性，有些資料可能會(huì)稱(chēng)它們?yōu)樾袃?nèi)塊元素。注意：2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)344.3元素的類(lèi)型與轉(zhuǎn)換4.3.2<div>與<span>標(biāo)記1、<div>標(biāo)記<div>標(biāo)記將網(wǎng)頁(yè)分割為獨(dú)立的、不同的部分，以實(shí)現(xiàn)網(wǎng)頁(yè)的規(guī)劃和布局。<div>與</div>之間相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁(yè)元素。<div>標(biāo)記通過(guò)與id、class等屬性配合，然后使用CSS設(shè)置樣式，可以替代大多數(shù)的塊級(jí)文本標(biāo)記。example112023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)354.3元素的類(lèi)型與轉(zhuǎn)換4.3.2<div>與<span>標(biāo)記注意：1、<div>標(biāo)記最大的意義在于和浮動(dòng)屬性float配合，實(shí)現(xiàn)網(wǎng)頁(yè)的布局，這就是常說(shuō)的DIV+CSS網(wǎng)頁(yè)布局。2、<div>可以替代塊級(jí)元素如<h>、<p>等，但是他們?cè)谡Z(yǔ)義上有一定的區(qū)別。例如<div>和<h2>的不同在于，<h2>具有特殊的含義，語(yǔ)義較重，代表著標(biāo)題，而<div>是一個(gè)通用的塊級(jí)元素，主要用于布局。2023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)364.3元素的類(lèi)型與轉(zhuǎn)換4.3.2<div>與<span>標(biāo)記2、<span>標(biāo)記<span>標(biāo)記是行內(nèi)元素，<span>與</span>之間只能包含文本和各種行內(nèi)標(biāo)記，如加粗標(biāo)記<strong>、傾斜標(biāo)記<em>等，<span>中還可以嵌套多層<span>。<span>標(biāo)記常用于定義網(wǎng)頁(yè)中某些特殊顯示的文本，配合class屬性使用。example122023/5/3計(jì)算機(jī)學(xué)院web基礎(chǔ)374.3元素的類(lèi)型與轉(zhuǎn)換4.3.3元素的轉(zhuǎn)換使用display屬性對(duì)塊元素和行內(nèi)元素進(jìn)行轉(zhuǎn)換。其屬性值及含義如下：inline：此元素顯示為行內(nèi)元素（行內(nèi)元素默認(rèn)display屬性值）block：此元素顯示為塊