关于页面加宽的css代码

html-css013

关于页面加宽的css代码,第1张

有点困难,如果你是用web标准做的并且使用的固定宽度布局,那你需要从外到内把一层层div盒子模型width属性修改设置,如果是web标准的流体布局,只需要把最外层的宽度设置好就好了

如果是用table表格布局的话要一个一个设置页面内的表格的宽度,不能遗留,图片加宽要求在页面内的img元素中的width属性设置,不过这可能会另图片变形,比较好的做法是图片左右留白。

加个css  box-sizing:border-box

设我们需要一个五列的布局。我们要考虑的第一件事就是外边距(margins).假设所有的列都需要4%的外边距,我们需要为所有的外边距保留20%(4%*5(5列)=20%)的占宽比;然后我们从总宽比(100%)里面减去20%,得到的就是所有列实际占的总宽比。所以每一列的占宽比即16%(80% /5)。下面是一个详细的图表:

相应的CSS代码如下:

.column{

width:16%

margin: 2% 2%

float: left

background: #03a8d2

}

对应的界面是:

当我们给每一列添加一个2px的边框时,问题出现了,如下图,最后一列被挤到下面去了。

解决方案当然应该是:在之前的计算中我们应该考虑到边框(border),但是我们怎么去做呢?结论是,我们不能用百分比去设置border边框的大小,只能用一个固定的值。因为如果所有的都使用百分比设置,那么我们留给border的空间也会是一个变化的值,也就是说当页面宽度变化时,border的值也会跟着变化,这样是有问题的。这使得我们没有办法去决定我们边框的宽度!

解决方案

设置CSS的box-sizing属性值为“border-box”,这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!!是不是很神奇呢?

.column{

width: 16%

margin: 2% 2%

float: left

background:#03a8d2

border: 2px solid black

box-sizing: border-box

-webkit-box-sizing: border-box

-moz-box-sizing: border-box

}

即使我们加上padding,也同样可以正常显示: