CSS-页面布局

介绍

几个实现多栏布局的方法。主要介绍使用内部div来创建浮动的栏。

多栏布局有三种基本的实现方案：固定宽度、流动、弹性。


在实际的创建页面之前，先说一下布局的高度和宽度。

布局高度，大多数情况下，布局高度都不需要设定。以便元素的高度随着内容的增加而在垂直方向上扩展。这样扩展的元素会把下面的元素向下推，而布局也能随着内容的增减而垂直伸缩。

布局宽度，与高度不同，我们需要精准的控制布局宽度，以便随着浏览器窗口宽度的合理变化，布局能够做出适当的调整，确保文本行不会过长或者过短。即使必须设定宽度，也不要给包含在其中的元素设定宽度，应该让这些内容元素自动扩展填满栏的宽度。

三栏布局

构建一个简单的三栏布局页面。

.left{
width: 15%;
float: left;
background-color: red;
height: 300px;
}
.middle{
width: 70%;
float: left;
background-color: blue;
height: 300px;

}
.right{
width: 15%;
float: left;
background-color: yellow;
height: 300px;
}

*为了直观我们都设定高度为300px。
为了让内容与栏边界拉开距离。为栏添加水平外边距和内边距。会导致又变的栏浮动下滑。在栏中添加大图片，或者没有空格的长字符串，也会导致栏宽超过布局宽度。同样会导致右侧的栏向下滑动。
有三种解决方案：

从设定的元素宽度中减去水平的外边距，边框和内边距的宽度和。这个方法虽然可行但是每次调整内外边距就要重新设置布局宽度。
在容器内部的元素上添加内边距和外边距。与其为容器中的元素添加外边框，不如在栏中添加一个没有宽度的div，让它包含所有的内容元素，然后再给这个元素添加边框和内边距。如此只需为内部div设置一次样式，jiukeyhi让所有的元素与栏边距保持一致。而且将来在调整时也很方便，任何新增元素的宽度都由这个内部div决定。
使用CSS3的box-sizing属性切换盒子的缩放方式。比如 section { box-sizing :border-box ; }.，再给栏添加内外边距就不会导致盒子的宽度发生变化了。但是IE6和IE7不支持box-sizing属性。不过有个脚本专门解决这个问题，名叫 borderBoxModel.js。