第10章網頁布局主講教師：朱鐵櫻《Web前端開發》10.1布局概述布局是指對網頁中的元素進行合理的排布，使網頁中的元素排列清晰、美觀易讀。排版后未排版標準文檔流：指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列。這也是元素默認的排列方式。網頁設計中布局方法有多種，本項目重點介紹兩種布局方法：浮動布局和彈性布局。彈性布局是一種平面布局思維，其核心是兩根軸線——主軸和交叉軸。這兩根軸線可以處理元素水平或垂直方向上的分布和排列。彈性布局浮動布局浮動布局是指通過浮動屬性來實現元素橫向排列的一種布局模式。浮動布局主要依靠DIV+CSS技術來實現。DIV負責內容區域的分配，CSS負責樣式效果的呈現。10.1布局概述單列布局是網頁布局的基礎，所有復雜的布局都是在單列布局上演變而來的。10.1布局概述兩列布局是將網頁內容被分為了左右兩部分。這樣能夠合理利用頁面空間，讓頁面內容看起來更加豐富。10.1布局概述三列布局是兩列布局的演變，只是將主體內容分成了左、中、右三部分。10.1布局概述為了提高網頁制作的效率，在布局時通常需要遵循一定的布局流程，具體如下。步驟一：確定頁面的版心寬度10.1布局概述為了網站的美觀，網頁中的一些模塊，例如頭部、導航、焦點圖或底部等經常需要通欄顯示。版心：頁面的有效使用面積，是主要元素以及內容所在的區域。常見的寬度值為1000像素、1200像素、1400像素等。在運用CSS布局之前，首先對頁面有一個整體的規劃，包括頁面中有哪些模塊，以及各模塊之間關系。步驟二：分析頁面中的模塊10.1布局概述當分析完頁面模塊后，可以使用浮動布局或者彈性布局控制網頁的各個模塊。初學者在制作網頁時，一定要養成分析頁面布局的習慣，這樣可以提高網頁制作的效率。步驟三：控制網頁的各個模塊10.1布局概述注意：初學者在制作網頁時，一定要養成實時測試頁面的好習慣，避免完成頁面的制作后，出現難以調試的bug或兼容性問題。10.1布局概述網頁模塊的命名如果沒有統一的命名規范進行約束，隨意命名網頁模塊，就會降低網頁代碼的可讀性，讓整個網站的后續維護工作很難進行。通常網頁模塊的命名需要遵循以下幾個原則。不能占用關鍵字（例如id="h3"）避免使用中文字符（例如id="導航欄"）用最少的字母達到最容易理解的意義不能以數字開頭命名（例如id="1box"）網頁模塊命名規范大駝峰：單詞首字母均采用大寫。小駝峰：第一個單詞首字母小寫。駝峰命名由小寫字母和下畫線組成，單詞之間用下畫線連接。蛇形命名對于一些復雜的網頁模塊，經常使用一些長詞或詞組來命名。在使用長詞或詞組命名網頁模塊時，可以使用“-”（中橫線）連接，也可以使用一些編程中常用的命名方法，具體如下。10.1布局概述FirstNamefirstNamefirst_name網頁模塊常用的命名方式-1相關模塊命名相關模塊命名頭header內容content/container導航nav尾footer側欄sidebar欄目column左邊、右邊、中間leftrightcenter登錄條loginbar標志logo廣告banner頁面主體main熱點hot10.1布局概述相關模塊命名相關模塊命名新聞news下載download子導航subnav菜單menu子菜單submenu搜索search友情鏈接frIEndlink版權copyright滾動scroll標簽頁tab文章列表list提示信息msg網頁模塊常用的命名方式-210.1布局概述相關模塊命名相關模塊命名小技巧tips欄目標題title加入joinus指南guild服務service

注冊register狀態status投票vote合作伙伴partner

小技巧tips欄目標題title網頁模塊常用的命名方式-310.1布局概述CSS文件命名CSS文件命名主要樣式master基本樣式base模塊樣式module版面樣式layout主題themes專欄columns文字font表單forms打印print

CSS文件常用的命名方式-410.1布局概述標準文檔流組成塊級元素（block）<h1>…<h6>、<p>、<div>、列表行內元素（inline）<span>、<a>、<img/>、<strong>...行內塊元素（inline-block）行內標簽可以包含于塊級標簽中，成為它的子元素，而反過來則不成立。!10.1布局概述元素的分類值說明block塊級元素的默認值，元素會被顯示為塊級元素，該元素前后會帶有換行符inline內聯元素的默認值。元素會被顯示為內聯元素，該元素前后沒有換行符inline-block行內塊元素，元素既具有內聯元素的特性，也具有塊元素的特性none設置元素不會被顯示17/3910.1布局概述display屬性塊級元素與行級元素的轉變控制塊元素排到一行控制元素的顯示和隱藏10.2浮動浮動屬性也被稱為float屬性，用于設置元素浮動。float屬性的基本語法格式選擇器{float:屬性值;}選擇器用于選擇設置浮動的元素。float屬性用于設置浮動。float屬性的常用屬性值有三個，具體如下。屬性值含義left元素向左浮動right元素向右浮動none元素不浮動（默認屬性值）10.2浮動10.2浮動元素的浮動練習由于浮動元素不再占用原文檔流的位置，所以它會對頁面中其他元素的排版產生影響。例如，下圖的段落文本，受到其周圍元素浮動的影響，產生了混排的效果。這時，如果要避免浮動對段落文本的影響，讓<p>標簽獨立顯示，就需要在<p>標簽中添加CSS樣式清除浮動。10.3清除浮動10.3清除浮動在CSS中，常用clear屬性清除浮動。clear屬性的基本語法格式選擇器{clear:屬性值;}屬性值含義left清除左側浮動的影響right清除右側浮動的影響both同時清除左右兩側浮動的影響10.3清除浮動1.使用空標簽清除浮動在浮動元素之后添加空標簽，并對該標簽應用“clear:both”樣式。2.使用overflow屬性清除浮動對元素應用“overflow:hidden;”樣式。3.使用after偽對象清除浮動（1）需要清除浮動的標簽設置“height:0;”樣式。（2）需要在偽對象中設置content屬性，屬性值可以為空。10.3清除浮動案例演示由于子元素和父元素為嵌套關系，不存在左右對應位置，所以使用clear屬性并不能清除子元素浮動對父元素的影響。【結論】10.3清除浮動10.3清除浮動當盒子內容超出盒子自身的大小時，內容就會溢出。overflow屬性選擇器{overflow:屬性值;}overflow屬性用于規定溢出內容的顯示狀態。例如，隱藏溢出內容、通過滾動條顯示溢出內容。overflow屬性的基本語法格式屬性值描述visible內容不會被修剪，呈現在元素框之外（默認屬性值）hidden溢出內容會被修剪，并且被修剪的內容是不可見的auto溢出內容會被隱藏，有溢出內容的一側會產生滾動條，可以通過滾動條查看溢出內容scroll溢出內容會被隱藏，無論是否有溢出內容，瀏覽器會始終顯示滾動條10.3清除浮動10.3清除浮動overflow:visibleoverflow:hiddenoverflow:autooverflow:scroll10.4定位制作網頁時，如果希望網頁中的元素出現在網頁中某個特定的位置，就需要對元素進行精確定位。精確定位元素時，需要設置定位模式和邊偏移兩部分。定位模式邊偏移定位模式值描述static靜態定位（默認定位方式）relative相對定位，相對于其原文檔流的位置進行定位absolute絕對定位，相對于其上一個已經定位的父元素進行定位fixed固定定位，相對于瀏覽器窗口進行定位選擇器{position:屬性值;}position屬性的基本語法格式在CSS中，position屬性用于設置元素的定位模式。10.4定位邊偏移在CSS中，通過邊偏移屬性top、bottom、left或right，可以精確定義定位元素的位置。邊偏移屬性的具體介紹如下。邊偏移屬性描述top設置頂端偏移量，定義元素相對于其父元素上邊線的距離bottom設置底部偏移量，定義元素相對于其父元素下邊線的距離left設置左側偏移量，定義元素相對于其父元素左邊線的距離right設置右側偏移量，定義元素相對于其父元素右邊線的距離10.4定位10.4定位當position屬性的取值為static時，可以將標簽定位于靜態位置。所謂靜態位置就是各個標簽在HTML文檔流中默認的位置。當沒有定義position屬性時，說明該標簽沒有自己的位置。這個說法正確嗎？10.4.1靜態定位錯誤。任何標簽在默認狀態下都會以靜態定位來確定自己的位置，所以當沒有定義position屬性時，并不是說明該標簽沒有自己的位置，它會遵循默認值顯示為靜態位置。10.4定位10.4.1靜態定位10.4定位當position屬性的取值為relative時，可以將標簽相對定位。10.4.2相對定位10.4定位當position屬性的取值為absolute時，可以將標簽的定位模式設置為絕對定位。例如，設置絕對定位如下。10.4.3絕對定位如果在網頁布局時，只對元素應用絕對定位，當用戶放大或縮小瀏覽器窗口時，網頁布局可能因某些元素位置改變變得混亂。該怎么辦？在網頁布局中，一般需要子元素相對于其父元素的位置保持不變，也就是讓子元素依據其父元素的位置進行絕對定位，父元素進行相對定位。如果父元素不需要移動位置，可以不對父元素設置偏移量。這樣父元素既不會失去標準文檔流中的空間，同時還能保證子元素依據父元素準確定位。10.4定位10.4.3絕對定位父相子絕10.4定位注意：1.如果僅對標簽設置絕對定位，不設置邊偏移，則標簽的位置不變，但該標簽不再占用標準文檔流中的空間，會與上移的后續標簽重疊。2.定義多個邊偏移屬性時，如果left和right參數值沖突，以left參數值為準；如果top和bottom參數值沖突，以top參數值為準。10.4.3絕對定位10.4定位當position屬性的取值為fixed時，即可將標簽的定位模式設置為固定定位。當對元素設置固定定位后，該元素將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動，也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。10.4.4固定定位10.4定位當對多個元素同時設置定位時，定位標簽之間有可能會發生重疊定位導致重疊z-index可以調整重疊定位元素的堆疊順序，取值為正整數、負整數和0。數值越大，標簽越居上。解決重疊問題10.4.5層疊等級屬性浮動和定位練習10.5彈性布局面對多終端設備出現的尷尬分辨率太大，網頁兩邊留白太多分辨率太小，頁面顯示不完全*10.5彈性布局固定布局窄屏下的顯示效果*如何解決上述多終端設備出現的尷尬？浮動+百分比布局彈性布局固定布局寬屏下的顯示效果10.5彈性布局浮動+百分比布局好處網頁內容寬度自適應多設備都適用.box{width:100%;border:1pxsolid#000000;padding:10px;}aside{width:30%;float:left;background:red;padding:10px;}article{width:65%;float:left;margin-left:10px;background:yellow;}*10.5彈性布局彈性布局是指元素可以根據顯示區域大小進行自適應的布局模式，該布局模式可以很方便的對元素進行分布和對齊。Flex布局的優勢可以讓盒子里面的元素排在一行盒子里面的元素是高度相同10.5.1什么是彈性布局（1）彈性布局原理彈性布局采用軸式布局，在彈性布局中默認存在兩條軸——主軸和交叉軸。①主軸：用于設置元素的排列方向。②交叉軸：用于設置元素垂直于主軸的排列方向。當主軸方向為水平時，交叉軸方向為垂直。當主軸方向為垂直時，交叉軸方向為水平。10.5彈性布局10.5.1什么是彈性布局（2）創建Flex容器為某個元素指定display屬性，并設置屬性值為flex或inline-flex即可創建Flex容器。10.5彈性布局10.5.1什么是彈性布局Flex容器屬性是指為轉換為Flex容器的HTML標簽添加的CSS屬性，可以設置容器中Flex項目的排列樣式。Flex容器屬性包括flex-direction屬性、flex-wrap屬性、flex-flow屬性、justify-content屬性、align-items屬性、align-content屬性。屬性描述flex-direction指定彈性盒子中子元素的排列方式flex-wrap設置當彈性盒子的子元素超出父容器時是否換行flex-flowflex-direction和flex-wrap兩個屬性的簡寫justify-content設置彈性盒子中元素在主軸（橫軸）方向上的對齊方式align-items設置彈性盒子中元素在側軸（縱軸）方向上的對齊方式align-content修改flex-wrap屬性的行為，類似align-items，但不是設置子元素對齊，而是設置行對齊10.5彈性布局10.5.2容器屬性flex-direction屬性用于設置主軸上Flex項目的排列方向。（1）flex-direction屬性主軸為水平方向，Flex項目排列起點在左側，按照自左至右排列。row主軸為垂直方向，Flex項目排列起點在上端，按照自上至下排列。column主軸為水平方向，Flex項目排列起點在右側，按照自右至左排列。row-reverse主軸為垂直方向，Flex項目排列起點在下端，按照自下至上排列。column-reverse①③④②flex-direction屬性的屬性值10.5彈性布局10.5.2容器屬性flex-wrap屬性用于設置Flex項目是否換行排列。nowrapflex-wrap屬性的屬性值Flex項目不換行，排列在一排wrapFlex項目換行，主軸為水平方向，第一行在上方，主軸為垂直方向，第一列在左側。wrap-reverseFlex項目換行，主軸為水平方向，第一行在下方，主軸為垂直方向，第一列在右側。（2）flex-wrap屬性10.5彈性布局10.5.2容器屬性flex-flow屬性是flex-direction屬性和flex-wrap屬性的復合屬性，可以同時設置Flex項目的排列方向和換行效果。例如：flex-direction:column-reverse;flex-wrap:wrap-reverse;上述代碼等價于：flex-flow:column-reversewrap-reverse;（3）flex-flow屬性10.5彈性布局10.5.2容器屬性（4）justify-content屬性justify-content屬性用于設置Flex項目在主軸上的對齊方式。flex-startflex-endcenterspace-betweenspace-aroundFlex項目相對于主軸排列起點對齊。Flex項目相對于主軸排列終點。Flex項目相對于主軸居中對齊。Flex項目相對于主軸兩端對齊，并且Flex項目之間的間距相等。Flex項目之間間距相等，兩端保留間距相等，兩端保留間距為Flex項目之間間距的一半。10.5彈性布局10.5.2容器屬性align-items屬性用于設置Flex項目在交叉軸上的對齊方式。flex-startflex-endcenterbaselinestretchFlex項目在交叉軸的排列起點對齊Flex項目在交叉軸的排列終點對齊。Flex項目在交叉軸的中間位置對齊。Flex項目的第一行文字的基線對齊。如果Flex項目未設置高度或者設為auto，該Flex項目將占滿整個容器的高度。（5）align-items屬性10.5彈性布局10.5.2容器屬性align-content屬性將所有行作為一個整體，設置對齊方式。（6）align-content屬性10.5彈性布局10.5.2容器屬性Flex容器屬性用于整體控制Flex項目的排列方式，如果想要單獨控制某個Flex項目，就需要為這個Flex項目指定對應的屬性，這些屬性被稱為Flex項目屬性。Flex項目屬性包括order屬性、flex-grow屬性、flex-shrink屬性、flex-basis屬性、flex屬性、align-self屬性。屬性描述order設置容器中項目的排列順序，數值越小，排列越靠前，默認為0。flex-grow定義容器中項目的放大比例，默認為0。flex-shrink定義容器中項目的縮小比例，默認為1。flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（mainsize），它的默認值為auto。flexflex-grow，flex-shrink，flex-basis三個屬性的簡寫。默認值為01auto，后兩個屬性可選。align-self在容器中項目上使用，允許單個項目有與其他項目不一樣的對齊方式，默認值為auto，用來覆蓋容器的align-items屬性10.5彈性布局10.5.3項目屬性order屬性用于設置Flex項目的排列位置，屬性值為數字。數字越小，該Flex項目排列位置越靠前，默認屬性值為0。（1）order屬性10.5彈性布局10.5.3項目屬性flex-grow屬性用于設置Flex項目的擴展比例，其屬性值為0和正整數。（2）flex-grow屬性flex-grow屬性默認屬性值為0，此時Flex元素不會擴展。當取值為正整數時，Flex元素會按照對應的比例占據剩余空間。10.5彈性布局10.5.3項目屬性（2）flex-grow屬性10.5彈性布局10.5.3項目屬性flex-shrink屬性用于設置Flex項目的收縮比例，取值為0和正整數。（3）flex-shrink屬性flex-shrink屬性默認屬性值為1，當Flex容器空間不足時，Flex元素將等比例自動收縮。將某個Flex元素的flex-shrink屬性值設置為0，則該Flex元素不收縮，會溢出Flex容器將flex-shrink屬性值設置為其他正整數，Flex元素將按照設置數字比例進行收縮。10.5彈性布局10.5.3項目屬性flex-basis屬性用設置Flex項目在擴展或收縮之前的尺寸。flex-basis屬性