CSS 多欄佈局 固定佈局 流動佈局

正常狀況下都應該保持元素 height 屬性的默認值 auto  .

多欄佈局，某一欄目佔的總寬度包括它的，Width，margin，padding ,border。

　　CSS3中，應用 box-sizing 屬性以後，給盒子 添加邊框和內邊距都不會增大盒子，相反會致使內容變窄（像沒有設置width的auto同樣；） 

好比 ：

若是 section 的總寬度超出，能夠用4種方法處理，

1. 從width中減去添加的外邊距，邊框和內邊距的寬度和。 
2. 用行內的元素設定外邊距，邊框和內邊距（行內元素不設置寬度）
3. 在欄中再添加一個寬度默認值的 div，讓它包含全部內容元素，而後再給這個 div 應用邊框和內邊距。 
4. section {box-sizing:border-box;}。   

 

2：section > * {margin:0 10px;} （選擇section的全部子元素，設定它們的外邊距，邊框和內邊距）

3：浮動了欄，設定了欄寬，最好不要修改，而直接添加一個內部 div ，把padding margin border 給這個 div。

<div id="wrapper"> 

<nav><div class="inner"></div></nav>

<article> <div class="inner"></div></article>  

<aside><div class="inner"></div> </aside>

 </div>

nav {float :left; width:XZX;}

article{float :left; width:XYZ;}

aside {float :left; width:ZZY;}

nav .inner {padding:XXpx; margin:XXpx;}
article .inner {padding:XZpx XYpx; margin:XXpx;}
aside .inner {padding:ZZpx; margin:XXpx;}

 

4：nav {

box-sizing:border-box; }

article {

box-sizing:border-box; }

aside {box-sizing:border-box; }

便可。

IE6 和 IE7 不支持 box-sizing
屬性。不過，有一個專門解決這個問題的膩子腳本（polyfill），名叫 borderBoxModel.js。
你可使用條件註釋（以便只有 IE6 和 IE7 加載）把它添加到 HTML 標記以後、結
束的</body>標籤以前，以保證在加載 DOM 以後再執行該腳本：
<!--[if lt IE 8 ]>
<script src="helpers/borderBoxModel.js"></script>
<![endif]-->

PS：

設計一個未來可能由他人維護的動態網站時，須要考慮得更長遠一些。好比，應該預見到可能

出現一些過大的元素。若是未來有一張比浮動欄更寬的圖片被放到欄中，就會致使佈局變寬，

而 右 邊 的 欄 又 會 滑 到 下 方 。 爲 此 ， 一 個 簡 單 的 預 防 措 施 就 是 添 加 一 條
.inner img{max-width:100%;}
聲明，以便限制圖片的寬度不超過其父元素（在此就是內部 div）。
HTML 只會在單詞間空格的地方換行。一些長 URL，甚至一些長單詞，在欄比較窄的狀況下，都會致使欄寬過大。
所以，還應該給全部欄的外包裝元素應用
{word-wrap:break-word;}
聲明，

流動佈局：

1.用負外邊距實現

解決方案是控制兩個外包裝,其中一個外包裝threecolwrap包圍全部三欄，另外一個欄twocolwrap外包裝只包圍左欄和中欄。

把twocolwrap的margin設置爲右欄（它不包括）的負值，width:100%。而後把中間欄設置margin-right 設置爲右欄的值(正值)，width：auto；可是左欄要固定值。

<div id="main_wrapper">
<header>
<!-- 頁眉-->
</header>
<div id="threecolwrap">/*三欄外包裝（包圍所有三欄） */
<div id="twocolwrap">/*兩欄外包裝（包圍左欄和中欄） */
/*左欄*/
<nav>
<!-- 導航 -->
</nav>
/*中欄*/
<article>
<!-- 區塊 -->
</article>
</div>/*結束兩欄外包裝（ twocolwrap） */
/*右欄*/
<aside>
<!-- 側欄 -->
</aside>
</div>/*結束三欄外包裝（ threecolwrap） */
<footer>
<!-- 頁腳 -->
</footer>
</div>

* {margin:0; padding:0;}
body {font:1em helvetica, arial, sans-serif;}
div#main_wrapper{
min-width:600px; max-width:1100px;
/*超過最大寬度時，居中佈局*/
margin:0 auto;
/*背景圖片默認從左上角開始拼接*/
background:url(images/bg_tile_150pxw.png) repeat-y #eee;
}
header {
padding:5px 10px;
background:#3f7ccf;
}
div#threecolwrap {
/*浮動強制它包圍浮動的欄*/
float:left;
width:100%;
/*背景圖片右對齊*/
background:url(images/bg_tile_210pxw.png) top right repeat-y;
}
div#twocolwrap {
/*浮動強制它包圍浮動的欄*/
float:left;
width:100%;
/*把右欄拉到區塊外邊距騰出的位置上*/
margin-right:-210px;
}
nav {
float:left;
width:150px;
background:#f00;
padding:20px 0;
}
/*讓子元素與欄邊界保持必定距離*/
nav > * {margin:0 10px;}或者裏面加一個div
article {
width:auto;/*不浮動*/
margin-left:150px;
/*在流動居中的欄右側騰出空間*/
margin-right:210px;
background:#eee;
padding:20px 0;
}
*讓子元素與欄邊界保持必定距離*/
article > * {margin:0 20px;} 或者裏面加一個div
aside {
float:left;
width:210px;
background:#ffed53;
padding:20px 0;
}
*讓子元素與欄邊界保持必定距離*/
aside > * {margin:0 10px;}
footer {
clear:both;
width:100%;
text-align:center;
background:#000;}
background:#000;
}

爲了給右欄騰出空間，中欄 article 元素有一個 210 像素的右外邊距。固然，
光有這個外邊距只能把右欄再向右推 210 像素。別急，包圍左欄和中欄的兩欄外包
裝上 210 像素的負右外邊距，會把右欄拉回 article 元素右外邊距（在兩欄外包裝內
部右側）創造的空間內。

 

2.用CSS3 單元格 實現

僅僅是把三欄的display 屬性設定爲 table-cell 就能夠了。

<nav><!-- 內容 --></nav>
<article><!-- 內容 --></article>
<aside><!-- 內容 --></aside>
和如下 CSS：
nav {display:table-cell; width:150px; padding:10px;
background:#dcd9c0;}
article {display:table-cell; padding:10px 20px;
background:#ffed53;}
aside {display:table-cell; width:210px; padding:10px;
background:#3f7ccf;}

 這個簡單、功能完備的佈局對 IE7 和 IE6 可沒有任何膩子腳本，甚至連個退化的後備方案都沒有。

 

多行多欄佈局 :

 把每行用一個div盒子包起來，設置一個id，

在行內設置行內元素的width 和float （使變成一行）,

而後在行內小盒子中，增長div，以改變padding ,margin,border屬性，又不會改變行內小盒子的寬度。