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

第1頁第10章網(wǎng)頁布局本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁第10章網(wǎng)頁布局本章概述第2頁本章概述好的網(wǎng)頁一定有一個好的布局，網(wǎng)頁布局是指對頁面中的標(biāo)題、導(dǎo)航欄、主要內(nèi)容、腳注、表單等各種構(gòu)成元素進(jìn)行合理地排版。使用CSS布局可以有很多方法，本章主要介紹了多列布局、盒子的浮動與定位，以及彈性盒布局。實際開發(fā)中，一些復(fù)雜的網(wǎng)頁可能會用到不止一種布局，通常是先整體使用一種布局設(shè)計，在局部可以使用另一種布局方式。通過本章的學(xué)習(xí)讀者應(yīng)掌握使用CSS對網(wǎng)頁進(jìn)行布局的常用方法，深入了解盒子模型的設(shè)計思想和彈性盒布局的基本原理，能夠?qū)撁嬖剡M(jìn)行合理的排版布局。第2頁本章概述好的網(wǎng)頁一定有一個好的布局，網(wǎng)頁布局是指對頁面第3頁本章的學(xué)習(xí)目標(biāo)掌握多列布局相關(guān)的CSS屬性的用法進(jìn)一步了解盒子模型的設(shè)計思想掌握position屬性的設(shè)置幾種定位方式理解z-index屬性的作用掌握float屬性的基本用法理解彈性盒布局中彈性容器和彈性子元素的關(guān)系掌握彈性盒子的常用屬性掌握彈性子元素屬性的用法第3頁本章的學(xué)習(xí)目標(biāo)掌握多列布局相關(guān)的CSS屬性的用法第4頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局10.3彈性盒布局10.4本章小結(jié) 10.5思考和練習(xí)第4頁主要內(nèi)容10.1多列布局第5頁10.1多列布局在CSS3多列布局功能出現(xiàn)之前，如果想讓文本呈多列顯示，要么使用絕對定位，手動給文本分段落，要么使用JavaScript腳本進(jìn)行控制。CSS3中新增的多列功能是對傳統(tǒng)網(wǎng)頁中塊狀布局模式的有力擴(kuò)充。顧名思義，多列布局功能可以方便開發(fā)人員將文本排版成多列，實現(xiàn)報紙那樣的多欄效果第5頁10.1多列布局在CSS3多列布局功能出現(xiàn)之前，第6頁設(shè)置列寬和列數(shù)column-width屬性用于給列定義最小寬度。默認(rèn)值為auto，表示將根據(jù)column-count屬性指定的列數(shù)自動計算列寬。column-count屬性用于指定文本顯示的列數(shù)。在實際應(yīng)用中，通常簡寫形式columns，一起指定這兩個屬性的值。第6頁設(shè)置列寬和列數(shù)column-width屬性用于給列定義第7頁設(shè)置列間距默認(rèn)情況下，瀏覽器根據(jù)列數(shù)和列寬來計算出列間距。但在實際項目中，默認(rèn)列間距用得比較少，更多時候需要指定列間距。這就用到了column-gap屬性，該屬性的默認(rèn)值為normal，相當(dāng)于1em。需要注意的是，如果column-gap與column-width加起來大于總寬度，就無法顯示column-count指定的列數(shù)，會由瀏覽器自動調(diào)整列數(shù)和列寬。第7頁設(shè)置列間距默認(rèn)情況下，瀏覽器根據(jù)列數(shù)和列寬來計算出列間第8頁設(shè)置列邊框由于瀏覽器寬度有限，當(dāng)列數(shù)過多時，列與列之間的間隔就會比較窄，不方便閱讀。這時可以在列與列之間設(shè)置一條邊框線，使版面看起來更清晰。column-rule用于設(shè)置列邊框，類似于border屬性，所不同的是這個列邊框不占用任何空間，因此設(shè)置column-rule不會導(dǎo)致列寬的變化。它也包含3個子屬性：column-rule-width、column-rule-style和column-rule-color，分別用來設(shè)置列之間邊框的寬度、樣式和顏色。邊框的寬度通常需要小于column-gap屬性的值，否則可能會導(dǎo)致邊框覆蓋部分文字。第8頁設(shè)置列邊框由于瀏覽器寬度有限，當(dāng)列數(shù)過多時，列與列之間設(shè)置跨列標(biāo)題很多時候，一篇文章需要以多欄的方式顯示內(nèi)容，但有共同的標(biāo)題，而標(biāo)題不屬于任何一列，標(biāo)題是所有內(nèi)容的標(biāo)題。因此，在排版時，需要將標(biāo)題放在頂部并跨列顯示。這可以通過跨列屬性column-span來實現(xiàn)。column-span屬性有兩個取值：默認(rèn)值none表示不跨列，all表示跨越所有列。例如，文章標(biāo)題可以設(shè)成all來跨列。第9頁設(shè)置跨列標(biāo)題很多時候，一篇文章需要以多欄的方式顯示內(nèi)容，但有統(tǒng)一列高column-fill屬性用于統(tǒng)一列高。默認(rèn)值為auto，各列的高度隨內(nèi)容自動調(diào)整；它還有另外一個值balance，當(dāng)設(shè)置為balance時，所有列的高度都設(shè)為最高的列高。第10頁統(tǒng)一列高column-fill屬性用于統(tǒng)一列高。默認(rèn)值為au第11頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局10.3彈性盒布局10.4本章小結(jié) 10.5思考和練習(xí)第11頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局在CSS中，一共有三種常用的“定位方案”(positioningscheme)用來布局頁面中的元素：normal、float以及absolute。默認(rèn)情況下，元素使用“正常流”(normal)或“靜態(tài)流”(staticflow)在頁面中進(jìn)行布局。在正常流中，頁面中的塊級元素從頂部向底部流動(記住每個塊級元素都以獨占一個新行的形式出現(xiàn))，而行內(nèi)元素則從左向右流動(因為它們不會從新行開始顯示)。第12頁10.2使用CSS定位與布局在CSS中，一共有三種常用的第13頁position屬性position的中文含義是位置、狀態(tài)。該屬性有如下4個可能的取值：static：與正常流相同，并且為默認(rèn)值。因此實際使用該屬性時，很少會指定此值。relative：盒子的位置可以相對其在正常流中的位置出現(xiàn)偏移，對象不可層疊，將根據(jù)left、right、top和bottom等屬性的值在正常流這偏移。absolute：將盒子對象從正常流中拖出，完全使用width、height、left、right、top、bottom等屬性進(jìn)行絕對定位，絕對定位的元素可以有邊界，但這些邊界不壓縮。其層疊通過z-index屬性定義。fixed：固定在屏幕的某個位置，位置通過left、top、right和bottom屬性指定，并且不隨用戶滾動窗口而改變位置。第13頁position屬性position的中文含義是位置第14頁盒子偏移屬性當(dāng)盒子的position屬性的值為relative、absolute或fixed時，它們同時會使用“盒子偏移”屬性指定盒子應(yīng)如何定位，盒子偏移屬性的含義如下；top：指定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。left：指定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。bottom：對于絕對定位元素，bottom屬性設(shè)置單位高于/低于包含它的元素的底邊；對于相對定位元素，bottom屬性設(shè)置單位高于/低于其正常位置的元素的底邊。right：指定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。第14頁盒子偏移屬性當(dāng)盒子的position屬性的值為rel第15頁相對定位相對定位能夠?qū)⒑凶右苿拥脚c其在正常流中的位置相關(guān)聯(lián)的某個位置。例如，將一個盒子從其在正常流中應(yīng)該出現(xiàn)的位置下移30像素，或右移100像素。它將會根據(jù)盒子偏移屬性從其在正常流中的位置進(jìn)行轉(zhuǎn)移。當(dāng)容器的position屬性為relative時，就是對該盒子應(yīng)用相對定位，使用相對定位的盒子的top、bottom、left和right屬性的參照對象是其父容器的4條邊框，而不是瀏覽器窗口。第15頁相對定位相對定位能夠?qū)⒑凶右苿拥脚c其在正常流中的位置第16頁絕對定位絕對定位是使用最廣泛的一種定位方案，它能夠精準(zhǔn)地將元素移動到想要的位置。使用絕對定位的方法是將position屬性設(shè)置為absolute，然后可以使用盒子偏移屬性對其進(jìn)行需要的定位。需要注意的是，因為絕對定位的盒子被從正常流中取出，即使兩個垂直外邊距相遇，它們的外邊距也不會折疊。絕對定位的元素總是出現(xiàn)在相對定位元素之上，除非使用z-index屬性進(jìn)行設(shè)置。第16頁絕對定位絕對定位是使用最廣泛的一種定位方案，它能夠精第17頁固定定位position屬性中需要了解的最后一個值是fixed。此值指定不僅元素的內(nèi)容應(yīng)完全從正常流中移除，該盒子在用戶上下滾動頁面時也不應(yīng)該移動。這里的固定定位是指元素的位置相對于瀏覽器窗口是固定位置。第17頁固定定位position屬性中需要了解的最后一個值是第18頁z-index屬性z-index屬性是針對網(wǎng)頁顯示中的一個特殊屬性。因為顯示器顯示的圖案是一個二維平面，用x軸和y軸來表示位置屬性。為了表示三維立體中的層疊順序，引入了z-index屬性表示兩個元素z軸的不同，從而表示元素在疊加順序上的立體關(guān)系。使用絕對和相對定位的元素經(jīng)常會與其他元素出現(xiàn)重疊。當(dāng)發(fā)生這種情況時，默認(rèn)的行為是第一個元素位于后來元素之下。這被稱作“堆疊上下文”(stackingcontext)。z-index屬性就用來指定重疊部分的上下層關(guān)系。z-index屬性的值是一個數(shù)字，數(shù)字的值越大就越接近元素顯示位置的頂部(例如，一個z-index值為10的元素會出現(xiàn)于z-index值為5的元素之上)。第18頁z-index屬性z-index屬性是針對網(wǎng)頁顯示中第19頁float屬性float屬性能夠?qū)⒛硞€元素從正常流中抽取出來，并將其盡可能遠(yuǎn)地放置在包含盒子的左側(cè)或右側(cè)。包含元素中的其他內(nèi)容則會圍繞關(guān)聯(lián)有float屬性的元素進(jìn)行流動(就如文本與其他元素能夠圍繞圖片流動一樣)。float屬性的最初目的是實現(xiàn)圖文混排，使文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。當(dāng)為一個元素指定float屬性時，必須設(shè)置width屬性以指定盒子應(yīng)該占據(jù)的寬度。否則，它將自動占據(jù)包含盒子100%的寬度，不會給圍繞它流動的內(nèi)容留任何空間，從而使該元素顯示的效果如同一個普通的塊級元素。第19頁float屬性float屬性能夠?qū)⒛硞€元素從正常流中第20頁float屬性使用float屬性，除了可以建立網(wǎng)頁的橫向多列布局，還可以實現(xiàn)許多其他的網(wǎng)頁內(nèi)容的布局。該屬性的可取值有如下幾個：none：默認(rèn)值，盒子不發(fā)生浮動，并保持在正常流中應(yīng)處于的位置。left：盒子浮動到包含元素的左側(cè)，而包含元素的其他內(nèi)容浮動至其右側(cè)。right：盒子浮動到包含元素的右側(cè)，而包含元素的其他內(nèi)容浮動至其左側(cè)。inherit：從父元素繼承該屬性的值。第20頁float屬性使用float屬性，除了可以建立網(wǎng)頁的第21頁clear屬性clear屬性定義了元素的哪邊上不允許出現(xiàn)浮動元素。在CSS1和CSS2中，這是通過自動為清除元素(即設(shè)置了clear屬性的元素)增加上外邊距實現(xiàn)的。在CSS2.1中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結(jié)果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。第21頁clear屬性clear屬性定義了元素的哪邊上不允許第22頁clear屬性clear屬性的可取值如下：left：具有clear屬性的元素在其左側(cè)不能有任何內(nèi)容。right：有clear屬性的元素在其右側(cè)不能有任何內(nèi)容。both：clear屬性的元素在其左右兩側(cè)都不能有任何內(nèi)容。none：默認(rèn)值，允許兩側(cè)出現(xiàn)浮動內(nèi)容。第22頁clear屬性clear屬性的可取值如下：第23頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局10.3彈性盒布局10.4本章小結(jié) 10.5思考和練習(xí)第23頁主要內(nèi)容10.1多列布局第24頁10.3彈性盒布局在實際項目中，網(wǎng)站的布局要比我們想象的復(fù)雜，光靠前面介紹的多欄布局和盒布局還遠(yuǎn)遠(yuǎn)不夠。本節(jié)將介紹一種CSS3中新增的一種布局方式——彈性盒布局。CSS3彈性盒(FlexibleBox或flexbox)是一整套布局規(guī)范，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。第24頁10.3彈性盒布局在實際項目中，網(wǎng)站的布局要比我第25頁定義彈性容器彈性盒子由彈性容器(Flexcontainer)和彈性子元素(Flexitem)組成。彈性容器通過設(shè)置display屬性的值為flex將其定義為彈性容器。彈性容器內(nèi)包含了一個或多個彈性子元素。彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個容器只有一行。第25頁定義彈性容器彈性盒子由彈性容器(Flexconta第26頁彈性盒子屬性彈性盒布局包含多個CSS屬性，包括彈性盒子屬性和彈性子元素屬性兩類，第26頁彈性盒子屬性彈性盒布局包含多個CSS屬性，包括彈性盒第27頁flex-direction屬性flex-direction屬性規(guī)定靈活項目的方向。如果元素不是彈性盒對象的元素，則flex-direction屬性不起作用。row：默認(rèn)值。元素將水平顯示，正如一個行一樣。row-reverse：與row相同，但是以相反的順序顯示。column：元素將垂直顯示，正如一個列一樣。column-reverse：與column相同，但從后往前排，最后一項排在最上面。第27頁flex-direction屬性flex-direc第28頁flex-wrap屬性flex-wrap屬性規(guī)定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。該屬性的可取值如下：nowrap：默認(rèn)值，彈性容器為單行，彈性子項可能會溢出容器，如圖10-17所示。wrap：彈性容器為多行。彈性子項溢出的部分會被放置到新行，子項內(nèi)部會發(fā)生斷行。wrap-reverse：與wrap類似，但是順序相反。第28頁flex-wrap屬性flex-wrap屬性規(guī)定fl第29頁flex-flow屬性flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為rownowrap。第29頁flex-flow屬性flex-flow屬性是fl第30頁align-items屬性align-items屬性定義flex子元素在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對齊方式。align-items屬性的可取值如下：stretch ：默認(rèn)值。子元素被拉伸以適應(yīng)容器。center：子元素位于容器的中心。flex-start：子元素位于容器的開頭。flex-end：子元素位于容器的結(jié)尾。baseline：子元素位于容器的基線上。第30頁align-items屬性align-items屬性第31頁justify-conten屬性justify-conten屬性用于設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。justify-conten屬性的可取值如下：flex-start：默認(rèn)值，彈性子元素向行頭緊挨著填充。第一個彈性子元素的main-start外邊距邊線被放置在該行的main-start邊線，后續(xù)彈性項依次平齊擺放。flex-end：彈性子元素向行尾緊挨著填充。第一個彈性子元素的main-end外邊距邊線被放置在該行的main-end邊線，后續(xù)彈性項依次平齊擺放。center：彈性子元素居中緊挨著填充。如果剩余的自由空間是負(fù)的，則彈性子元素將在兩個方向上同時溢出。space-between：彈性子元素平均分布在該行上。如果剩余空間為負(fù)或者只有一個彈性項，則該值等同于flex-start。否則，第1個彈性子元素的外邊距和行的main-start邊線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰子元素的間隔相等。space-around：彈性子元素平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個彈性項，則該值等同于center。否則，彈性子元素沿該行分布，且彼此間隔相等，同時首尾兩邊和彈性容器之間留有一半的間隔(如子元素間隔為20px，則首尾兩邊與容器之間間隔為1/2*20px=10px)。第31頁justify-conten屬性justify-coorder屬性使用彈性盒布局時，可以通過order屬性來改變各元素的顯示順序?？梢栽诿總€元素的樣式中加入order屬性，瀏覽器在顯示元素的時候?qū)⒏鶕?jù)order屬性的值，按從小到大的順序排列。該屬性的默認(rèn)值為0，且可以為負(fù)值。第32頁order屬性使用彈性盒布局時，可以通過order屬性來改變flex-grow屬性flex-grow屬性用于設(shè)置或檢索彈性盒子的擴(kuò)展比率。默認(rèn)值為0。例如，下面的規(guī)則將第二個元素的寬度為其他元素的三倍：div:nth-of-type(1){flex-grow:1;}div:nth-of-type(2){flex-grow:3;}div:nth-of-type(3){flex-grow:1;}第33頁flex-grow屬性flex-grow屬性用于設(shè)置或檢索彈flex-shrink屬性flex-shrink屬性指定了flex元素的收縮規(guī)則。flex元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮，其收縮的大小是依據(jù)flex-shrink的值。flex-shrink屬性和flex-grow屬性的區(qū)別在于：當(dāng)元素排列方向為橫向排列時，如果子元素的width屬性值之和小于容器元素的寬度，就必須通過flex-grow屬性來調(diào)整子元素的寬度；如果子元素的width屬性值之和大于容器元素的寬度，就必須通過flex-shrink屬性來調(diào)整子元素的寬度；當(dāng)元素排列方向為縱向排列時，如果子元素的height屬性值之和小于容器元素的高度，就必須通過flex-grow屬性來調(diào)整子元素的高度；如果子元素的height屬性值之和大于容器元素的高度，就必須通過flex-shrink屬性來調(diào)整子元素的高度。第34頁flex-shrink屬性flex-shrink屬性指定了fflex-basis屬性flex-basis屬性用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。默認(rèn)值為auto，長度等于元素的長度。如果該元素未指定長度，則長度將根據(jù)內(nèi)容決定。其值通常是一個長度單位或者一個百分比。第35頁flex-basis屬性flex-basis屬性用于設(shè)置或檢flex屬性flex屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。該屬性是flex-grow、flex-shrink和flex-basis屬性的簡寫屬性。默認(rèn)值為“01auto”，后兩個屬性可選該屬性還有兩個快捷值：auto(與11auto相同)和none(與00auto相同)。建議優(yōu)先使用這個屬性，而不是單獨寫3個分離的屬性，因為瀏覽器會推算相關(guān)值。

第36頁flex屬性flex屬性用于設(shè)置或檢索彈性盒模型對象的子元素第37頁align-self屬性align-self屬性允許單個子元素有與其他子元素不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。第37頁align-self屬性align-self屬性允許第38頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局10.3彈性盒布局10.4本章小結(jié) 10.5思考和練習(xí)第38頁主要內(nèi)容10.1多列布局第39頁10.4本章小結(jié)本章主要介紹了使用CSS進(jìn)行網(wǎng)頁布局的方法，包括多列布局、盒子的浮動和定位以及彈性盒布局。首先介紹的是多列布局，多列布局是CSS3新增的功能，只需幾個簡單的CSS屬性設(shè)置，即可實現(xiàn)報紙那樣的多欄效果；然后講述了CSS的定位與布局，主要是position和float屬性的使用，這兩個屬性也是CSS布局中用的最廣泛的屬性；最后講述了CSS3新增的彈性盒布局，包括彈性盒子屬性和彈性子元素屬性的使用，引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。通過本章的學(xué)習(xí)，讀者應(yīng)掌握使用CSS進(jìn)行網(wǎng)頁布局的各種方法，在合適的場合使用正確的布局方式。第39頁10.4本章小結(jié)本章主要介紹了使用CSS進(jìn)行網(wǎng)第40頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局10.3彈性盒布局10.4本章小結(jié)

10.5思考和練習(xí)第40頁主要內(nèi)容10.1多列布局第41頁10.5思考和練習(xí)1.column-width屬性值為auto，表示將根據(jù)

屬性指定的列數(shù)自動計算列寬。2.column-rule用于設(shè)置列邊框，類似于border屬性，所不同的是這個列邊框不占用任何空間，它也包含3個子屬性：

、

和

。3.在多列布局中，要實現(xiàn)標(biāo)題跨列顯示，可以使用

屬性。4.在CSS布局中，position屬性是一個使用較多的重要屬性，很多特殊容器的定位必須使用position來完成。該屬性有4個可能的取值：static、

、

和

。5.盒子的浮動使用的是什么屬性？該屬性有幾個取值，分別是什么含義？6.使用浮動盒子時，如果希望浮動元素旁邊沒有任何內(nèi)容，而周圍的內(nèi)容被推至浮動元素之下，可以使用

屬性。第41頁10.5思考和練習(xí)1.column-widt第42頁第10章網(wǎng)頁布局本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁第10章網(wǎng)頁布局本章概述第43頁本章概述好的網(wǎng)頁一定有一個好的布局，網(wǎng)頁布局是指對頁面中的標(biāo)題、導(dǎo)航欄、主要內(nèi)容、腳注、表單等各種構(gòu)成元素進(jìn)行合理地排版。使用CSS布局可以有很多方法，本章主要介紹了多列布局、盒子的浮動與定位，以及彈性盒布局。實際開發(fā)中，一些復(fù)雜的網(wǎng)頁可能會用到不止一種布局，通常是先整體使用一種布局設(shè)計，在局部可以使用另一種布局方式。通過本章的學(xué)習(xí)讀者應(yīng)掌握使用CSS對網(wǎng)頁進(jìn)行布局的常用方法，深入了解盒子模型的設(shè)計思想和彈性盒布局的基本原理，能夠?qū)撁嬖剡M(jìn)行合理的排版布局。第2頁本章概述好的網(wǎng)頁一定有一個好的布局，網(wǎng)頁布局是指對頁面第44頁本章的學(xué)習(xí)目標(biāo)掌握多列布局相關(guān)的CSS屬性的用法進(jìn)一步了解盒子模型的設(shè)計思想掌握position屬性的設(shè)置幾種定位方式理解z-index屬性的作用掌握float屬性的基本用法理解彈性盒布局中彈性容器和彈性子元素的關(guān)系掌握彈性盒子的常用屬性掌握彈性子元素屬性的用法第3頁本章的學(xué)習(xí)目標(biāo)掌握多列布局相關(guān)的CSS屬性的用法第45頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局10.3彈性盒布局10.4本章小結(jié) 10.5思考和練習(xí)第4頁主要內(nèi)容10.1多列布局第46頁10.1多列布局在CSS3多列布局功能出現(xiàn)之前，如果想讓文本呈多列顯示，要么使用絕對定位，手動給文本分段落，要么使用JavaScript腳本進(jìn)行控制。CSS3中新增的多列功能是對傳統(tǒng)網(wǎng)頁中塊狀布局模式的有力擴(kuò)充。顧名思義，多列布局功能可以方便開發(fā)人員將文本排版成多列，實現(xiàn)報紙那樣的多欄效果第5頁10.1多列布局在CSS3多列布局功能出現(xiàn)之前，第47頁設(shè)置列寬和列數(shù)column-width屬性用于給列定義最小寬度。默認(rèn)值為auto，表示將根據(jù)column-count屬性指定的列數(shù)自動計算列寬。column-count屬性用于指定文本顯示的列數(shù)。在實際應(yīng)用中，通常簡寫形式columns，一起指定這兩個屬性的值。第6頁設(shè)置列寬和列數(shù)column-width屬性用于給列定義第48頁設(shè)置列間距默認(rèn)情況下，瀏覽器根據(jù)列數(shù)和列寬來計算出列間距。但在實際項目中，默認(rèn)列間距用得比較少，更多時候需要指定列間距。這就用到了column-gap屬性，該屬性的默認(rèn)值為normal，相當(dāng)于1em。需要注意的是，如果column-gap與column-width加起來大于總寬度，就無法顯示column-count指定的列數(shù)，會由瀏覽器自動調(diào)整列數(shù)和列寬。第7頁設(shè)置列間距默認(rèn)情況下，瀏覽器根據(jù)列數(shù)和列寬來計算出列間第49頁設(shè)置列邊框由于瀏覽器寬度有限，當(dāng)列數(shù)過多時，列與列之間的間隔就會比較窄，不方便閱讀。這時可以在列與列之間設(shè)置一條邊框線，使版面看起來更清晰。column-rule用于設(shè)置列邊框，類似于border屬性，所不同的是這個列邊框不占用任何空間，因此設(shè)置column-rule不會導(dǎo)致列寬的變化。它也包含3個子屬性：column-rule-width、column-rule-style和column-rule-color，分別用來設(shè)置列之間邊框的寬度、樣式和顏色。邊框的寬度通常需要小于column-gap屬性的值，否則可能會導(dǎo)致邊框覆蓋部分文字。第8頁設(shè)置列邊框由于瀏覽器寬度有限，當(dāng)列數(shù)過多時，列與列之間設(shè)置跨列標(biāo)題很多時候，一篇文章需要以多欄的方式顯示內(nèi)容，但有共同的標(biāo)題，而標(biāo)題不屬于任何一列，標(biāo)題是所有內(nèi)容的標(biāo)題。因此，在排版時，需要將標(biāo)題放在頂部并跨列顯示。這可以通過跨列屬性column-span來實現(xiàn)。column-span屬性有兩個取值：默認(rèn)值none表示不跨列，all表示跨越所有列。例如，文章標(biāo)題可以設(shè)成all來跨列。第50頁設(shè)置跨列標(biāo)題很多時候，一篇文章需要以多欄的方式顯示內(nèi)容，但有統(tǒng)一列高column-fill屬性用于統(tǒng)一列高。默認(rèn)值為auto，各列的高度隨內(nèi)容自動調(diào)整；它還有另外一個值balance，當(dāng)設(shè)置為balance時，所有列的高度都設(shè)為最高的列高。第51頁統(tǒng)一列高column-fill屬性用于統(tǒng)一列高。默認(rèn)值為au第52頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局10.3彈性盒布局10.4本章小結(jié) 10.5思考和練習(xí)第11頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局在CSS中，一共有三種常用的“定位方案”(positioningscheme)用來布局頁面中的元素：normal、float以及absolute。默認(rèn)情況下，元素使用“正常流”(normal)或“靜態(tài)流”(staticflow)在頁面中進(jìn)行布局。在正常流中，頁面中的塊級元素從頂部向底部流動(記住每個塊級元素都以獨占一個新行的形式出現(xiàn))，而行內(nèi)元素則從左向右流動(因為它們不會從新行開始顯示)。第53頁10.2使用CSS定位與布局在CSS中，一共有三種常用的第54頁position屬性position的中文含義是位置、狀態(tài)。該屬性有如下4個可能的取值：static：與正常流相同，并且為默認(rèn)值。因此實際使用該屬性時，很少會指定此值。relative：盒子的位置可以相對其在正常流中的位置出現(xiàn)偏移，對象不可層疊，將根據(jù)left、right、top和bottom等屬性的值在正常流這偏移。absolute：將盒子對象從正常流中拖出，完全使用width、height、left、right、top、bottom等屬性進(jìn)行絕對定位，絕對定位的元素可以有邊界，但這些邊界不壓縮。其層疊通過z-index屬性定義。fixed：固定在屏幕的某個位置，位置通過left、top、right和bottom屬性指定，并且不隨用戶滾動窗口而改變位置。第13頁position屬性position的中文含義是位置第55頁盒子偏移屬性當(dāng)盒子的position屬性的值為relative、absolute或fixed時，它們同時會使用“盒子偏移”屬性指定盒子應(yīng)如何定位，盒子偏移屬性的含義如下；top：指定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。left：指定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。bottom：對于絕對定位元素，bottom屬性設(shè)置單位高于/低于包含它的元素的底邊；對于相對定位元素，bottom屬性設(shè)置單位高于/低于其正常位置的元素的底邊。right：指定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。第14頁盒子偏移屬性當(dāng)盒子的position屬性的值為rel第56頁相對定位相對定位能夠?qū)⒑凶右苿拥脚c其在正常流中的位置相關(guān)聯(lián)的某個位置。例如，將一個盒子從其在正常流中應(yīng)該出現(xiàn)的位置下移30像素，或右移100像素。它將會根據(jù)盒子偏移屬性從其在正常流中的位置進(jìn)行轉(zhuǎn)移。當(dāng)容器的position屬性為relative時，就是對該盒子應(yīng)用相對定位，使用相對定位的盒子的top、bottom、left和right屬性的參照對象是其父容器的4條邊框，而不是瀏覽器窗口。第15頁相對定位相對定位能夠?qū)⒑凶右苿拥脚c其在正常流中的位置第57頁絕對定位絕對定位是使用最廣泛的一種定位方案，它能夠精準(zhǔn)地將元素移動到想要的位置。使用絕對定位的方法是將position屬性設(shè)置為absolute，然后可以使用盒子偏移屬性對其進(jìn)行需要的定位。需要注意的是，因為絕對定位的盒子被從正常流中取出，即使兩個垂直外邊距相遇，它們的外邊距也不會折疊。絕對定位的元素總是出現(xiàn)在相對定位元素之上，除非使用z-index屬性進(jìn)行設(shè)置。第16頁絕對定位絕對定位是使用最廣泛的一種定位方案，它能夠精第58頁固定定位position屬性中需要了解的最后一個值是fixed。此值指定不僅元素的內(nèi)容應(yīng)完全從正常流中移除，該盒子在用戶上下滾動頁面時也不應(yīng)該移動。這里的固定定位是指元素的位置相對于瀏覽器窗口是固定位置。第17頁固定定位position屬性中需要了解的最后一個值是第59頁z-index屬性z-index屬性是針對網(wǎng)頁顯示中的一個特殊屬性。因為顯示器顯示的圖案是一個二維平面，用x軸和y軸來表示位置屬性。為了表示三維立體中的層疊順序，引入了z-index屬性表示兩個元素z軸的不同，從而表示元素在疊加順序上的立體關(guān)系。使用絕對和相對定位的元素經(jīng)常會與其他元素出現(xiàn)重疊。當(dāng)發(fā)生這種情況時，默認(rèn)的行為是第一個元素位于后來元素之下。這被稱作“堆疊上下文”(stackingcontext)。z-index屬性就用來指定重疊部分的上下層關(guān)系。z-index屬性的值是一個數(shù)字，數(shù)字的值越大就越接近元素顯示位置的頂部(例如，一個z-index值為10的元素會出現(xiàn)于z-index值為5的元素之上)。第18頁z-index屬性z-index屬性是針對網(wǎng)頁顯示中第60頁float屬性float屬性能夠?qū)⒛硞€元素從正常流中抽取出來，并將其盡可能遠(yuǎn)地放置在包含盒子的左側(cè)或右側(cè)。包含元素中的其他內(nèi)容則會圍繞關(guān)聯(lián)有float屬性的元素進(jìn)行流動(就如文本與其他元素能夠圍繞圖片流動一樣)。float屬性的最初目的是實現(xiàn)圖文混排，使文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。當(dāng)為一個元素指定float屬性時，必須設(shè)置width屬性以指定盒子應(yīng)該占據(jù)的寬度。否則，它將自動占據(jù)包含盒子100%的寬度，不會給圍繞它流動的內(nèi)容留任何空間，從而使該元素顯示的效果如同一個普通的塊級元素。第19頁float屬性float屬性能夠?qū)⒛硞€元素從正常流中第61頁float屬性使用float屬性，除了可以建立網(wǎng)頁的橫向多列布局，還可以實現(xiàn)許多其他的網(wǎng)頁內(nèi)容的布局。該屬性的可取值有如下幾個：none：默認(rèn)值，盒子不發(fā)生浮動，并保持在正常流中應(yīng)處于的位置。left：盒子浮動到包含元素的左側(cè)，而包含元素的其他內(nèi)容浮動至其右側(cè)。right：盒子浮動到包含元素的右側(cè)，而包含元素的其他內(nèi)容浮動至其左側(cè)。inherit：從父元素繼承該屬性的值。第20頁float屬性使用float屬性，除了可以建立網(wǎng)頁的第62頁clear屬性clear屬性定義了元素的哪邊上不允許出現(xiàn)浮動元素。在CSS1和CSS2中，這是通過自動為清除元素(即設(shè)置了clear屬性的元素)增加上外邊距實現(xiàn)的。在CSS2.1中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結(jié)果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。第21頁clear屬性clear屬性定義了元素的哪邊上不允許第63頁clear屬性clear屬性的可取值如下：left：具有clear屬性的元素在其左側(cè)不能有任何內(nèi)容。right：有clear屬性的元素在其右側(cè)不能有任何內(nèi)容。both：clear屬性的元素在其左右兩側(cè)都不能有任何內(nèi)容。none：默認(rèn)值，允許兩側(cè)出現(xiàn)浮動內(nèi)容。第22頁clear屬性clear屬性的可取值如下：第64頁主要內(nèi)容10.1多列布局10.2使用CSS定位與布局10.3彈性盒布局10.4本章小結(jié) 10.5思考和練習(xí)第23頁主要內(nèi)容10.1多列布局第65頁10.3彈性盒布局在實際項目中，網(wǎng)站的布局要比我們想象的復(fù)雜，光靠前面介紹的多欄布局和盒布局還遠(yuǎn)遠(yuǎn)不夠。本節(jié)將介紹一種CSS3中新增的一種布局方式——彈性盒布局。CSS3彈性盒(FlexibleBox或flexbox)是一整套布局規(guī)范，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。第24頁10.3彈性盒布局在實際項目中，網(wǎng)站的布局要比我第66頁定義彈性容器彈性盒子由彈性容器(Flexcontainer)和彈性子元素(Flexitem)組成。彈性容器通過設(shè)置display屬性的值為flex將其定義為彈性容器。彈性容器內(nèi)包含了一個或多個彈性子元素。彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個容器只有一行。第25頁定義彈性容器彈性盒子由彈性容器(Flexconta第67頁彈性盒子屬性彈性盒布局包含多個CSS屬性，包括彈性盒子屬性和彈性子元素屬性兩類，第26頁彈性盒子屬性彈性盒布局包含多個CSS屬性，包括彈性盒第68頁flex-direction屬性flex-direction屬性規(guī)定靈活項目的方向。如果元素不是彈性盒對象的元素，則flex-direction屬性不起作用。row：默認(rèn)值。元素將水平顯示，正如一個行一樣。row-reverse：與row相同，但是以相反的順序顯示。column：元素將垂直顯示，正如一個列一樣。column-reverse：與column相同，但從后往前排，最后一項排在最上面。第27頁flex-direction屬性flex-direc第69頁flex-wrap屬性flex-wrap屬性規(guī)定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。該屬性的可取值如下：nowrap：默認(rèn)值，彈性容器為單行，彈性子項可能會溢出容器，如圖10-17所示。wrap：彈性容器為多行。彈性子項溢出的部分會被放置到新行，子項內(nèi)部會發(fā)生斷行。wrap-reverse：與wrap類似，但是順序相反。第28頁flex-wrap屬性flex-wrap屬性規(guī)定fl第70頁flex-flow屬性flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為rownowrap。第29頁flex-flow屬性flex-flow屬性是fl第71頁align-items屬性align-items屬性定義flex子元素在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對齊方式。align-items屬性的可取值如下：stretch ：默認(rèn)值。子元素被拉伸以適應(yīng)容器。center：子元素位于容器的中心。flex-start：子元素位于容器的開頭。flex-end：子元素位于容器的結(jié)尾。baseline：子元素位于容器的基線上。第30頁align-items屬性align-items屬性第72頁justify-conten屬性justify-conten屬性用于設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。justify-conten屬性的可取值如下：flex-start：默認(rèn)值，彈性子元素向行頭緊挨著填充。第一個彈性子元素的main-start外邊距邊線被放置在該行的main-start邊線，后續(xù)彈性項依次平齊擺放。flex-end：彈性子元素向行尾緊挨著填充。第一個彈性子元素的main-end外邊距邊線被放置在該行的main-end邊線，后續(xù)彈性項依次平齊擺放。center：彈性子元素居中緊挨著填充。如果剩余的自由空間是負(fù)的，則彈性子元素將在兩個方向上同時溢出。space-between：彈性子元素平均分布在該行上。如果剩余空間為負(fù)或者只有一個彈性項，則該值等同于flex-start。否則，第1個彈性子元素的外邊距和行的main-start邊線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰子元素的間隔相等。space-around：彈性子元素平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個彈性項，則該值等同于center。否則，彈性子元素沿該行分布，且彼此間隔相等，同時首尾兩邊和彈性容器之間留有一半的間隔(如子元素間隔為20px，則首尾兩邊與容器之間間隔為1/2*20px=10px)。第31頁justify-conten屬性justify-coorder屬性使用彈性盒布局時，可以通過order屬性來改變各元素的顯示順序?？梢栽诿總€元素的樣式中加入order屬性，瀏覽器在顯示元素的時候?qū)⒏鶕?jù)order屬性的值，按從小到大的順序排列。該屬性的默認(rèn)值為0，且可以為負(fù)值。第73頁order屬性使用彈性盒布局時，可以通過order屬性來改變flex-grow屬性flex-grow屬性用于設(shè)置或檢索彈性盒子的擴(kuò)展比率。默認(rèn)值為0。例如，下面的規(guī)則將第二個元素的寬度為其他元素的三倍：div:nth-of-type(1){flex-grow:1;}div:nth-of-type(2){flex-grow:3;}div:nth-of-type(3){flex-grow:1;}第74頁flex-grow屬性flex-grow屬性用于設(shè)置或檢索彈flex-shrink屬性flex-shrink屬性指定了flex元素的收縮規(guī)則。flex元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮，其收縮的大小是依據(jù)flex-shrink的值。flex-shrink屬性和flex-grow