HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)-第10章-網(wǎng)頁(yè)布局

1、第1頁(yè)第10章網(wǎng)頁(yè)布局本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁(yè)本章概述好的網(wǎng)頁(yè)一定有一個(gè)好的布局，網(wǎng)頁(yè)布局是指對(duì)頁(yè)面中的標(biāo)題、導(dǎo)航欄、主要內(nèi)容、腳注、表單等各種構(gòu)成元素進(jìn)行合理地排版。使用CSS布局可以有很多方法，本章主要介紹了多列布局、盒子的浮動(dòng)與定位，以及彈性盒布局。實(shí)際開(kāi)發(fā)中，一些復(fù)雜的網(wǎng)頁(yè)可能會(huì)用到不止一種布局，通常是先整體使用一種布局設(shè)計(jì)，在局部可以使用另一種布局方式。通過(guò)本章的學(xué)習(xí)讀者應(yīng)掌握使用CSS對(duì)網(wǎng)頁(yè)進(jìn)行布局的常用方法，深入了解盒子模型的設(shè)計(jì)思想和彈性盒布局的基本原理，能夠?qū)?yè)面元素進(jìn)行合理的排版布局。第3頁(yè)本章的學(xué)習(xí)目標(biāo)掌握多列布局相關(guān)的CSS屬性的用法進(jìn)一步了解盒子模型的設(shè)

2、計(jì)思想掌握position屬性的設(shè)置幾種定位方式理解z-index屬性的作用掌握f(shuō)loat屬性的基本用法理解彈性盒布局中彈性容器和彈性子元素的關(guān)系掌握彈性盒子的常用屬性掌握彈性子元素屬性的用法第4頁(yè)主要內(nèi)容10.1 多列布局10.2 使用CSS定位與布局10.3 彈性盒布局10.4 本章小結(jié)10.5 思考和練習(xí)第5頁(yè)10.1 多列布局在CSS 3多列布局功能出現(xiàn)之前，如果想讓文本呈多列顯示，要么使用絕對(duì)定位，手動(dòng)給文本分段落，要么使用JavaScript腳本進(jìn)行控制。CSS 3中新增的多列功能是對(duì)傳統(tǒng)網(wǎng)頁(yè)中塊狀布局模式的有力擴(kuò)充。顧名思義，多列布局功能可以方便開(kāi)發(fā)人員將文本排版成多列，實(shí)現(xiàn)報(bào)紙

3、那樣的多欄效果第6頁(yè)設(shè)置列寬和列數(shù)column-width屬性用于給列定義最小寬度。默認(rèn)值為auto，表示將根據(jù)column-count屬性指定的列數(shù)自動(dòng)計(jì)算列寬。column-count屬性用于指定文本顯示的列數(shù)。在實(shí)際應(yīng)用中，通常簡(jiǎn)寫(xiě)形式columns，一起指定這兩個(gè)屬性的值。第7頁(yè)設(shè)置列間距默認(rèn)情況下，瀏覽器根據(jù)列數(shù)和列寬來(lái)計(jì)算出列間距。但在實(shí)際項(xiàng)目中，默認(rèn)列間距用得比較少，更多時(shí)候需要指定列間距。這就用到了column-gap屬性，該屬性的默認(rèn)值為normal，相當(dāng)于1em。需要注意的是，如果column-gap與column-width加起來(lái)大于總寬度，就無(wú)法顯示column-cou

4、nt指定的列數(shù)，會(huì)由瀏覽器自動(dòng)調(diào)整列數(shù)和列寬。第8頁(yè)設(shè)置列邊框由于瀏覽器寬度有限，當(dāng)列數(shù)過(guò)多時(shí)，列與列之間的間隔就會(huì)比較窄，不方便閱讀。這時(shí)可以在列與列之間設(shè)置一條邊框線，使版面看起來(lái)更清晰。column-rule用于設(shè)置列邊框，類似于border屬性，所不同的是這個(gè)列邊框不占用任何空間，因此設(shè)置column-rule不會(huì)導(dǎo)致列寬的變化。它也包含3個(gè)子屬性：column-rule-width、column-rule-style和column-rule-color，分別用來(lái)設(shè)置列之間邊框的寬度、樣式和顏色。邊框的寬度通常需要小于column-gap屬性的值，否則可能會(huì)導(dǎo)致邊框覆蓋部分文字。設(shè)置跨

5、列標(biāo)題很多時(shí)候，一篇文章需要以多欄的方式顯示內(nèi)容，但有共同的標(biāo)題，而標(biāo)題不屬于任何一列，標(biāo)題是所有內(nèi)容的標(biāo)題。因此，在排版時(shí)，需要將標(biāo)題放在頂部并跨列顯示。這可以通過(guò)跨列屬性column-span來(lái)實(shí)現(xiàn)。column-span屬性有兩個(gè)取值：默認(rèn)值none表示不跨列，all表示跨越所有列。例如，文章標(biāo)題可以設(shè)成all來(lái)跨列。第9頁(yè)統(tǒng)一列高column-fill屬性用于統(tǒng)一列高。默認(rèn)值為auto，各列的高度隨內(nèi)容自動(dòng)調(diào)整；它還有另外一個(gè)值balance，當(dāng)設(shè)置為balance時(shí)，所有列的高度都設(shè)為最高的列高。第10頁(yè)第11頁(yè)主要內(nèi)容10.1 多列布局10.2 使用CSS定位與布局10.3 彈性盒

6、布局10.4 本章小結(jié)10.5 思考和練習(xí)10.2 使用CSS定位與布局在CSS中，一共有三種常用的“定位方案”(positioning scheme)用來(lái)布局頁(yè)面中的元素：normal、float以及absolute。默認(rèn)情況下，元素使用“正常流”(normal)或“靜態(tài)流”(static flow)在頁(yè)面中進(jìn)行布局。在正常流中，頁(yè)面中的塊級(jí)元素從頂部向底部流動(dòng)(記住每個(gè)塊級(jí)元素都以獨(dú)占一個(gè)新行的形式出現(xiàn))，而行內(nèi)元素則從左向右流動(dòng)(因?yàn)樗鼈儾粫?huì)從新行開(kāi)始顯示)。第12頁(yè)第13頁(yè)position屬性position的中文含義是位置、狀態(tài)。該屬性有如下4個(gè)可能的取值： static：與正常流相

7、同，并且為默認(rèn)值。因此實(shí)際使用該屬性時(shí)，很少會(huì)指定此值。relative：盒子的位置可以相對(duì)其在正常流中的位置出現(xiàn)偏移，對(duì)象不可層疊，將根據(jù)left、right、top和bottom等屬性的值在正常流這偏移。absolute：將盒子對(duì)象從正常流中拖出，完全使用width、height、left、right、top、bottom等屬性進(jìn)行絕對(duì)定位，絕對(duì)定位的元素可以有邊界，但這些邊界不壓縮。其層疊通過(guò)z-index屬性定義。fixed：固定在屏幕的某個(gè)位置，位置通過(guò)left、top、right和bottom屬性指定，并且不隨用戶滾動(dòng)窗口而改變位置。第14頁(yè)盒子偏移屬性當(dāng)盒子的position屬性

8、的值為relative、absolute或fixed時(shí)，它們同時(shí)會(huì)使用“盒子偏移”屬性指定盒子應(yīng)如何定位，盒子偏移屬性的含義如下；top：指定元素的頂部邊緣。該屬性定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。left：指定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。bottom：對(duì)于絕對(duì)定位元素，bottom屬性設(shè)置單位高于/低于包含它的元素的底邊；對(duì)于相對(duì)定位元素，bottom屬性設(shè)置單位高于/低于其正常位置的元素的底邊。right：指定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。第15頁(yè)相對(duì)定位相對(duì)定位能夠?qū)⒑凶右?/p>

9、動(dòng)到與其在正常流中的位置相關(guān)聯(lián)的某個(gè)位置。例如，將一個(gè)盒子從其在正常流中應(yīng)該出現(xiàn)的位置下移30像素，或右移100像素。它將會(huì)根據(jù)盒子偏移屬性從其在正常流中的位置進(jìn)行轉(zhuǎn)移。當(dāng)容器的position屬性為relative時(shí)，就是對(duì)該盒子應(yīng)用相對(duì)定位，使用相對(duì)定位的盒子的top、bottom、left和right屬性的參照對(duì)象是其父容器的4條邊框，而不是瀏覽器窗口。第16頁(yè)絕對(duì)定位絕對(duì)定位是使用最廣泛的一種定位方案，它能夠精準(zhǔn)地將元素移動(dòng)到想要的位置。使用絕對(duì)定位的方法是將position屬性設(shè)置為absolute，然后可以使用盒子偏移屬性對(duì)其進(jìn)行需要的定位。需要注意的是，因?yàn)榻^對(duì)定位的盒子被從正常

10、流中取出，即使兩個(gè)垂直外邊距相遇，它們的外邊距也不會(huì)折疊。絕對(duì)定位的元素總是出現(xiàn)在相對(duì)定位元素之上，除非使用z-index屬性進(jìn)行設(shè)置。第17頁(yè)固定定位position屬性中需要了解的最后一個(gè)值是fixed。此值指定不僅元素的內(nèi)容應(yīng)完全從正常流中移除，該盒子在用戶上下滾動(dòng)頁(yè)面時(shí)也不應(yīng)該移動(dòng)。這里的固定定位是指元素的位置相對(duì)于瀏覽器窗口是固定位置。第18頁(yè)z-index屬性z-index屬性是針對(duì)網(wǎng)頁(yè)顯示中的一個(gè)特殊屬性。因?yàn)轱@示器顯示的圖案是一個(gè)二維平面，用x軸和y軸來(lái)表示位置屬性。為了表示三維立體中的層疊順序，引入了z-index屬性表示兩個(gè)元素z軸的不同，從而表示元素在疊加順序上的立體關(guān)系

11、。使用絕對(duì)和相對(duì)定位的元素經(jīng)常會(huì)與其他元素出現(xiàn)重疊。當(dāng)發(fā)生這種情況時(shí)，默認(rèn)的行為是第一個(gè)元素位于后來(lái)元素之下。這被稱作“堆疊上下文”(stacking context)。z-index屬性就用來(lái)指定重疊部分的上下層關(guān)系。z-index屬性的值是一個(gè)數(shù)字，數(shù)字的值越大就越接近元素顯示位置的頂部(例如，一個(gè)z-index值為10的元素會(huì)出現(xiàn)于z-index值為5的元素之上)。第19頁(yè)float屬性float屬性能夠?qū)⒛硞€(gè)元素從正常流中抽取出來(lái)，并將其盡可能遠(yuǎn)地放置在包含盒子的左側(cè)或右側(cè)。包含元素中的其他內(nèi)容則會(huì)圍繞關(guān)聯(lián)有float屬性的元素進(jìn)行流動(dòng)(就如文本與其他元素能夠圍繞圖片流動(dòng)一樣)。flo

12、at屬性的最初目的是實(shí)現(xiàn)圖文混排，使文本圍繞在圖像周圍，不過(guò)在CSS中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。當(dāng)為一個(gè)元素指定float屬性時(shí)，必須設(shè)置width屬性以指定盒子應(yīng)該占據(jù)的寬度。否則，它將自動(dòng)占據(jù)包含盒子100%的寬度，不會(huì)給圍繞它流動(dòng)的內(nèi)容留任何空間，從而使該元素顯示的效果如同一個(gè)普通的塊級(jí)元素。第20頁(yè)float屬性使用float屬性，除了可以建立網(wǎng)頁(yè)的橫向多列布局，還可以實(shí)現(xiàn)許多其他的網(wǎng)頁(yè)內(nèi)容的布局。該屬性的可取值有如下幾個(gè)：none：默認(rèn)值，盒子不發(fā)生浮動(dòng)，并保持在正常流中應(yīng)處于的位置。left：盒子浮動(dòng)到包含元素的左側(cè)，而包含元素的其他內(nèi)

13、容浮動(dòng)至其右側(cè)。right：盒子浮動(dòng)到包含元素的右側(cè)，而包含元素的其他內(nèi)容浮動(dòng)至其左側(cè)。inherit：從父元素繼承該屬性的值。第21頁(yè)clear屬性clear屬性定義了元素的哪邊上不允許出現(xiàn)浮動(dòng)元素。在CSS 1和CSS 2中，這是通過(guò)自動(dòng)為清除元素(即設(shè)置了clear屬性的元素)增加上外邊距實(shí)現(xiàn)的。在CSS 2.1中，會(huì)在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結(jié)果都一樣，如果聲明為左邊或右邊清除，會(huì)使元素的上外邊框邊界剛好在該邊上浮動(dòng)元素的下外邊距邊界之下。第22頁(yè)clear屬性clear屬性的可取值如下：left：具有clear屬性的元素在其左側(cè)不能有任

14、何內(nèi)容。right：有clear屬性的元素在其右側(cè)不能有任何內(nèi)容。both：clear屬性的元素在其左右兩側(cè)都不能有任何內(nèi)容。none：默認(rèn)值，允許兩側(cè)出現(xiàn)浮動(dòng)內(nèi)容。第23頁(yè)主要內(nèi)容10.1 多列布局10.2 使用CSS定位與布局10.3 彈性盒布局10.4 本章小結(jié)10.5 思考和練習(xí)第24頁(yè)10.3 彈性盒布局在實(shí)際項(xiàng)目中，網(wǎng)站的布局要比我們想象的復(fù)雜，光靠前面介紹的多欄布局和盒布局還遠(yuǎn)遠(yuǎn)不夠。本節(jié)將介紹一種CSS 3中新增的一種布局方式彈性盒布局。CSS 3彈性盒(Flexible Box或flexbox)是一整套布局規(guī)范，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)

15、的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。第25頁(yè)定義彈性容器彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。彈性容器通過(guò)設(shè)置display屬性的值為flex將其定義為彈性容器。彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個(gè)容器只有一行。第26頁(yè)彈性盒子屬性彈性盒布局包含多個(gè)CSS屬性，包括彈性盒子屬性和彈性子元素屬性兩類，第27頁(yè)flex-direct

16、ion屬性flex-direction屬性規(guī)定靈活項(xiàng)目的方向。如果元素不是彈性盒對(duì)象的元素，則 flex-direction屬性不起作用。row：默認(rèn)值。元素將水平顯示，正如一個(gè)行一樣。row-reverse：與row相同，但是以相反的順序顯示。column：元素將垂直顯示，正如一個(gè)列一樣。column-reverse：與column相同，但從后往前排，最后一項(xiàng)排在最上面。第28頁(yè)flex-wrap屬性flex-wrap屬性規(guī)定flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向。該屬性的可取值如下：nowrap：默認(rèn)值，彈性容器為單行，彈性子項(xiàng)可能會(huì)溢出容器，如圖10-17所示。w

17、rap：彈性容器為多行。彈性子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行。wrap-reverse：與wrap類似，但是順序相反。第29頁(yè)flex-flow 屬性flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap。第30頁(yè)align-items屬性align-items屬性定義flex子元素在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對(duì)齊方式。align-items屬性的可取值如下：stretch：默認(rèn)值。子元素被拉伸以適應(yīng)容器。center：子元素位于容器的中心。flex-start：子元素位于容器的開(kāi)頭。flex-e

18、nd：子元素位于容器的結(jié)尾。baseline：子元素位于容器的基線上。第31頁(yè)justify-conten屬性justify-conten屬性用于設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對(duì)齊方式。justify-conten屬性的可取值如下：flex-start：默認(rèn)值，彈性子元素向行頭緊挨著填充。第一個(gè)彈性子元素的main-start外邊距邊線被放置在該行的main-start邊線，后續(xù)彈性項(xiàng)依次平齊擺放。flex-end：彈性子元素向行尾緊挨著填充。第一個(gè)彈性子元素的main-end外邊距邊線被放置在該行的main-end邊線，后續(xù)彈性項(xiàng)依次平齊擺放。center：彈性子元素居中緊挨著

19、填充。如果剩余的自由空間是負(fù)的，則彈性子元素將在兩個(gè)方向上同時(shí)溢出。space-between：彈性子元素平均分布在該行上。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于flex-start。否則，第1個(gè)彈性子元素的外邊距和行的main-start邊線對(duì)齊，而最后1個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊，然后剩余的彈性項(xiàng)分布在該行上，相鄰子元素的間隔相等。space-around：彈性子元素平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于center。否則，彈性子元素沿該行分布，且彼此間隔相等，同時(shí)首尾兩邊和彈性容器之間留有一半的間隔(如子元

20、素間隔為20px，則首尾兩邊與容器之間間隔為1/2*20px=10px)。order屬性使用彈性盒布局時(shí)，可以通過(guò)order屬性來(lái)改變各元素的顯示順序?？梢栽诿總€(gè)元素的樣式中加入order屬性，瀏覽器在顯示元素的時(shí)候?qū)⒏鶕?jù)order屬性的值，按從小到大的順序排列。該屬性的默認(rèn)值為0，且可以為負(fù)值。第32頁(yè)flex-grow屬性flex-grow屬性用于設(shè)置或檢索彈性盒子的擴(kuò)展比率。默認(rèn)值為0。例如，下面的規(guī)則將第二個(gè)元素的寬度為其他元素的三倍：div:nth-of-type(1) flex-grow: 1;div:nth-of-type(2) flex-grow: 3;div:nth-of-t

21、ype(3) flex-grow: 1;第33頁(yè)flex-shrink屬性flex-shrink屬性指定了flex元素的收縮規(guī)則。flex元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù)flex-shrink的值。flex-shrink屬性和flex-grow屬性的區(qū)別在于：當(dāng)元素排列方向?yàn)闄M向排列時(shí)，如果子元素的width屬性值之和小于容器元素的寬度，就必須通過(guò)flex-grow屬性來(lái)調(diào)整子元素的寬度；如果子元素的width屬性值之和大于容器元素的寬度，就必須通過(guò)flex-shrink屬性來(lái)調(diào)整子元素的寬度；當(dāng)元素排列方向?yàn)榭v向排列時(shí)，如果子元素的height屬性值之和小于

22、容器元素的高度，就必須通過(guò)flex-grow屬性來(lái)調(diào)整子元素的高度；如果子元素的height屬性值之和大于容器元素的高度，就必須通過(guò)flex-shrink屬性來(lái)調(diào)整子元素的高度。第34頁(yè)flex-basis屬性flex-basis屬性用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。默認(rèn)值為auto，長(zhǎng)度等于元素的長(zhǎng)度。如果該元素未指定長(zhǎng)度，則長(zhǎng)度將根據(jù)內(nèi)容決定。其值通常是一個(gè)長(zhǎng)度單位或者一個(gè)百分比。第35頁(yè)flex屬性flex屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。該屬性是flex-grow、flex-shrink和flex-basis屬性的簡(jiǎn)寫(xiě)屬性。默認(rèn)值為“0 1 auto”，后兩個(gè)屬性可選該屬性還有兩個(gè)快捷值：auto(與1 1 auto相同)和none(與0 0 auto相同)。建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫(xiě)3個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。 第36頁(yè)第37頁(yè)align-self屬性align-self屬性允許單個(gè)子元素有與其他子元素不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。第