布局的基本概念
多栏布局有三种基本的实现方式:固定宽度、流动、弹性
1. 固定宽度:该布局的大小不会随用户调整浏览器窗口大小而变化,一般是900到1100像素宽。其中960像素是最常见的,因为这个宽度适合所有现代显示器,而且能够被16、12、10、8、6、5、4和3整除,不仅容易计算出等宽分栏的数量,而且计算结果也能得到没有小数的像素数。
2. 流动: 布局的大小会随着用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕,但同时也意味着放弃对页面某些方面的控制,比如随着页面宽度变化,文本行的长度和页面元素之间的位置关系都可能变化。、、
3. 弹性: 弹性布局与流动布局相似,在浏览器窗口变宽时,不仅布局变宽,而且所有内容元素大小也会变化,让人产生一种所有东西都变大了的改进,但是到太过复杂,目前还没有设计的很好的弹性布局
布局宽度与布局高度
布局高度:多数情况下,布局中结构化元素(乃至任何元素)的高度都是不必设定的,事实上,甚至根本不应该给元素设定高度,除非必要,比如在页面中创造一个绝对定位的元素。保持元素height属性为默认值auto的原因是,只有这样元素才能随自己包含内容的增加而在垂直方向上扩展。
布局宽度:与高度不同,我们需要更精细地控制布局高度,以便随着浏览器窗口宽度的合理变化,布局能够作出适当的调整,确保文本行不会过长或过短。注意,即使必须设置栏宽,也不要给包含在其中的内容元素设定宽度,应该让这些内容元素自动扩展到填满栏的宽度,这是块级元素的默认行为。总之,就是让栏宽限制其中内容元素的宽度。