一、总论
万变不离其宗,所有的CSS布局技术根本都是3个基本概念:定位、浮动和外边距操纵。实际上,布局是CSS最容易的部分。
二、布局计划
在进行网页布局之前,最好在纸上将布局的大体结构画出来,最好能够事先想好哪些部分用哪些HTML元素,哪些文字用那些字体字号等。
三、常见布局技巧和实现方式
1、让页面内容居中
常见的做法是只需要定义容器div的宽度,然后将水平外边距设置为auto。但是在混杂模式中的IE6不支持margin:auto,好在IE将text-align:center误解为让所有的东西都居中,包括容器div,而不是文本,所以可以利用。
body { text-align: center; min-width: 960px; } .wrapper { width: 920px; margin: 0 auto; /** 让容器的内容重新左对齐,因为上面的body中被设置成了center*/
text-align: left; }
2、两列浮动布局
两列浮动布局很简单,一个往左浮动,一个往有浮动,从而可以最大程度利用页面空间;另外就是两列浮动了之后,会在容器中溢出,为了使之不溢出容器,可以将容器的overflow属性设置为hidden。需要注意的一点就是,需要在浮动元素中添加display:inline,放在IE的双外边距浮动产生的bug。
3、三列浮动布局
和前面类似,相当于在前面的左边或右边元素里再嵌套一个两列浮动布局。然后通过子选择器来设置特殊的样式。代码示意:
.content .primary .primary { width: 59.7%; float: left; } .content .primary .secondary { width: 34.33%; padding-right: 2.63%; float: right; }
4、流式布局
所谓流式布局,就是将页面主要内容的容器的宽度单位按照百分比来设置,从而使其随着窗口大小的改变而改变;另外,为了防止布局变得太窄或太宽影响阅读,需要在最外层的容器上设置max-width和min-width属性,并且其单位最好为相对的字体单位em。关键代码:
body { text-align: center; } .wrapper { width: 76.8%; margin: 0 auto; text-align: left; max-width: 125em; min-width: 62em; } .content { overflow: hidden; } .content .primary { width: 72.82%; float: right; } .content .secondary { width: 25%; float: left; } .content .primary .primary { width: 59.7%; float: left; } .content .primary .secondary { width: 34.33%; padding-right: 2.63%; float: right; }
关于em元素,任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:
1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为
16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
5、弹性布局
所谓弹性布局是指相对于字号,而不是浏览器的宽度来设置元素的宽度。以em为单位设置宽度,可以确保在字号增加时整个布局随之扩大,这可以确保行长在可阅读的范围内。
其缺点是随着字体的太大或者太小,可能造成页面大小没有充分利用,或者页面出现滚动条,主要代码:
body { /**设置1em = 10px; */
font-size: 62.5%;
text-align: center; } .wrapper { /** 只需要在容器中设置为相对宽度,子元素依然用百分比设置宽度*/
width: 92em; margin: 0 auto; text-align: left; max-width: 95%;
} .content { overflow: hidden; } .content .primary { width: 72.82%; float: right; } .content .secondary { width: 25%; float: left; } .content .primary .primary { width: 59.7%; float: left; } .content .primary .secondary { width: 34.33%; padding-right: 2.63%; float: right; }
6、流式和弹性图片
对于需要跨域大区域的图像,可以设置为背景图。
<style> #branding1 { height: 171px; background: url(images/branding.png) no-repeat left top; } </style> <div id="branding1">
对于需要设置为图像元素的图像,用容器包裹图像,并给容器的overflow设置为hidden。
<style> #branding2 { width: 100%; overflow: hidden; } </style> <div id="branding2"><img src="images/branding.png" width="1600" height="171" /></div>
对于新闻式的左图右文,按页面需要的百分比设置图片的宽度,并将最大宽度设置为图像的真实宽度,防止图像失真。但是在符合标准的浏览器上,图像不会超过其实际尺寸。
.news { background-color:#eaeaea; border: solid 1px #999; } .news img { float: left; padding: 2%; width: 25%; max-width: 200px; } .news p { float: right; width: 68%; margin: 0; padding: 2% 2% 2% 0; }
7、高度相等的div(Faux列)
对于固定宽度的两列布局,只需要在容器上设置一个垂直重复的背景图即可,其宽度与导航区域的宽度相同:
body { text-align: center; min-width: 960px; } .wrapper { width: 920px; margin: 0 auto; text-align: left; background: #fff url(img/nav-bg-fixed.gif) repeat-y left top; } .content { overflow: hidden; } .content .primary { width: 650px; padding-right: 20px; float: right; } .content .secondary { width: 230px; float: left; }
对于固定宽度的三列布局,原理盒上面的一样,只是背景图变成横跨3个区域的形式了,这里不再列出代码。
对于不固定宽度的的三列布局,原理盒和上面类似,也是需要用到背景图,关键是需要用到百分比的背景图定位。所谓百分比定位,其规则是:图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合。比如,如果放置位置是“20% 10%”,实际结果如下图,可以看到这个点是在图片本身的“20% 10%”的位置上。
关键代码
.wrapper { width: 76.8%; margin: 0 auto; text-align: left; max-width: 125em; min-width: 76em; background: #fff url(img/secondary-faux-col.gif) repeat-y 25% 0; } .inner-wrapper { background: url(img/primary-faux-col.gif) repeat-y 71.73% 0; }
其实,说白了,就是按照比例,将背景图上面的某一个点固定在页面上同样一个比例的位子,从而,不管页面怎么变化,这两个点永远都不分离。