首页>前端教程>CSS教程

CSS第十三课:固定宽度布局

现在互联网上90%的网站依然采用的是固定宽度布局,然后相对于浏览器居中显示。

固定宽度布局需要非常精细化的计算容器的宽高,但是相对来说制作比自适应布局更简单,但维护成本高。

腾讯、淘宝等首页都是典型的固定宽度+居中的布局。

固定宽度布局.png

查看案例

这个案例的实际意义不大,因为我们网页几乎都不会这样布局,这个案例的目的是拿来练习如何精确计算宽度和高度的。

一、div的真实宽度

你以为你为div定义的width:100px是这个div的真实宽度吗?其实在CSS2里面,width表示的只是这个容器的可用宽度。

那么真实的div的总宽度是多少呢?

div的总宽度=width(可用宽度)+padding(左右内边距)+border(左右边框)+margin(左右外边距)

这就好比买房子,width是可用面积,padding是房子家具和墙壁的间隔,border是墙壁的厚度,margin是你的房子和邻居房子的过道。所以,border和margin是公摊面积,整个所有宽度加起来是你房子的建筑面积。

如图,看下面这个容器的模型图,就能知道它的宽高。

容器的盒模型.jpg

width=176px

height=60px

padding=10px

border=2px

margin-bottom=10px

由此,可以计算出该容器的总宽度:176+10*2+2*2=200px。

总高度:60+10*2+2*2+10=94px。

二、浮动的时候,如何计算div的宽度?

如图,父容器固定width为500px,左右两个div如何计算width才能保证非常对称的并排在一起。

div宽度的计算.jpg

<div id="content">
    <div class="left"></div>
    <div class="right"></div>
</div>
#content{
	width:500px;
	height:300px;
	padding:10px;
	margin:0 auto;/*固定宽度,相对于浏览器居中对齐*/
	border:2px solid #000;
}
.left{
	width:300px;
	height:276px;
	padding:10px;
	border:2px solid #666;
	margin-right:10px;
	float:left;}
.right{
	width:142px;
	height:276px;
	padding:10px;
	border:2px solid #666;
	float:left;}

content已经定义了width为500px,那么左右两个div的总的占位宽度加起来等于500px,可以先定义左边div的宽度,左右两边的比列按照黄金分割比例(0.618),大致可以分割为2:1。

左边div设置了width为300px,还有padding、border、margin-right的值,这些值加起来等于左边div总的宽度。

右边div也有padding、border的值,那么如何计算出右边div的width的值呢?

右边div的width=父容器的可用宽度-左边div的所有宽度-自身的占位宽度

在这里就是:

右边div的width=500-(300+10*2+2*2+10)-(10*2+2*2)=142px。

这就好比是在墙壁里面做衣柜。墙壁挖出的洞就是可用空间,衣柜的所有宽度都要塞在墙壁这个洞里面,但是衣柜的可用宽度还必须减去衣柜自身的厚度等。

高度的计算方式雷同。

固定宽度的布局要求精确的计算,就算误差1px,也可能导致布局的混乱。

最大的容器固定宽度后,虽然浏览器的宽度不确定,但是通过margin:0 auto的方式,可以实现左右外边距自动,也就是(浏览器宽度-最大div的固定宽度)/2。

在CSS3里面,增加了一个box-sizing属性,可以改变width属性到底是可用宽度还是总的宽度。

这里还有一篇关于固定宽度和自适应宽度布局的文章,虽然有点老,但是还是值得看一下。

网页布局思想浅议-淘宝新版首页为实例

点赞


7
保存到:

相关文章

Top