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属性，又不会改变行内小盒子的宽度。