HTML5+CSS3

2021.6HTML5andCSS3第7章

盒子模型（上）“盒子”與“模型”的概念探究邊框（border）設(shè)置邊框樣式（border-style）DEMO屬性值的簡(jiǎn)寫形式DEMO設(shè)置內(nèi)邊距（padding）DEMO設(shè)置外邊距（margin）DEMO盒子之間的關(guān)系DEMO第7章

盒子模型（上）

第7章

盒子模型（上）“盒子”與“模型”的概念探究在學(xué)習(xí)盒子模型之前，先來看一個(gè)例子。假設(shè)在墻上整齊地排列著4幅畫，如圖所示。對(duì)于每幅畫來說，都有一個(gè)“邊框”，在英文中稱為“border”；每個(gè)畫框中，畫和邊框通常都會(huì)有一定的距離，這個(gè)距離稱為“內(nèi)邊距”，在英文中稱為“padding”；各幅畫之間通常也不會(huì)緊貼著，它們之間的距離稱為“外邊距”，在英文中稱為“margin”。第7章

盒子模型（上）“盒子”與“模型”的概念探究padding-border-margin模型是一個(gè)極其通用的描述矩形對(duì)象布局形式的方法。這些矩形對(duì)象可以被統(tǒng)稱為“盒子”，英文為“Box”。在CSS中，一個(gè)獨(dú)立的盒子模型由content（內(nèi)容）、border（邊框）、padding（內(nèi)邊距）和margin（外邊距）4個(gè)部分組成。第7章

盒子模型（上）“盒子”與“模型”的概念探究一個(gè)盒子實(shí)際所占有的寬度（或高度）是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成的。在CSS中可以通過設(shè)定width和height的值來控制內(nèi)容所占的矩形的大小，并且對(duì)于任何一個(gè)盒子，都可以分別設(shè)定4條邊各自的border、padding和margin。因此只要利用好這些屬性，就能夠?qū)崿F(xiàn)各種各樣的排版效果。第7章

盒子模型（上）邊框（border）邊框一般用于分隔不同元素，其外圍即為元素的最外圍，因此計(jì)算元素實(shí)際的寬和高時(shí)，就要將border納入。換句話說，border會(huì)占據(jù)空間，所以在計(jì)算精細(xì)的版面時(shí)，一定要把border的影響考慮進(jìn)去。border的屬性主要有3個(gè)，分別是color（顏色）、width（粗細(xì)）和style（樣式）。在使用CSS設(shè)置邊框的時(shí)候，可以分別使用border-color、border-width和border-style設(shè)置它們。第7章

盒子模型（上）邊框（border）border-color指定border的顏色，它的設(shè)置方法與文字的color屬性完全一樣。通常情況下設(shè)置為十六進(jìn)制的值，例如紅色為“#FF0000”。border-width用來指定border的粗細(xì)程度，可以設(shè)為thin（細(xì)）、medium（適中）、thick（粗）和<length>。其中<length>表示具體的數(shù)值，例如5px和0.1in等。width的默認(rèn)值為“medium”，一般的瀏覽器都將其解析為2px寬。這里需要重點(diǎn)講解的是border-style屬性，它可以設(shè)為none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset之一。它們依次分別表示“無”“隱藏”“點(diǎn)線”“虛線”“實(shí)線”“雙線”“凹槽”“突脊”“內(nèi)陷”和“外凸”。其中none和hidden都不顯示border，二者效果完全相同，只是運(yùn)用在表格中時(shí)，hidden可以用來解決邊框沖突的問題。第7章

盒子模型（上）設(shè)置邊框樣式（border-style）第7章

盒子模型（上）DEMO第7章

盒子模型（上）屬性值的簡(jiǎn)寫形式1.對(duì)不同的邊框設(shè)置不同的屬性值如果給出2個(gè)屬性值，那么前者表示上下邊框的屬性，后者表示左右邊框的屬性；如果給出3個(gè)屬性值，那么前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性；如果給出4個(gè)屬性值，那么依次表示上、右、下、左邊框的屬性，即順時(shí)針排序。第一行2個(gè)屬性值：上下邊框?yàn)榧t色，左右邊框?yàn)榫G色；第二行3個(gè)屬性值：上邊框?qū)挾葹?像素，左右邊框?qū)挾葹?像素，下邊框?qū)挾葹?像素；第三行4個(gè)屬性值：從上邊框開始，順時(shí)針方向，4個(gè)邊框的樣式分別為點(diǎn)線、虛線、實(shí)線和雙線。第7章

盒子模型（上）2.

在一行中同時(shí)設(shè)置邊框的寬度、顏色和樣式將border-width、border-border-color和border-style這3個(gè)屬性結(jié)合在一起，表示將4條邊框都設(shè)置為2像素的綠色虛線。3.對(duì)一條邊框設(shè)置與其他邊框不同的屬性除了左側(cè)邊框是1像素的紅色實(shí)線，其余3條邊框都是2像素的綠色虛線。4.同時(shí)制定一條邊框的一種屬性第7章

盒子模型（上）DEMO第7章

盒子模型（上）設(shè)置內(nèi)邊距（padding）設(shè)置1個(gè)屬性值時(shí)，表示上下左右4個(gè)padding均為該值；設(shè)置2個(gè)屬性值時(shí)，前者為上下padding的值，后者為左右padding的值；設(shè)置3個(gè)屬性值時(shí)，第1個(gè)為上padding的值，第2個(gè)為左右padding的值，第3個(gè)為下padding的值；設(shè)置4個(gè)屬性值時(shí)，按照順時(shí)針方向，依次為上、右、下、左padding的值第7章

盒子模型（上）DEMO第7章

盒子模型（上）設(shè)置外邊距（margin）margin指的是元素與元素之間的距離。觀察上面的下圖，可以看到邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器窗口的邊框。這是因?yàn)閎ody本身也是一個(gè)盒子，在默認(rèn)情況下，body會(huì)有一個(gè)若干像素的margin，具體數(shù)值因各個(gè)瀏覽器而不盡相同。因此在body中的其他盒子就不會(huì)緊貼著瀏覽器窗口的邊框了。第7章

盒子模型（上）設(shè)置外邊距（margin）下面再給div盒子的margin增加20像素，這時(shí)效果如圖所示?？梢钥吹絛iv的粗邊框與body的細(xì)邊框之間的20像素距離就是margin的范圍。右側(cè)的距離很大，這是因?yàn)槟壳癰ody這個(gè)盒子的寬度不是由其內(nèi)部的內(nèi)容決定的，而是由瀏覽器窗口決定的，相關(guān)的原理本章后面還會(huì)深入分析。第7章

盒子模型（上）DEMO第7章

盒子模型（上）盒子之間的關(guān)系一個(gè)網(wǎng)頁(yè)可能存在著大量的盒子，并且它們以各種關(guān)系相互影響著。CSS規(guī)范的思路是，首先確定一種標(biāo)準(zhǔn)的排版模式，這樣可以保證設(shè)置的簡(jiǎn)單化，各種網(wǎng)頁(yè)元素構(gòu)成的盒子按照這種標(biāo)準(zhǔn)的方式排列布局。這種方式就是接下來要詳細(xì)介紹的“標(biāo)準(zhǔn)流”方式。但是僅通過標(biāo)準(zhǔn)流方式，很多版式是無法實(shí)現(xiàn)的，限制了布局的靈活性，因此CSS規(guī)范中又給出了另外若干種對(duì)盒子進(jìn)行布局的手段，包括“浮動(dòng)”屬性和“定位”屬性等。這些內(nèi)容將在后面的章節(jié)中詳細(xì)介紹。第7章

盒子模型（上）盒子之間的關(guān)系HTML與DOM這里首先介紹DOM的概念。DOM是DocumentObjectModel的縮寫，即“文檔對(duì)象模型”。一個(gè)網(wǎng)頁(yè)的所有元素組織在一起，就構(gòu)成了一棵“DOM樹”。第7章

盒子模型（上）2.“家族樹”和DOM樹

第7章

盒子模型（上）3.DOM樹與盒子模型的聯(lián)系這里使用了一棵“樹”的形式把一個(gè)HTML文檔的內(nèi)容組織起來，形成了嚴(yán)格的層次結(jié)構(gòu)。左側(cè)就是這種層次結(jié)構(gòu)的樹狀表示，右側(cè)則是在瀏覽器中以嵌套的盒子的形式表示的。它們二者是相互對(duì)應(yīng)的，也就是說，任意一個(gè)HTML結(jié)構(gòu)都唯一地與一棵DOM樹對(duì)應(yīng)，而該DOM樹的節(jié)點(diǎn)如何在瀏覽器中表現(xiàn)，則需要由CSS參與確定了。第7章

盒子模型（上）標(biāo)準(zhǔn)文檔流這里又出現(xiàn)了一個(gè)新的概念——“標(biāo)準(zhǔn)文檔流”（NormalDocumentStream），或簡(jiǎn)稱“標(biāo)準(zhǔn)流”。所謂標(biāo)準(zhǔn)流，就是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時(shí)，各種元素的排列規(guī)則。以上一節(jié)的網(wǎng)頁(yè)為例，只觀察從body開始的這一部分，其內(nèi)容是body中有兩個(gè)列表（ul），每個(gè)列表中各有兩個(gè)列表項(xiàng)目（li）。一共有4層結(jié)構(gòu)，頂層為body，第2層為ul，第3層為li，第4層為li中的文本。這4種元素又可以分為以下兩類。塊級(jí)元素（blocklevel）行內(nèi)元素（inline）第7章

盒子模型（上）標(biāo)準(zhǔn)文檔流塊級(jí)元素（blocklevel）li占據(jù)著一個(gè)矩形的區(qū)域，并且和相鄰的li依次豎直排列，不會(huì)排在同一行中。ul也具有同樣的性質(zhì)，占據(jù)著一個(gè)矩形的區(qū)域，并且和相鄰的ul依次豎直排列，不會(huì)排在同一行中。因此，這類元素稱為“塊級(jí)元素”（blocklevel），即它們總是以一個(gè)塊的形式表現(xiàn)出來，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿。行內(nèi)元素（inline）對(duì)于文字這類元素，各個(gè)字母之間橫向排列，到最右端自動(dòng)折行，這就是另一種元素，稱為“行內(nèi)元素”（inline）。第7章

盒子模型（上）<div>標(biāo)記與<span>標(biāo)記為了能夠更好地理解“塊級(jí)元素”和“行內(nèi)元素”，這里重點(diǎn)介紹在CSS排版的頁(yè)面中經(jīng)常使用的<div>和<span>標(biāo)記。<div>標(biāo)記早在HTML4.0時(shí)代就已經(jīng)出現(xiàn)，但那時(shí)并不常用，直到CSS的普及，才逐漸發(fā)揮出它的優(yōu)勢(shì)。<span>標(biāo)記在HTML4.0時(shí)才被引入，它是專門針對(duì)樣式表而設(shè)計(jì)的標(biāo)記。<div>（division）簡(jiǎn)單而言是一個(gè)區(qū)塊容器標(biāo)記，即<div>與</div>之間相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、表格、圖片，乃至章節(jié)、摘要和備注等各種HTML元素?？梢园?lt;div>與</div>中的內(nèi)容視為一個(gè)獨(dú)立的對(duì)象，用于CSS的控制。聲明時(shí)只需要對(duì)<div>進(jìn)行相應(yīng)的控制，其中的各標(biāo)記元素都會(huì)隨之改變。一個(gè)ul是一個(gè)塊級(jí)元素，同樣div也是一個(gè)塊級(jí)元素，二者的不同在于ul是一個(gè)具有特殊含義的塊級(jí)元素，具有一定的邏輯語(yǔ)義，而div是一個(gè)通用的塊級(jí)元素，用它可以容納各種元素，從而方便排版。第7章

盒子模型（上）<div>標(biāo)記與<span>標(biāo)記<span>標(biāo)記與<div>標(biāo)記一樣，作為容器標(biāo)記而被廣泛應(yīng)用在HTML語(yǔ)言中。在<span>與</span>中間同樣可以容納各種HTML元素，從而形成獨(dú)立的對(duì)象。如果把“<div>”替換成“<span>”，樣式表中把“div”替換成“span”，執(zhí)行后就會(huì)發(fā)現(xiàn)效果完全一樣?？梢哉f<div>與<span>這兩個(gè)標(biāo)記起到的作用都是獨(dú)立出各個(gè)區(qū)塊，在這個(gè)意義上說二者沒有不同。<div>與<span>的區(qū)別在于，<div>是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行。而<span>僅僅是一個(gè)行內(nèi)元素（inlineelements），在它的前后不會(huì)換行。<span>沒有結(jié)構(gòu)上的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，就可以使用<span>元素。第7章

盒子模型（上）<div>標(biāo)記與<span>標(biāo)記此外，<span>標(biāo)記可以包含于<div>標(biāo)記中，成為它的子元素，而反過來則不成立，即<span>標(biāo)記不能包含<div>標(biāo)記。從div和span之間的區(qū)別和聯(lián)系，就可以更深刻地理解塊級(jí)元素和行內(nèi)元素的區(qū)別了。每個(gè)HTML標(biāo)記都預(yù)先確定了它是行內(nèi)元素還是塊級(jí)元素，例如<span>、<em>等都是行內(nèi)元素，而更多的標(biāo)記例如<div>、<p>、<ul>等等都是塊級(jí)標(biāo)記。第7章

盒子模型（上）<div>標(biāo)記與<span>標(biāo)記如果在某些特定的時(shí)候需要轉(zhuǎn)換某個(gè)元素的表現(xiàn)方式，例如使某個(gè)行內(nèi)元素表現(xiàn)為一個(gè)塊級(jí)元素的樣子，該怎么辦呢？這時(shí)就可以使用display屬性。每個(gè)HTML元素都有一個(gè)display屬性，實(shí)際上每個(gè)元素正式通過這個(gè)屬性的預(yù)設(shè)值來確定它默認(rèn)的顯示方式。display屬性最常用的3個(gè)選項(xiàng)就是inline、block和none，當(dāng)display屬性被設(shè)置為inline時(shí)，它就按照行內(nèi)元素的方式顯示，當(dāng)display屬性被設(shè)置為block時(shí)，他就按照塊級(jí)元素來顯示，而如果設(shè)置為none，這個(gè)元素就不會(huì)被顯示出來（就相當(dāng)于網(wǎng)頁(yè)中沒有這個(gè)元素）。第7章

盒子模型（上）DEMO第7章

盒子模型（上）“盒子”與“模型”的概念探究邊框（border）設(shè)置邊框樣式（border-style）DEMO屬性值的簡(jiǎn)寫形式DEMO設(shè)置內(nèi)邊距（padding）DEMO設(shè)置外邊距（margin）DEMO盒子之間的關(guān)系DEMO第7章

盒子模型（下）盒子在標(biāo)準(zhǔn)流中的定位原則DEMODEMO（盒子模型計(jì)算思考題）盒子模型相關(guān)的常用樣式屬性DEMO設(shè)置背景圖像位置（關(guān)鍵字或方位、數(shù)值和百分比）DEMO圓角（border-radius）DEMO陰影（box-shadow）DEMO漸變DEMO第7章

盒子模型（下）

第7章

盒子模型（下）盒子在標(biāo)準(zhǔn)流中的定位原則行內(nèi)元素之間的水平margin塊級(jí)元素之間的豎直margin嵌套盒子之間的marginmargin屬性可以設(shè)置為負(fù)值第7章

盒子模型（下）行內(nèi)元素之間的水平margin當(dāng)兩個(gè)行內(nèi)元素緊鄰時(shí)，它們之間的距離為第1個(gè)元素的margin-right加上第2個(gè)元素的margin-left。第7章

盒子模型（下）塊級(jí)元素之間的豎直margin兩個(gè)塊級(jí)元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者。這個(gè)現(xiàn)象稱為margin的“塌陷”（或稱為“合并”）現(xiàn)象，意思是說較小的margin塌陷（合并）到了較大的margin中。第7章

盒子模型（下）嵌套盒子之間的margin除了上面提到的行內(nèi)元素間隔和塊級(jí)元素間隔這兩種關(guān)系外，還有一種位置關(guān)系，它的margin值對(duì)CSS排版也有重要的作用，這就是父子關(guān)系。當(dāng)一個(gè)<div>塊包含在另一個(gè)<div>塊中時(shí)，便形成了典型的父子關(guān)系。其中子塊的margin將以父塊的內(nèi)容為參考。第7章

盒子模型（下）margin屬性可以設(shè)置為負(fù)值當(dāng)margin設(shè)為負(fù)數(shù)時(shí)，會(huì)使被設(shè)為負(fù)數(shù)的塊向相反的方向移動(dòng)，甚至覆蓋在另外的塊上。第7章

盒子模型（下）動(dòng)手練習(xí)-盒子模型計(jì)算思考題第7章

盒子模型（下）DEMO第7章

盒子模型（下）盒子模型相關(guān)的常用樣式屬性背景背景顏色背景圖像設(shè)置背景圖像位置圓角陰影漸變第7章

盒子模型（下）背景背景顏色元素的背景顏色使用background-color屬性來設(shè)置，屬性值為某種顏色。背景圖像設(shè)置背景圖像，使用background-image屬性實(shí)現(xiàn)。第7章

盒子模型（下）背景圖像默認(rèn)圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望平鋪，或者只希望沿著一個(gè)方向平鋪，可以使用background-repeat屬性來控制。該屬性可以設(shè)置為以下4種之一。repeat：沿水平和豎直兩個(gè)方向平鋪，這也是默認(rèn)值。no-repeat：不平鋪，即只顯示一次。repeat-x：只沿水平方向平鋪。repeat-y：只沿豎直方向平鋪。第7章

盒子模型（下）設(shè)置背景圖像位置（關(guān)鍵字或方位）當(dāng)需要設(shè)置一個(gè)背景圖像的位置時(shí)，需要用到background-position屬性。即在background-position屬性中，設(shè)置兩個(gè)值：（1）第1個(gè)值用于設(shè)定水平方向的位置，可以選擇“l(fā)eft”（左）、“center”（中）或“right”（右）之一；（2）第2個(gè)值用于設(shè)定豎直方向的位置，可以選擇“top”（上）、“center”（中）或“bottom”（下）之一。body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:rightbottom;}第7章

盒子模型（下）設(shè)置背景圖像位置（數(shù)值）也可以使用具體的數(shù)值來精確地確定背景圖像的位置body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:200px100px;}第7章

盒子模型（下）設(shè)置背景圖像位置（百分比）body{background-image:url(cup.gif);background-repeat:no-repeat;background-position:30%60%;}第7章

盒子模型（下）設(shè)置值說明X（數(shù)值）設(shè)置網(wǎng)頁(yè)的橫向位置，其單位可以是所有尺度單位Y（數(shù)值）設(shè)置網(wǎng)頁(yè)的縱向位置，其單位可以是所有尺度單位

background-position屬性的長(zhǎng)度設(shè)置值：background-position屬性的百分比設(shè)置值：設(shè)置值說明0%0%左上位置50%0%靠上居中位置100%0%右上位置0%50%靠左居中位置50%50%正中位置100%50%靠右居中位置0%100%左下位置50%100%靠下居中位置100%100%右下位置設(shè)置值說明topleft左上位置topcenter靠上居中位置topright右上位置leftcenter靠左居中位置centercenter正中位置rightcenter靠右居中位置bottomleft左下位置bottomcenter靠下居中位置bottomright右下位置background-position屬性的關(guān)鍵字設(shè)置值：第7章

盒子模型（下）DEMO第7章

盒子模型（下）圓角（border-radius）首先制作一個(gè)圓角的div，如果一個(gè)div的四個(gè)角具有相同的圓角半徑，給border-radius設(shè)置一個(gè)值即可，代碼如下第7章

盒子模型（下）圓角（border-radius）如果各個(gè)角的圓角半徑不同，可以先設(shè)置一個(gè)統(tǒng)一值，然后把特殊的角單獨(dú)設(shè)置，或者直接對(duì)4個(gè)角分別設(shè)置圓角半徑。第7章

盒子模型（下）圓角（border-radius）單獨(dú)設(shè)置某個(gè)角的圓角半徑的屬性是border-*-*-radius，例如border-top-right-radius:40px;上下方向在前，左右方向在后。如果是單獨(dú)設(shè)置各個(gè)角的圓角半徑，仍然使用border-radius屬性，規(guī)則如下：4個(gè)值:第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角。3個(gè)值:第一個(gè)值為左上角，第二個(gè)值為右上角和左下角，第三個(gè)值為右下角2個(gè)值:第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角1個(gè)值：四個(gè)圓角值相同。第7章

盒子模型（下）DE