CSS-页面布局

介绍

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

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

1. 固定宽度布局的大小是随用户调整浏览器窗口大小而变化，一般是900至1100像素宽。其中960像素是很常见的，因为这个宽度适合所有的现代浏览器，而且能被16、12、10、8、6、5、4和3整除，不仅容易计算等宽分栏的数量，而且计算结果也是么有小数的像素数。
2. 流动布局的大小会随着用户调整浏览器的窗口大小而变化。这种布局能够很好的适应大屏幕，但是同时 也意味着放弃对页面某些方面的控制，比如随着页面的变化，文本行的长度和页面元素之间的位置关系可能会发送变化。现在越来越多的浏览器都支持CSS媒体查询了，这就让基于浏览器窗口宽度提供不同的CSS样式成为可能。在这种形势下，适应各种屏幕宽度的可变固定布局，正逐步取代流动布局。这种可变的固定布局能够适应最大和最小的屏幕，业界称之为响应式设计。
3. 弹性布局和流动布局类似，在浏览窗口变化时，不仅布局会变，而且内容元素的大小也会发生变化。

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

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

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

三栏布局

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

.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。

版权声明：本文为博主原创文章，未经博主允许不得转载。