布局篇(2)—If you love css …
Author: Jorux/Bluecssr
Posted on: November 26, 2006
Filed under: Web Design
Comments: 38 Responses
keywords: css, tutorial
FontSize: + Increase - Decrease
Trackback: URL(copy the link)- edit
上篇讲的布局(切割)方法相信大家己经掌握，其特点是用固定宽度(fixed-width)来实现页面内各个元素的显示效果，简单实用，易于掌握。本篇将讲述其他相对高级的布局方法。
布局的分类,根据对元素宽度的定义不同，布局可分为以下几种：
1. 固定宽度(fixed-width)布局：
即上一篇所用到的布局方法，其特点是主要DIV的宽度都是用固定大小的px值定义的，其宽度不随浏览器及字体大小的影响。多以px作为宽度单位。
优点：宽度固定，最为保真地表现作者的设计意图；简单易学。
缺点：它是这几种布局方法中最为“自私”的，因为其不考虑访客的浏览设备及设置。比方说，在1024宽的浏览器表现良好的布局，到了1600以上的宽屏浏览器就显得较为局限，其可能缩于屏幕一侧或是中央。
现状：由于其简单易用，且基本满足大部分访客的需求，仍是主要的布局方法，尤其在大陆。
趋势：随着液晶屏幕的发展和普及，成本的下降，市面上宽屏显示器已经开始大量涌现，尤其在西方发达国家，1600的宽屏显示器渐成主流，所以在800或是1024下显示良好的，使用固定宽度的布局方法已经开始被边缘化。
站点举例：网易 蓝色理想
2. 自适应(liquid)布局：
即根据用户浏览器的宽度，自动调整宽度显示的布局方法。以%作为宽度单位。
优点：自动适应各种屏幕宽度，轻松实现满屏显示。
缺点：如果屏幕过宽，而内容有不多的情况下，文字可能拉伸得很长，影响美观。而当屏幕过窄时，内容又会被压缩得很窄，可读性下降。
现状：目前很多的web2.0站点使用%来实现布局，即自适应访客的屏幕宽度。
趋势：就目前的情况看来，没有哪一个屏幕分辨率能够统一整个市场，所以800，1028，1280，1600等各种宽度的浏览器会各据一方，并且只会越来越宽，liquid布局以其良好的自适应能力将成为主要的布局方法。
站点举例：Google Cssliquid
3. 弹性（elastic）布局：
所谓弹性，是针对字体大小而言的，当用户调整字体大小时，宽度会随字体大小的变化而变化。以字体高em作为宽度单位。
优点：满足了视力下降人士的需求，不管用户如何调整字体大小，页面布局都不会被打乱；
缺点：当用户不调整字体大小时，其效果和固定宽度布局的效果其实是一样的，即不会随屏幕的大小的变化而自适应；对于初学者不易掌握。
现状：弹性布局方法是目前较为少用的一种。
趋势：由于其能自动适应字体大小，且在用户不调整字体大小时，有固定的宽度，所以它将是固定宽度布局的不错的替代方法。
站点举例：BlueAnvil Designbit(可能需要代理浏览)
4. 混合布局：
即在一个页面内用两种以上的布局方法。比方说对于内容DIV使用%，而在边框DIV则使用em作为宽度单位。
如何选择适合你的布局方法：
在选择布局方法时，你需要考虑以下两个方面：
1.你的原始设计：
当你的原始设计的宽度固定，或是宽度过大会影响美观的话，Jorux建议你使用弹性布局。
2.用户群的分布：
如果你的用户群数量巨大，也就是说使用各种屏幕分辨率的用户都会达到一个可观的数量，那么你在布局时就应该考虑使用自适应的方法布局。并且在设计时考虑到这点，设计出在各种宽度下拉伸都基本保持美观的作品。
你可以看到，固定宽度的布局方法已经不是Jorux的推荐方法。这也是Jorux写这篇文章的原因，大家应该秉持以用户为中心的设计理念，更好地适应各种客户端及其设置。本站也会很快改写CSS。
怎样使用弹性布局的方法实现布局篇(1)中的效果：
1. 在body中设置font-size:62.5%，使得1em=10px；
2. 避免在任何DIV中声明字体大小，这是为了避免em的值因继承父级元素的字体高而不断变化，而在DIV的子元素中声明字体大小。如在p,h1等选择器中声明。
3. 用em作为宽度和高度单位，例如你想设置DIV宽度为760px，那么你需要将其设置为76em。
那么css代码可以为(仅供参考)：
* {
margin: 0;
padding: 0;
}
body{
font-size:62.5%;
background-color:#444;
}
#AllWrap {
float:left;
width: 76em;
background-color: white;
}
#Header {
height: 8em;
background-color: red;
}
#MidWrap {
}
#Content {
float:left;
width:56em;
height:40em;
background-color: white;
}
#Sidebar {
float:left;
width:20em;
height:40em;
background-color: green;
}
#Footer {
clear:both;
width:76em;
height: 8em;
background-color: blue;
}
你可以尝试调整浏览器的字体大小，可以看到各个DIV也随之变化。
如何用%实现自适应的布局方法：
满足以下条件：
1.满屏显示，及Header，(Content+Sidebar),Footer的宽度均自动适应屏幕宽度，并占满整个屏幕宽度；
2.Content占70%屏幕宽，Sidebar占30%，高度均为400px；
3.Header和Footer的高度均为为80px；
4. 实现如下效果效果(点击看大图)：
读者能在留言中给出你的答案吗？
精彩在留言，请读者踊跃解答，参与讨论关于布局的任何问题，Jorux将在留言中响应大家的提问或是解答。
Important reference:
1. Going elastic with ems, layout techniques
2. Fixed vs Liquid vs Elastic
3. Create a simple liquid layout
4. Elastic Design
[END]
我是第一个啊
图片没有做连接（不能点击看大图）
要满屏显示，Header，(Content+Sidebar),Footer的宽度要为100%,高度也要为100%吧
To ant:
感谢你的积极参与和指正。你说的问题已经在文中修改, 请重新看题!
基本上还是按照上次的内容略作修改，主要就是将原来的宽度设置成百分比的形式。别的什么都没有修改，难道就是这样。宽度要为100%？没必要吧，自动适应你填写内容就行了。
html,body{
margin:0;
padding:0;
}
#AllWrap{
width:100%;
margin:0 auto;
}
#Header{
height:100px;
background-color:red;
text-align:center;
}
#MidWrap{
background-color:green;
}
#Content{
float:left;
width:70%;
height:400px;
background-color:#FFF;
}
#Sidebar{
float:left;
width:30%;
height:400px;
background-color:green;
}
#Footer{
clear:both;
background-color:blue;
height:80px;
}
看来我是没有读明白
题目
To 红鼻子：
1. margin:0 auto;是没有必要的。其他的都是符合要求的；
2. 100%是很有必要的，当然你也可以使用90%，然后用margin来填充剩下的10%，但总和都需达到100%；
3. 感谢红鼻子的快速解答，看来以后要出个有点难度的了。
呵呵呵，怎么糊涂了呢，“宽度要为100%？没必要吧，自动适应你填写内容就行了。”—–这个不对，严重的不对。
margin:0 auto;自动居中了，继续上次的内容，忘记修改了
hi~~怎么木有音乐猫的连接了，是不是只做技术类的连接了。。。
发表新文章了，不错，又可以继续学习了。
To chun:
对，现在停止交换友情链接了, 不再做日记类博客链接。抱歉。
body{width:100%;margin:15px auto;padding:0;}
#head{width:100%;background:red;height:80px;}
#sidebar{width:70%;float:right;background:darkgreen;height:400px;}
#content{width:30%;float:left;background:white;height:400px;}
#footer{width:100%;background:blue;height:80px;clear:both;}
To xf5337651:
最好加上代码：
* {margin:0; padding:0;}
以使各个浏览器的margin和padding值均归零。
to 红鼻子:
我用浏览器看了下你的大作，发现sidebar跑到 content的左边去了。不知道我验证的对否~~~
顺便交下作业，但不知底下那块黑是咋实现的，俺刚学没多长时间，是不是再加上一个DIV呢？我在 allwrap上加没啥效果-_-。作业：
*{
margin:0;
padding:0;
}
body{
font-family:Arail,Helvetica,Verdana,Sans-serif;
font-size:62.5%;
color:#666;
background:white;
}
#page-container{
padding:0.8em;
}
#allwrap{
float:left;
}
#header{
background:red;
height:8em;
}
#midwrap{
}
#sidebar{
float:right;
background:green;
width:30%;
height:40em;
}
#content{
background:white;
width:70%;
height:40em;
}
#footer{
clear:both;
background:blue;
height:8em;
}
To Jelly:
1. 红鼻子的答案没有问题，你说的sidebar在左边，可能是因为你在html文件中，将sidebar的DIV置于content之前了；
2. 你的答案还是有一点问题，content没有加float，这样的话content和sidebar是不能并列显示的；
3.底下那块黑并不是加了什么DIV，而是body的背景色#444;
呵呵，谢谢jorux的指正，我的确是在html中先写的sidebar后写的 content，我倒了位置试了试，的确没问题。
在sidebar和 content的顺序上我是学了你译的“十步”的顺序，就像大红鼻子的css适用 content在前一样，我这个CSS是跟html里sidebar在前配合使用的，验证的时候是并列的。
我把你文章中那个图的上和左边的白色当成图的一部分了，眼神不好~~以为大背景是白色的。。。
jorux你的教程对像我这种对网页制作有兴趣又苦于无从学起的银帮助很大。文章都是精品，感激你的劳动，支持你！祝你一切顺利：）
请教个问题：
body.FullWidth #Head #ChannelMenu
{width:100%;}
这个是淘宝的样式表，可我在查看源文件时并没发出淘宝引用了FullWidth这个样式，难道不用定义.FullWidth这个样式吗？那它是起什么作用的呢？
谢谢。。。
To Xf5337651:
可以看看《十步》里的第九步后半部分，body.FullWidth是用来控制在body标签下class=”FullWidth”的html文件的。你看的源文件可能没有这个class，可能是因为淘宝只是把FullWidth应用于个别页面(body内标有FullWidth)，或者干脆取消了。而你看的页面刚好是不含有此class的页面。
To Jorux:
您好：我重新按您的讲解做了一下您《十步》的教程，但我觉得有一段代码有问题：
body.services #header {
height: 150px;
background: #db6d16
url(../images/headers/services.jpg);
}
如果services页面的Header的样式表中background: #db6d16
url(../images/headers/services.jpg);引用此副图片就不对了吧？应该是引用about.jpg的图片吧？按照您这段代码services页面的大banner就不对了。不知道是什么原因？
To Xf5337651:
你问的问题很好。在教程中我没说清楚，其实你得自己制作一个services.jpg，这附图和about.jpg差不多，只是需要把about的土黄色竖条背景换到services的位置去，然后命名为services.jpg就可以了。
To Jorux:
这回真的明白了，也明白了淘宝样式的使用，十分感谢！
还得请教个问题：之间的文本可以两边都对齐吗？如果选择左对齐，由于有标点符号右侧就会参差不齐，但如果选择了两边对齐，半行文字就是散开了，有什么好办法吗？
谢谢。。。
To xf:
可能是因为你使用了中英文混编或是使用了英文的标点符号，基本是没有解决办法，除了你不使用英文字母或是其标点。
Torus:
我想问你一个CSS的问题：
.out {
background:#bbb;
margin:5px 1px;
border: 1px solid red;
}
.in {
background:#fff;
border:1px solid #555;
padding:5px 5px;
position:relative;
top:0px;
left:5px;
}
为什么在IE和FF里面都没有反应出
.out {
background:#bbb;
margin:5px 1px;
border: 1px solid red;
} 里的margin的 top和bottom的值
也就是说margin后的“5px”没有效果。
这是内容代码
/*
*/
To CAII :
你的代码在这会被屏蔽的。
你的问题很可能是margin-collapse.
请参照：http://jorux.com/archives/property-4-if-you-love-css/
hao
终于把目前已经出来的所有属性篇和布局篇学完了，嗯，感觉不错。
第一次要在这里“写作业”，没想到遇到了一个简单的题目。 呵呵。
以下是建立在Jorux基础上的我的答案：
* {
margin: 0;
padding: 0;
}
body{
font-size:62.5%;
background-color:#444;
}
#AllWrap {
float:left;
width: 100%;
background-color: white;
}
#Header {
height: 8em;
background-color: red;
}
#Content {
float:left;
width:70%;
height:40em;
background-color: white;
}
#Sidebar {
float:right;
width:30%;
height:40em;
background-color: green;
}
#Footer {
clear:both;
width:100%;
height: 8em;
background-color: blue;
}
呵呵。期待布局（3）。
A ZA A ZA Fighting！
老大，请教你一个问题，看一下这个页面，在FF里显示正常，但IE显示右面的bar下沉了！请问怎么解决？谢谢！
无标题文档
*{
margin:0;
padding:0;
}
#AllWrap{
width:80%;
margin:0 auto;
}
#Header{
height:100px;
background-color:red;
}
#MidWrap{
background-color:green;
}
#Content{
float:left;
width:40%;
height:400px;
background-color: #00FF00;
}
#Sidebar2,#Sidebar1{
float:left;
width:30%;
height:400px;
background-color: #666600;
}
#Footer{
clear:both;
background-color:blue;
height:100px;
}
Header
Sidebar1
Content
Sidebar2
Footer
To alenximeng:
你的有部分代码被屏蔽了，最好有个演示地址。
上面
Header
Sidebar1
Content
Sidebar2
Footer
几行去掉，另加上html部分：
Header
Content
Sidebar
Footer
晕，显示不正常！
Header
Content
Sidebar
Footer
–>
老大给个邮箱或QQ什么的，我传给你，也方便以后有什么问题请教你哦！PS：偶是新手！
请问在IE下如何实现最小宽度布局啊!
在别的浏览器中min-width有用,但在IE中没用啊!
简单写了一下,如果有什么错误,请指出,谢谢.
body{
margin:0;
padding:0;
background:#444;
}
#contain{
width:100%;
height:560px;
margin-left:auto;
float:left;
background:#fff;
}
#header{
width:100%;
height:80px;
background-color:green;
text-align:center;
clear:both;
}
#mid{
width:100%;
height:400px;
}
#content{
float:left;
width:70%;
height:400px;
background-color:red;
}
#sidebar{
float:right;
width:30%;
height:400px;
background-color:yellow;
}
#footer{
width:100%;
clear:both;
background-color:blue;
height:80px;
}
这节没听明白，有些浮躁。。。
代码比之前更简单化了。。
html,body { margin:0px;
background-color:#444444;
}
#allwrap { width:100%;
}
#header { height:80px;
background-color:#FF0000;
}
#content { width:70%;
height:400px;
float:left;
background-color:#FFFFFF;
}
#sidebar { width:30%;
height:400px;
float:left;
background-color:#00FF00;
}
#footer { width:100%;
height:80px;
background-color:#0000FF;
clear:both;
}
很喜欢这个网站的氛围。尽管大部分看不懂。