Web前端開發(fā)第12章布局1本章主要內(nèi)容定位與布局的基本屬性多列布局盒布局自適應(yīng)布局案例：網(wǎng)頁布局21.定位與布局的基本屬性布局是指對網(wǎng)頁中各個構(gòu)成要素的合理編排，是呈現(xiàn)頁面內(nèi)容的基礎(chǔ)。合理的布局將有效的提高頁面的可讀性，提升用戶體驗。通過定位與布局的基本屬性，可以確定元素的位置，并實現(xiàn)頁面多種多樣的布局。31.1基本屬性1.定位與布局的基本屬性41.1基本屬性1.定位與布局的基本屬性51.1基本屬性1.定位與布局的基本屬性外邊距屬性margin屬性可以設(shè)定元素的所有外邊距。該屬性可以通過1-4個正負值進行設(shè)置，其值可以為長度、百分比等單位，也可從父元素繼承外邊距。可以通過margin-top、margin-right、margin-bottom、margin-left屬性分別設(shè)置。61.2外邊距與內(nèi)邊距1.定位與布局的基本屬性具體語法：71.2外邊距與內(nèi)邊距1.定位與布局的基本屬性行內(nèi)元素的外邊距當(dāng)行內(nèi)元素定義外邊距時，只能看到左右外邊距對布局的影響，但是上下外邊距猶如不存在一般，不會對周圍元素產(chǎn)生影響。塊級元素的外邊距對于塊級元素來說，外邊距都能夠很好的被解析。可以用“display”屬性改變元素的表現(xiàn)形式來保證元素對外邊距的支持。81.2外邊距與內(nèi)邊距1.定位與布局的基本屬性內(nèi)邊距屬性padding屬性可以設(shè)定元素的所有內(nèi)邊距。該屬性可以通過1-4個正負值進行設(shè)置，其值可以為像素、百分比等單位，也可從父元素繼承外邊距?？梢酝ㄟ^padding-top、padding-right、padding-bottom、padding-left屬性分別設(shè)置。91.2外邊距與內(nèi)邊距1.定位與布局的基本屬性具體語法：101.2外邊距與內(nèi)邊距1.定位與布局的基本屬性float網(wǎng)頁的布局主要通過float屬性來實現(xiàn)，float屬性定義元素在哪個方向浮動。屬性值有以下四種情況：left定義向左浮動。right定義向右浮動。none為float屬性的默認值，表示元素不浮動，并會顯示其在頁面中出現(xiàn)的位置。inherit規(guī)定應(yīng)該從父元素繼承float屬性的值。111.3浮動布局1.定位與布局的基本屬性浮動元素特性當(dāng)一個元素被設(shè)置為浮動元素后，元素本身的屬性會發(fā)生一些改變，具體如下:空間的改變。位置的改變。布局環(huán)繞。當(dāng)元素被定義為浮動顯示時，它會自動成為一個塊狀元素，相當(dāng)于定義了“display:block;”。但是塊級元素會自動伸張寬度，占據(jù)一行位置，且塊級元素會附加換行符，所以在同一行內(nèi)只能顯示一個塊級元素。而浮動元素雖然擁有塊級元素的特性，但是它并沒有上述表現(xiàn)，這時它更像行內(nèi)元素那樣收縮顯示。121.3浮動布局13現(xiàn)場演示：案例12-01：浮動元素的空間案例12-02：浮動元素的位置案例12-03：浮動元素的環(huán)繞案例12-04：圖文混排1.定位與布局的基本屬性clear屬性規(guī)定元素的哪一側(cè)不允許存在其他浮動元素，屬性值有五種情況：left、right、bothleft、right、both分別規(guī)定在左側(cè)不允許浮動元素、在右側(cè)不允許浮動元素和在左右兩側(cè)均不允許浮動元素。nonenone為clear元素的默認值，允許浮動元素出現(xiàn)在兩側(cè)。inheritinherit規(guī)定應(yīng)該從父元素繼承clear屬性的值。141.3浮動布局1.定位與布局的基本屬性元素浮動以后，其所在的位置會被下方不浮動的元素填充掉，而有些時候這樣的填充會破壞頁面布局，clear元素可以解決這個問題。在不浮動元素中添加與浮動元素float屬性值相同的clear屬性值，會使不浮動元素顯示在浮動元素的下邊距邊界之下。浮動元素也可以添加clear屬性，添加的clear屬性的屬性值只有和float屬性的屬性值相同時才能起作用，即當(dāng)元素向左浮動時只能清除元素的左浮動，而不能將屬性值設(shè)為清除右浮動。151.3浮動布局16現(xiàn)場演示：案例12-05：清除浮動1.定位與布局的基本屬性定位坐標值為了靈活的定位頁面元素，CSS定義了4個坐標屬性：top、right、bottom和left。通過這些屬性的聯(lián)合使用，可包含塊的4個內(nèi)頂角來定位元素在頁面中的位置。top屬性表示定位元素頂邊外壁到包含塊元素頂部內(nèi)壁的距離。right屬性表示定位元素右邊外壁到包含塊元素右側(cè)內(nèi)壁的距離。left屬性表示定位元素左邊外壁到包含塊元素左側(cè)內(nèi)壁的距離。bottom屬性表示定位元素底邊外壁到包含塊元素底部內(nèi)壁的距離。171.4定位布局1.定位與布局的基本屬性positionposition屬性用于確定元素的位置，該屬性可將圖片放置到任何位置，也可以使導(dǎo)航始終顯示于頁面最上方。CSS的定位核心正是基于這個屬性實現(xiàn)的。屬性值有五種情況。staticstatic為position的默認屬性值，沒有定位，元素出現(xiàn)在正常流中（忽略top,bottom,left,right或者z-index聲明）。任何元素在默認的狀態(tài)下都會以靜態(tài)定位來確定自己的位置，所以當(dāng)沒有定義position時，并不說明該元素沒有自己的位置，它會遵循默認值顯示為靜態(tài)位置。在靜態(tài)位置下，開發(fā)人員無法通過坐標值（top、bottom、left和right）來改變它的位置。181.4定位布局1.定位與布局的基本屬性positionabsoluteabsolute可用于生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過left、top、right、bottom屬性進行設(shè)置。當(dāng)position屬性取值為absolute時，程序就會把元素從文檔流中拖出來，根據(jù)某個參照物坐標來確定顯示位置。絕對定位是網(wǎng)頁精準定位的基本方法。如果結(jié)合left、right、top、bottom坐標屬性進行精確定位，結(jié)合z-index屬性排列元素覆蓋順序，同時通過clip和visiblity屬性裁切、顯示或隱藏元素對象或部分區(qū)域，就可以設(shè)計出豐富多樣的網(wǎng)頁布局效果。191.4定位布局20現(xiàn)場演示：案例12-06：絕對定位1.定位與布局的基本屬性positionfixedfixed可用于生成固定定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過top、right、bottom、left屬性進行定義。固定定位是絕對定位的一種特殊形式，它是以瀏覽器作為參照物來定義網(wǎng)頁元素的。如果定義某個元素固定顯示而不受文檔流的影響，也不受包含塊的位置影響，它始終以瀏覽器窗口來定位自己的顯示位置。不管瀏覽器的滾動條如何滾動，也不管瀏覽器窗口大小如何變化，該元素都會顯示在瀏覽器窗口內(nèi)。211.4定位布局22現(xiàn)場演示：案例12-07：fixed屬性值1.定位與布局的基本屬性positionrelativerelative可用于生成相對定位的元素，相對于其正常位置進行定位。例如，"left:20px"會向元素的左側(cè)位置添加20像素。相對定位是一種折中的定位方法，是在靜態(tài)定位和絕對定位之間取的一個平衡點。所謂相對定位就是使被應(yīng)用元素不脫離文檔流，卻能通過坐標值以原始位置為參照物進行偏移。inheritinherit用于從父元素繼承position屬性的值。231.4定位布局24現(xiàn)場演示：案例12-08：相對定位1.定位與布局的基本屬性定位層疊CSS可通過z-index屬性來排列不同定位元素之間的層疊順序。該屬性可以設(shè)置為任意的整數(shù)值，數(shù)值越大，所排列的順序就越靠上（前）。251.4定位布局26現(xiàn)場演示：案例12-09：定位層疊1.定位與布局的基本屬性定位與參照定位是網(wǎng)頁布局的重中之重，為頁面中每個構(gòu)成要素找到它應(yīng)該待的位置是頁面布局的基礎(chǔ)。position屬性專門用于頁面布局，但因其復(fù)雜度較高很難被初學(xué)者掌握，下面會通過一個案例來講解position屬性中的定位與參照。在絕對定位的父級沒有設(shè)定position屬性時，將以瀏覽器左上角為參照點進行定位；當(dāng)父級設(shè)定position屬性值時，將以父級為參照點進行定位。271.4定位布局28現(xiàn)場演示：案例12-10：定位與參照2.多列布局使用float屬性或position屬性進行頁面布局時有一個比較明顯的缺點，就是多列的div元素間是各自獨立的。如果在第一列div元素中加入一些內(nèi)容，將會使得兩列元素底部不能對齊，多出一塊空白的區(qū)域。這種情況在多列文章排版時顯得極為明顯。292.1基本知識2.多列布局基本屬性：302.2基本屬性2.多列布局columns是多列布局的基本屬性。該屬性可以同時定義列數(shù)和每列的寬度。相當(dāng)于同時指定了column-width、column-count屬性。目前，Webkit引擎支持-webkit-columns私有屬性，MozillaGecko引擎支持-moz-columns私有屬性。具體語法：312.3多列布局屬性2.多列布局column-width屬性可以定義單列顯示的寬度。該屬性可以與其他多列布局屬性配合使用，也可以單獨使用。具體語法：column-width可以與column-count屬性配合使用，設(shè)定固定列數(shù)、列寬的布局效果，也可以單獨使用，限制模塊的單列寬度，當(dāng)超出寬度時，則會自動以多列進行顯示。322.4列寬與列數(shù)2.多列布局具體語法：column-count屬性可以定義顯示的列數(shù)，取值為大于0的整數(shù)。如果column-width和column-count屬性沒有明確的值，則默認為最大列數(shù)。column-width、column-count這兩個屬性可以相互影響，指定的欄目寬度、欄目數(shù)并不是絕對的。當(dāng)分欄內(nèi)容所在容器的寬度大于column-width*column-count+間距時，有的瀏覽器會增加欄目數(shù)，有的瀏覽器會增加欄目寬度。332.4列寬與列數(shù)2.多列布局具體語法：column-gap屬性可以定義兩列之間的間距，其默認值為normal，用于規(guī)定列間間隔為一個常規(guī)的間隔。W3C建議的值是1em。column-rule屬性用于指定欄目之間的分割條。該屬性可同時指定分割條的寬度、樣式、顏色。column-rule-width屬性的值為一個長度值，用于指定欄目之間分割條的寬度。column-rule-style屬性用于設(shè)置分割條的線型。該屬性支持的屬性值有none、dotted、dashed、solid、double、groove、ridge、inset、outset，這些屬性值與前面介紹的邊框線型的各屬性值的意義完全相同。column-rule-color屬性用于設(shè)置分隔條的顏色。342.5列邊距與列邊框2.多列布局具體語法：在報刊雜志中，經(jīng)常會看到文章標題跨列居中顯示。column-span屬性可以定義跨列顯示，也可以設(shè)置單列顯示，其屬性值默認為1，適用于靜態(tài)的、非浮動元素，代表只能在本欄中顯示。all屬性值則表示橫跨所有的列，并定位在列的Z軸上。352.6跨列布局2.多列布局具體語法：column-fill屬性可以定義欄目的高度是否統(tǒng)一。其屬性值有兩種情況：auto屬性值可以設(shè)置各列高度隨其內(nèi)容的變化而變化。balance屬性值是column-fill默認值，設(shè)置各列的高度根據(jù)內(nèi)容最多的那一列的高度進行統(tǒng)一。362.7列高37現(xiàn)場演示：案例12-11：多列布局3.盒布局CSS3引入了新的盒模型：彈性盒模型。該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用空間。使用該模型可以很輕松地創(chuàng)建自適應(yīng)瀏覽器窗口的流動布局，或自適應(yīng)字體大小的彈性布局。傳統(tǒng)的是基于HTML流在垂直方向上排列盒子，使用彈性盒布局可以規(guī)定特定的順序，也可以將其反轉(zhuǎn)。要開啟彈性盒布局，只需設(shè)置盒子的display屬性值為box（或inline-box）即可。在CSS3中，除了多列布局之外，還可以用盒布局解決float屬性或position屬性布局存在的問題。383.1基本知識3.盒布局基本屬性：393.2基本屬性3.盒布局box-flex屬性可將盒布局設(shè)置為彈性盒布局。Webkit引擎支持-webkit-box-flex私有屬性，MozillaGecko引擎支持-moz-box-flex私有屬性。默認情況下，盒子不具備彈性，如果box-flex的屬性值至少為1時，則變得富有彈性。如果盒子不具有彈性，它將盡可能的寬以使內(nèi)容可見且沒有任何溢出，其大小由width和height屬性值，或者min-height、min-width、max-height、max-width屬性值來決定。403.3使用自適應(yīng)寬度的彈性盒布局3.盒布局

413.3使用自適應(yīng)寬度的彈性盒布局3.盒布局

423.3使用自適應(yīng)寬度的彈性盒布局43現(xiàn)場演示：案例12-12：自適應(yīng)寬度的彈性盒布局3.盒布局使用彈性盒布局時，可以使用box-ordinal-group屬性來改變各元素的顯示順序?？稍诿總€元素中加入box-ordinal-group屬性，該屬性使用一個表示序號的整數(shù)屬性值，瀏覽器在顯示的時候根據(jù)該序號從小到大顯示這些元素。目前Webkit引擎支持-webkit-box-ordinal-group私有屬性，MozillaGecko引擎支持-moz-box-ordinal-group私有屬性。443.4改變元素的顯示順序45現(xiàn)場演示：案例12-13：改變元素的顯示順序3.盒布局box-direction可以簡單地將多個元素的排列方向從水平方向修改為垂直方向，或者從垂直方向修改為水平方向。目前Webkit引擎支持-webkit-box-direction私有屬性，MozillaGecko引擎支持-moz-box-direction私有屬性。其屬性值有三種情況：normal：以默認方向顯示子元素。reverse：以反方向顯示子元素。inherit：設(shè)定從父元素繼承box-direction屬性的值。463.5改變元素排列方向47現(xiàn)場演示：案例12-14：改變元素排列方向從案例中可以看到盒子并沒有自適應(yīng)于整個有邊框的div，box-flex屬性可以設(shè)置彈性的盒布局，使其充滿整個div。48現(xiàn)場演示：案例12-15：使用彈性盒布局消除空白3.盒布局如果box-flex屬性只對一個元素使用，可以使其寬度、高度自動擴大，讓瀏覽器或容器中所有元素的總寬度/總高度等于瀏覽器或容器的寬度/高度。在CSS3中也可以對多個元素使用box-flex屬性。案例12-16中box-flex的屬性值設(shè)為1，如果把box-flex的屬性值設(shè)為其他的整數(shù)，例如2，頁面結(jié)構(gòu)將發(fā)生變化。案例12-16中多個元素設(shè)置box-flex的屬性值均為1，元素將等分空白區(qū)域。使用瀏覽器的開發(fā)者模式對案例12-16進行調(diào)試，將box-flex的屬性值進行調(diào)整，元素將按比例填充空白區(qū)域。493.7對多個元素使用box-flex屬性50現(xiàn)場演示：案例12-16：多個元素使用box-flex值討論：使用瀏覽器調(diào)試工具進行參數(shù)調(diào)試，以觀察響應(yīng)的變化。3.盒布局使用盒布局時，可以使用box-pack屬性及box-align屬性來指定元素中文字、圖像及子元素水平方向或垂直方向的對齊方式。目前Webkit引擎支持-webkit-box-pack和-webkit-box-align私有屬性，MozillaGecko引擎支持-moz-pack和-webkit-box-align私有屬性。513.8對齊方式3.盒布局box-pack屬性可以用于設(shè)置子容器在水平軸上的空間分配方式，它共有四種可能值：start、end、justify、center。具體含義：start：所有子容器都分布在父容器的左側(cè)，右側(cè)留空。end：所有子容器都分布在父容器的右側(cè)，左側(cè)留空。justify：所有子容器平均分布（默認值）。center：平均分配父容器剩余的空間（能壓縮子容器的大小，并且有全局居中的效果）。523.8對齊方式3.盒布局box-align屬性用于管理子容器在豎軸上的空間分配方式，共有五個屬性值：start、end、center、baseline、stretch。具體含義：start：子容器從父容器頂部開始排列。end：子容器從父容器底部開始排列。center：子容器橫向居中。baseline：所有子容器沿同一基線排列。stretch：所有子容器和父容器保持同一高度（默認值）。533.8對齊方式54現(xiàn)場演示：案例12-17：定位布局使圖片居中案例12-18：盒布局使圖片居中3.盒布局通過使用傳統(tǒng)的浮動布局、CSS3新增的多列布局和CSS3新增的盒布局來實現(xiàn)簡單的三列布局，進行布局方式對比說明。553.9布局方式對比56現(xiàn)場演示：案例12-19：浮動布局案例12-20：盒布局案例12-21：多列布局3.盒布局使用float屬性或position屬性進行頁面布局時各列的div元素間是獨立的，不能統(tǒng)一的定義div的各種屬性。盒布局與多列布局的區(qū)別在于使用多列布局時，各列寬度必須是相等的，在指定每列寬度時，也只能為所有列指定一個統(tǒng)一的寬度。使用多列布局時，也不可能具體指定什么列顯示什么內(nèi)容，因此比較適用于顯示文章內(nèi)容，不適合用于安排整個網(wǎng)頁中各個元素組成的網(wǎng)頁結(jié)構(gòu)。573.9布局方式對比4.自適應(yīng)布局2010年，EthanMarcotte提出了“自適應(yīng)網(wǎng)頁設(shè)計”（ResponsiveWebDesign）這個名詞，指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。自適應(yīng)布局的特點是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個靜態(tài)布局，每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變），但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。584.1基本知識4.自適應(yīng)布局基本屬性：594.2基本屬性4.自適應(yīng)布局首先，在網(wǎng)頁代碼的頭部，加入一行viewport元標簽。<metaname="viewport"content="width=device-width,initial-scale=1">viewport是網(wǎng)頁默認的寬度和高度，上面這行代碼的意思是：網(wǎng)頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。所有主流瀏覽器都支持這個設(shè)置，包括IE9。對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。604.3允許網(wǎng)頁寬度自動調(diào)整4.自適應(yīng)布局由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。CSS代碼不能指定像素寬度，只能指定百分比寬度。614.4不使用絕對寬度4.自適應(yīng)布局字體也不能使用絕對大小（px），而只能使用相對大?。╡m），字體大小是頁面默認大小的100%，即16像素，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5），small