亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS中固定寬度布局的詳細教程

segmentfault   發(fā)布時間：2015-07-23 17:16:55   作者：dopppler   我要評論
這篇文章主要介紹了CSS中固定寬度布局的詳細教程,包括元素內(nèi)邊距和邊框等各種復(fù)雜的調(diào)試示例,極力推薦!需要的朋友可以參考下

.布局前的認知
1.1 三種基本方案

多欄布局有三種基本的實現(xiàn)方案：固定寬度、流動、彈性。

    固定寬度。布局的大小不會隨用戶調(diào)整瀏覽器窗口大小而變化，一般是 900 到 1100 像素寬（最常見的是 960 像素）。

    流動。布局的大小會隨用戶調(diào)整瀏覽器窗口大小而變化。（結(jié)合 CSS 媒體查詢，能夠適應(yīng)最大和最小的屏幕，業(yè)界稱之為 響應(yīng)式設(shè)計。）

    彈性。在瀏覽器窗口變寬時，不僅布局變寬，而且所有內(nèi)容元素的大小也會變化。（實現(xiàn)太過復(fù)雜，不多介紹。）

1.2 布局高度

多數(shù)情況下，布局中結(jié)構(gòu)化元素（乃至任何元素）的高度是 不必或者不應(yīng)該設(shè)定的。因為保持元素 height 屬性的默認值 auto 不變，才能使元素根據(jù)自己包含內(nèi)容的增加而在垂直方向上擴展。這樣擴展的元素會把下方的元素向下推，而布局也能隨內(nèi)容數(shù)量的增減而垂直伸縮。
1.3 布局寬度

為了使瀏覽器窗口寬度合理變化，布局能作出適當(dāng)?shù)恼{(diào)整，我們 需要精細地控制 布局寬度。
2.三欄-固定寬度布局

結(jié)構(gòu)如下：
2015723171927362.png (600×367)

上代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>三欄-固定寬度布局</title>   
  6.     <style>   
  7.         * {   
  8.             margin: 0;    
  9.             padding: 0;   
  10.         }   
  11.         #wrapper{   
  12.             width: 960px;   
  13.             margin: 0 auto;   
  14.             border:1px solid;   
  15.         }   
  16.         header{   
  17.             background: #f00;   
  18.         }   
  19.         nav{   
  20.             background: #dcd9c0;   
  21.             width: 150px;   
  22.             float:left;   
  23.         }   
  24.         article{   
  25.             background: #ffed53;   
  26.             width: 600px;   
  27.             float: left;   
  28.         }   
  29.         aside{   
  30.             background: #6a6b6c;   
  31.             width: 210px;   
  32.             float: left;   
  33.         }   
  34.         footer{   
  35.             clear:both;                
  36.             background: #6a6b6c;   
  37.         }   
  38.     </style>   
  39. </head>   
  40. <body>   
  41.     <div id="wrapper">   
  42.         <header>   
  43.             This is header.   
  44.         </header>   
  45.         <nav>   
  46.             This is nav<br>   
  47.             This is nav<br>   
  48.             This is nav<br>   
  49.         </nav>   
  50.         <article>   
  51.             This is article.<br>   
  52.             This is article.<br>   
  53.             This is article.<br>   
  54.             This is article.<br>   
  55.             This is article.<br>   
  56.             This is article.<br>   
  57.             This is article.<br>   
  58.             This is article.<br>   
  59.             This is article.<br>   
  60.         </article>   
  61.         <aside>   
  62.             This is aside.   
  63.         </aside>   
  64.         <footer>   
  65.             This is footer.   
  66.         </footer>   
  67.     </div>   
  68. </body>   
  69. </html>  

結(jié)果如圖：
2015723172007867.png (600×132)

說明幾點：

    通過給整個外包裝（#wrapper）設(shè)定寬度值（960px），并將其水平外邊距設(shè)定為 auto，就能實現(xiàn)居中。隨著向里面添加內(nèi)容，相關(guān)的欄的高度會增加。

    設(shè)置寬度并浮動中間三欄（nav、article 和 aside），讓它們并排顯示。使用屬性：width 和 float。

    三欄的總寬度加起來要等于外包裝的寬度（150 + 600 + 210 = 960）。同樣使用該方法就可以加任意多欄，只要它們的總寬度等于外包裝的寬度即可。

    頁腳（footer）位于浮動元素后面，所以就會盡量往上移動。解決這個問題的方法就是使用 清除浮動（clear:both;或者使用clear:left;也可以，因為這里只有左浮動元素）。

3.為欄設(shè)定內(nèi)邊距和邊框

在上面的布局中，只要一調(diào)整各欄中的內(nèi)容，布局就可能超過容器寬度，而右邊的欄就可能滑到左邊的欄下方。例如為了讓內(nèi)容與欄邊界空開距離，為欄添加水平外邊距和內(nèi)邊距，或者為了增加愛欄間距，為欄添加外邊距，導(dǎo)致布局寬度增大，進而浮動欄下滑；又或者在欄中添加大圖片，或者沒有空格的長字符串（如長URL），也會導(dǎo)致欄寬大超過布局寬度。

示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. article{   
  2.     background: #ffed53;   
  3.     width: 600px;   
  4.     float: left;   
  5.     padding: 10px 20px;    /* 添加這一行CSS規(guī)則 */  
  6. }  

結(jié)果就會變成這樣：
2015723172027959.png (600×156)

我們把這種現(xiàn)象稱為 浮動滑移，可以使用三種方法來預(yù)防發(fā)生：

    從設(shè)定的元素寬度中減去添加的水平外邊距、邊框和內(nèi)邊距的寬度和。
    在容器內(nèi)部的元素上添加內(nèi)邊距或外邊距。
    使用 CSS3 的 box-sizing 屬性切換盒子縮放方式。應(yīng)該該屬性后，給元素添加邊框和內(nèi)邊距都不會增大盒子，相反會導(dǎo)致內(nèi)容變窄。

下面來討論這三種方法：
3.1 重設(shè)寬度以抵消內(nèi)邊距和邊框

由于上面給 article 欄添加了左右 20px 的水平邊距，故將該欄寬度從 600px 減至 560px，故修改后的 article 欄 css 樣式規(guī)則如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. article{   
  2.     background: #ffed53;   
  3.     width: 560px;    /* 這里 */  
  4.     float: left;   
  5.     padding: 10px 20px;   /* 別忘了這里 */  
  6. }  

效果如下：
2015723172044707.png (600×372)

雖然能實現(xiàn)，但每次只要調(diào)整內(nèi)、外邊距就要重設(shè)布局寬度，非常煩人，而且還可能導(dǎo)致頁面錯亂。
3.2 給容器內(nèi)部的元素應(yīng)用內(nèi)邊距和邊框

把外邊距和內(nèi)邊距應(yīng)用到內(nèi)容元素上確實有效，前提是這些元素沒有明確地設(shè)定寬度，這樣它們的內(nèi)容才會隨著內(nèi)、外邊距的增加而縮小。

    根據(jù)盒模型定義，沒有寬度的元素在水平方向上會適應(yīng)其父元素，其內(nèi)容會隨著外邊距、邊框和內(nèi)邊距的增加而減少。

考慮到將來修改的時候，一欄中可能包含大量不同內(nèi)容的元素，如果想重新調(diào)整內(nèi)容與容器邊界的距離，就必須每個元素都要進行調(diào)整，這樣不僅麻煩，而且容易出錯。況且，給欄添加邊框同樣會增大欄寬，不可能通過為其包含的內(nèi)容元素逐個添加應(yīng)用樣式來做到。

所以說，與其為容器中的元素添加外邊距，不如 在欄中再添加一個沒有寬度的 div，讓它包含所有內(nèi)容元素，然后再給這個 div 應(yīng)用邊框和內(nèi)邊距。如此一來，只要為內(nèi)部 div 設(shè)定一次樣式，就可以把讓所有內(nèi)容元素與欄邊界保持一致的距離。而且，將來再需要調(diào)整時也會很方便。任何新增內(nèi)容元素的寬度都由這個內(nèi)部 div 決定。

還是拿 article 欄來開刀：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <article>   
  2.     <div class="inner">    <!-- 添加一個div -->   
  3.         This is article.<br>   
  4.         This is article.<br>   
  5.         This is article.<br>   
  6.         This is article.<br>   
  7.         This is article.<br>   
  8.         This is article.<br>   
  9.         This is article.<br>   
  10.         This is article.<br>   
  11.         This is article.<br>   
  12.     </div>   
  13. </article>  

增改樣式如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. article{   
  2.     background: #ffed53;   
  3.     width: 600px;   
  4.     float: left;   
  5. }    
  6. article .inner{   
  7.     margin: 10px;   
  8.     border:2px solid red;   
  9.     padding: 20px;   
  10. }     

效果如下：
2015723172106975.png (600×175)

從結(jié)果可以看出，中間欄的寬度并未因此有多少變化，因為內(nèi)容區(qū)減少的寬度抵消了應(yīng)用到內(nèi)部 div 上的外邊距、邊框和內(nèi)邊距的總寬度。于是，我們可以這樣結(jié)論：如果布局中的欄是浮動的，而且都設(shè)定了寬度，你就不要去動它！要動，就把內(nèi)容放在內(nèi)部 div 里，動這個 div。
3.3 使用 box-sizing:border-box

這是最簡單的一個方法。只要在三個浮動的欄的 CSS 規(guī)則中分別 加上 box-sizing:border-box 聲明，再給欄添加內(nèi)邊距（和邊框）就不會導(dǎo)致盒子的寬度變化。此時，既不用調(diào)整欄寬去抵消增加的內(nèi)邊距，也不用使用內(nèi)部 div。添加內(nèi)邊距的結(jié)果就是內(nèi)容收縮。

示例：

以下是簡介清晰的沒有內(nèi)部 div 的標(biāo)記：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div id="wrapper">  
  2.     <header>  
  3.         <!-- 標(biāo)題 -->  
  4.     </header>  
  5.     <nav>  
  6.         <ul>  
  7.             <!-- 鏈接 -->  
  8.         </ul>  
  9.     </nav>  
  10.     <article>  
  11.         <!-- 文本 -->  
  12.     </article>  
  13.     <aside>  
  14.         <!-- 文本 -->  
  15.     </aside>  
  16.     <footer>  
  17.         <!-- 文本 -->  
  18.     </footer>  
  19. </div>  

相應(yīng)的，CSS 規(guī)則如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. * {    
  2.     margin: 0;    
  3.     padding: 0;   
  4. }   
  5. #wrapper{   
  6.     width: 960px;   
  7.     margin: 0 auto;   
  8.     border:1px solid;   
  9. }   
  10. header{   
  11.     background: #f00;   
  12. }   
  13. nav{   
  14.     box-sizing:border-box;    /* 這里！ */  
  15.     background: #dcd9c0;   
  16.     width: 150px;   
  17.     float:left;   
  18.     padding: 10px 20px;       /* 添加內(nèi)邊距 */  
  19. }   
  20. article{   
  21.     box-sizing:border-box;    /* 這里！ */  
  22.     background: #ffed53;   
  23.     width: 600px;   
  24.     float: left;   
  25.     padding: 10px 20px;       /* 添加內(nèi)邊距 */  
  26. }   
  27. aside{   
  28.     box-sizing:border-box;    /* 還有這里！！ */  
  29.     background: #6a6b6c;   
  30.     width: 210px;   
  31.     float: left;   
  32.     padding: 10px 20px;        /* 添加內(nèi)邊距 */  
  33. }   
  34. footer{   
  35.     clear:both;     /* 清除浮動，防止頁腳往上移動 */        
  36.     background: #6a6b6c;   
  37. }  

結(jié)果如下：

box-sizing:border-box 確實起作用了。
2015723172127372.png (600×251)

多么好用的一個屬性??！當(dāng)然也就少不了 但是 —— IE6 和 IE7 不支持該屬性。

廢話少說，解決方案 如下：

使用一個專門解決這個問題的膩子腳本（polyfill），名叫 borderBoxModel.js.
可以使用 條件注釋 把它添加到 HTML 標(biāo)記之后、結(jié)束的 </body> 標(biāo)簽之前，以保證在加載 DOM 之后再執(zhí)行該腳本：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2. <!-- HTML 標(biāo)記 -->  
  3. <!-- 只讓 IE8 之前的 IE 加載它 -->  
  4. <!-- [if It IE 8] -->  
  5. <script src="helpers/borderBoxModel.js"></script>  
  6. <![endif]-->  
  7. </body>  

相關(guān)文章

最新評論