CSS设计指南---页面布局

CSS设计指南—页面布局

教材：CSS设计指南

---

实现多栏布局

三种方案：

• 固定宽度：固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到1100像素宽。
• 流动： 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。
• 弹性：弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了的感觉。

布局高度：多数情况下，布局中结构化元素（乃至任何元素）的高度是不必设定的，设置为默认值auto，方便元素随内容的增加而在垂直方向上扩展。

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

---

多栏布局—三栏固定宽度布局

分别创立三个栏的布局，确定好他们的宽度对他们应用float，页脚应用clear属性。
为每个栏设定一个宽度，但是栏中的内容不设定宽度，这样会默认拓展满栏的宽度。

* {
   margin:0; padding:0;}
#wrapper {
   width:960px; margin:0 auto; border:1px solid;}
header {
   background:#f00;}
nav {
   
width:150px;
float:left;
background:#dcd9c0;
}
nav li {
   
list-style-type:none;
}
article {
   
width:600px;
float:left;
background:#ffed53;
}
aside {
   
width:210px;
float:left;
background:#3f7ccf;
}