1、第11章 頁面布局與媒介查詢本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述本章將學(xué)習(xí)如何使用CSS布置元素，創(chuàng)建CSS布局。這是CSS以前的一個弱點基于CSS 2.1的布局技術(shù)使用最初不用于頁面布局的屬性，不適合于目前的Web應(yīng)用程序。本章首先復(fù)習(xí)基礎(chǔ)知識：CSS盒子模型、浮動、定位，以及如何使用它們創(chuàng)建靈活而確定的頁面布局。接著討論媒介查詢的潛在功能，以及如何調(diào)整CSS。最后討論CSS3布局規(guī)范的未來。第3頁本章的學(xué)習(xí)目標(biāo)了解CSS盒子模型概念掌握使用CSS定位與布局方法了解媒體查詢功能了解CSS3布局規(guī)范第4頁主要內(nèi)容11.1 盒子模型11.2 使用CSS定位與布局11.3 構(gòu)建頁面布局實

2、例11.4 媒體查詢11.5 CSS3布局11.6 本章小結(jié)第5頁11.1 盒子模型“盒子模型”(box model)也稱為方框模型，在CSS中是一個很重要的概念，因為它決定了元素在瀏覽器窗口中如何定位。其因CSS處理每個元素都好像元素位于一個盒子中而得名。盒子模型示意圖一個演示盒子模型的示例為演示盒子模型，可以為網(wǎng)頁中的每個元素添加一個邊框。元素創(chuàng)建了包含整個頁面的一個大盒子，而在其內(nèi)部每一個標(biāo)題、段落、圖片或鏈接都會創(chuàng)建另一個盒子。第6頁盒子在瀏覽器中的效果border屬性border屬性能夠指定代表某一元素的盒子的邊框應(yīng)如何呈現(xiàn)。一個邊框具有三個可以修改的屬性：border-color屬

3、性，用于指定邊框應(yīng)具有的顏色；border-style屬性，用于指定邊框應(yīng)為實線、虛線還是雙股線，或者其他可能的取值；borer-width屬性，用于指定邊框應(yīng)具有的寬度。給顏色屬性添加第四個值，就可以控制透明度。RGBa中的第四個值“a”表示alpha，它的作用和在Photoshop中修改alpha通道相同。第7頁padding屬性padding屬性能夠指定元素內(nèi)容與其邊框之間應(yīng)顯示的距離：該屬性的值多數(shù)使用像素指定。不過，它可以使用任何之前介紹過的長度單位、百分比或關(guān)鍵字inherit。第8頁margin屬性margin屬性控制盒子之間的空間。它的取值可以是長度、百分比或者inherit，

4、每種取值的含義與剛才所見的padding屬性完全相同。與padding屬性一樣，除非取值為inherit，否則margin屬性的值也不會被子元素繼承。第9頁內(nèi)容盒子的尺寸第10頁控制內(nèi)容盒子尺寸的屬性屬 性作 用height設(shè)置盒子的高度width設(shè)置盒子的寬度line-height設(shè)置文本行的高度(如布局方案中的行距)max-height設(shè)置盒子的最大高度min-height設(shè)置盒子的最小高度max-width設(shè)置盒子的最大寬度min-width設(shè)置盒子的最小寬度第11頁主要內(nèi)容11.1 盒子模型11.2 使用CSS定位與布局11.3 構(gòu)建頁面布局實例11.4 媒體查詢11.5 CSS3布局

5、11.6 本章小結(jié)11.2 使用CSS定位與布局CSS定位方案是Web中控制頁面布局的標(biāo)準(zhǔn)方式。在CSS中可以使用盒子模型表現(xiàn)每個元素中的內(nèi)容，用屬性來影響盒子及其內(nèi)容。使用CSS控制盒子在頁面中出現(xiàn)的位置，即CSS定位與布局。在CSS中，有三種常用的“定位方案”能夠控制頁面的布局：normal、float以及absolute定位。第12頁正常流(normal)默認情況下，元素使用“正常流”(normal)或“靜態(tài)流”(static flow)在頁面中進行布局。在正常流中，頁面中的塊級元素從頂部向底部流動，每個塊級元素都以獨占一個新行的形式出現(xiàn)，而行內(nèi)元素則從左向右流動，因為它們不會從新行開始

6、顯示。第13頁position屬性position屬性能夠指定希望如何控制盒子的位置，通常用于將項抽離正常流。第14頁值含 義static與正常流相同，并且為默認值。因此很少會看到指定此值relative盒子的位置可以相對其在正常流中的位置出現(xiàn)偏移absolute盒子完全使用以包含元素左上角為原點的x及y坐標(biāo)進行定位fixed位置以瀏覽器窗口左上角為原點計算得出，并且不隨用戶滾動窗口而改變位置position屬性的取值盒子偏移屬性當(dāng)盒子的position屬性的值為relative、absolute或fixed時，它們同時會使用“盒子偏移”(box offset)屬性指定盒子應(yīng)如何定位。第15頁

7、屬 性含 義top從包含元素頂部起的偏移位置left從包含元素左側(cè)起的偏移位置bottom從包含元素底部起的偏移位置right從包含元素右側(cè)起的偏移位置盒子偏移屬性的值相對定位相對定位能夠?qū)⒑凶右苿拥脚c其在正常流中的位置相關(guān)聯(lián)的某個位置。比如將一個盒子從其在正常流中應(yīng)該出現(xiàn)的位置下移30像素，或右移100像素。它將會根據(jù)盒子偏移屬性從其在正常流中的位置進行轉(zhuǎn)移。第16頁相對定位的顯示效果絕對定位絕對定位是將元素從正常流中取出，并固定其位置。可以為元素應(yīng)用值為absolute的position屬性，指定其內(nèi)容進行絕對定位。之后則可以使用盒子偏移屬性對其進行定位。盒子偏移將盒子的位置固定于與“包含

8、塊”(containing block)相關(guān)聯(lián)的位置包含塊與包含元素稍微不同，因為它特指position屬性被設(shè)置為relative、absolute或fixed的包含元素。第17頁固定定位position屬性中需要了解的最后一個值是fixed。此值指定不僅元素的內(nèi)容應(yīng)完全從正常流中移除，該盒子在用戶上下滾動頁面時也不應(yīng)該移動。Firefox、Safari以及Chrome為固定定位提供支持， IE7是IE瀏覽器中第一個對其提供支持的版本。第18頁z-index屬性使用絕對和相對定位的元素經(jīng)常會與其他元素出現(xiàn)重疊。當(dāng)發(fā)生這種情況時，默認的行為是第一個元素位于后來元素之下。這被稱作“堆疊上下文”(

9、stacking context)?？梢允褂脄-index屬性指定哪個盒子位于頂部。在圖形設(shè)計方案中，堆疊上下文與使用“提高到頂部”以及“送至底部”的功能類似。z-index屬性的值是一個數(shù)字，數(shù)字的值越大就越接近元素顯示位置的頂部。例如，一個z-index值為10的項目會出現(xiàn)于z-index值為5的項之上。第19頁使用float屬性實現(xiàn)流動float屬性能夠?qū)⒛硞€元素從正常流中抽取出來，并將其盡可能遠地放置在包含盒子的左側(cè)或右側(cè)。包含元素中的其他內(nèi)容則會圍繞關(guān)聯(lián)有float屬性的元素進行流動，就如文本與其他元素能夠圍繞圖片流動一樣。任何時候為一個元素指定float屬性時，就必須設(shè)置width

10、屬性以指定盒子應(yīng)該占據(jù)的寬度。否則，它將自動占據(jù)包含盒子100%的寬度，不會留給圍繞它流動的內(nèi)容任何空間，從而使它顯示的效果如同一個普通的塊級元素。第20頁clear屬性clear屬性在使用浮動盒子時特別有用。內(nèi)容能夠圍繞浮動元素流動。然而，如果希望浮動元素旁邊沒有任何內(nèi)容，而周圍的內(nèi)容被推至浮動元素之下。這就是clear屬性的用途。第21頁第22頁主要內(nèi)容11.1 盒子模型11.2 使用CSS定位與布局11.3 構(gòu)建頁面布局實例11.4 媒體查詢11.5 CSS3布局11.6 本章小結(jié)11.3 構(gòu)建頁面布局實例利用CSS控制頁面布局。第23頁網(wǎng)頁在Google Chrome和IE7+中的效果

11、第24頁主要內(nèi)容11.1 盒子模型11.2 使用CSS定位與布局11.3 構(gòu)建頁面布局實例11.4 媒體查詢11.5 CSS3布局11.6 本章小結(jié)11.4 媒體查詢媒體查詢擴展了CSS的media規(guī)則（通常用于為打印或語音瀏覽器提供樣式表），以及HTML中的media特性，并添加了顯示尺寸、色深以及高寬比等可測試的特性。這能夠基于設(shè)備或瀏覽器特征來調(diào)整設(shè)計。媒體查詢在“響應(yīng)式網(wǎng)頁設(shè)計”(Responsive Web Design)中扮演著重要的角色，這是一種設(shè)計開發(fā)網(wǎng)站的新技術(shù)，允許網(wǎng)站在類型廣泛的設(shè)備中進行顯示。第25頁第26頁主要內(nèi)容11.1 盒子模型11.2 使用CSS定位與布局11.

12、3 構(gòu)建頁面布局實例11.4 媒體查詢11.5 CSS3布局11.6 本章小結(jié)第27頁11.5 CSS3布局CSS3定位布局模塊CSS3碎片模塊多列布局模塊CSS3區(qū)域模塊CSS3排除和形狀模塊CSS3分頁媒體模塊用于分頁媒體模塊的CSS生成內(nèi)容彈性盒子布局模塊CSS網(wǎng)格布局模塊CSS3定位布局模塊CSS3定位布局模塊規(guī)范包括基于position屬性的定位模式。CSS3版本引入了兩個新值：position: center;提供了簡單的水平和垂直居中功能，使用top、right、bottom和left屬性可以偏移；而position: page;創(chuàng)建了一個絕對定位的盒子，這個盒子相對于最初的包含

13、塊來定位，可以在頁面媒體中標(biāo)上頁號。這些屬性還有offset組，其行為類似于定位屬性top、right等，可用于多語言站點。第28頁CSS3碎片模塊CSS3碎片模塊輔助規(guī)范為分隔符(breaking)定義了屬性和規(guī)則，即元素因為CSS布局分為兩個部分時，元素的內(nèi)容如何處理。屬性用于設(shè)置或控制多列布局中的列、CSS中的區(qū)域以及CSS Flexible Box Layout中的彈性容器之間的分隔符。它們與前面在CSS Paged Media Module Level 3中提及的break-*屬性緊密相關(guān)。第29頁多列布局模塊多列布局會使文本跨越多個獨立的文本塊流動，在印刷界是一種常見的設(shè)計元素，但

14、在網(wǎng)頁中它從未成為可能。多列布局模塊改變了這種情況，它能夠為單一元素設(shè)置多個列。有兩種方式可以為一個元素設(shè)置多個列。第一種方式是使用column-count屬性，它簡單地允許你為元素設(shè)置列的數(shù)量。另一種方式是使用column-width屬性，它能夠為每一列設(shè)置寬度。在使用寬度可變元素時，這樣做有助于希望通過控制列的寬度以提供更好可讀性的情況。第30頁CSS3區(qū)域模塊大多數(shù)桌面發(fā)布(DTP)程序都允許把一系列文本框鏈接起來，把它們用作其內(nèi)容的一個盒子。如果在第一個盒子中顯示的內(nèi)容太多，內(nèi)容就會按順序自動流動到后續(xù)的盒子中。CSS區(qū)域完成相同的功能使用flow-into屬性把元素賦予指定的流。接著

15、這個元素的內(nèi)容會流動到一組區(qū)域中，這些區(qū)域按列出的順序，定義為flow-from屬性的同名選擇器。第31頁CSS3排除和形狀模塊浮動功能的一個有趣的方面是非浮動的塊級元素忽略浮動元素的方式，但這些方框的行框封裝了它們。這個規(guī)范的CSS Exclusions部分擴展了將內(nèi)聯(lián)內(nèi)容應(yīng)用于任何元素(使用任意定位模式)的功能。文本可以流向某形狀(CSS Shapes部分)的內(nèi)部和周圍，并在單個元素的內(nèi)部和外部使用不同的形狀。這使文本流向圖像的周圍或內(nèi)部形狀等雜志技術(shù)更容易實現(xiàn)。第32頁CSS3分頁媒體模塊這個規(guī)范詳細描述了頁面媒體格式化模型，在打印網(wǎng)頁時，根據(jù)頁框來使用它。它可以用page規(guī)則(和封裝頁

16、面的區(qū)域的相關(guān)規(guī)則，例如top-center和bottom-right-corner)、:left、:right和:first偽類來設(shè)置樣式。這些都可以在media規(guī)則中使用，規(guī)范還定義了與頁面相關(guān)的屬性。第33頁用于分頁媒體模塊的CSS生成內(nèi)容這個規(guī)范為生成的內(nèi)容提供樣式，例如自動的頁眉、腳注和跨引用。它還包含overflow-style屬性的4個新值paged-x、paged-y、paged-x-controls和paged-y-controls。它們會提供基于頁面的界面，有或沒有相關(guān)的導(dǎo)航控件。這些樣式適合與CSS Paged Media 和 Multi-column Layout規(guī)范一

17、起使用。第34頁彈性盒子布局模塊Flexible Box Model（或Flexbox）開始于Firefox用戶界面的建立。Flexbox規(guī)范用布局屬性和在水平或垂直方向上排列的盒子，定義了“為界面設(shè)計進行優(yōu)化的CSS盒子模型”，并深度控制盒子如何對齊，如何相對于可用的空間進行伸縮(flex)。第35頁CSS網(wǎng)格布局模塊網(wǎng)格布局是“一個真正的布局”方法，它基于網(wǎng)格，與源順序沒有任何聯(lián)系，允許給不可能使用表格布局或其他CSS 2.1布局模式的頁面建立布局。網(wǎng)格由水平和垂直網(wǎng)格線組成，它們包含了網(wǎng)格字段。要建立網(wǎng)格，可以創(chuàng)建網(wǎng)格線、網(wǎng)格字段，或者創(chuàng)建兩者，任何未定義的、但必須的線條或字段會自動添加。網(wǎng)格的塊級、替代和inline-block子元素是網(wǎng)格框，可以根據(jù)指定的網(wǎng)格字段、網(wǎng)格線或指定的網(wǎng)格線標(biāo)尺來定位。網(wǎng)格框可以跨越多行，將內(nèi)容對齊到網(wǎng)格線時，重疊網(wǎng)格框，甚至將它們定位到同一個位置，控制它們的堆疊次序。第36頁第37頁主要內(nèi)容11.1 盒子模型11.