进阶：网页CSS样式表设计十条技巧(2)

http://www.sina.com.cn 2007年03月27日 09:18 天极yesky

　　6.css盒模型hack的另一选择

　　css盒模型hack被用来解决IE6之前的浏览器显示问题，IE6.0之前的版本会把某元氐谋呖蛑岛吞畛渲蛋诳矶戎?而不是加在宽度值上)。例如，你可能会使用以下css来指定某个容器的尺寸:

以下是引用片段：
　　#box
　　{
　　width: 100px;
　　border: 5px;
　　padding: 20px;
　　}

　　然后在html中应用:

　　盒的总宽度在几乎所有浏览器中为150像素(100像素宽度+两条5像素的边框+两个20像素的填充)，唯独在IE6之前版本的浏览器中仍然为100像素(边框值和填充值包含在宽度值中)，盒模型的hack正是为了解决这一问题，但是也会带来麻烦。更简单的办法如下:

　　css:

以下是引用片段：
　　#box
　　{
　　width: 150px;
　　}
　　#box div {
　　border: 5px;
　　padding: 20px;
　　}
　　html:
　　<div id="box"><div>...</div></div>

　　这样一来在任何浏览器中盒的总宽度都将是150像素。

　　7.将块元素居中

　　假设你的网站使用了固定宽度的布局，所有的内容置于屏幕中央，可以使用

　　以下的css:

以下是引用片段：
　　#content
　　{
　　width: 700px;
　　margin: 0 auto;
　　}

　　你可以把html的body之内任何项目置于当中，该项目将自动获得相等的左右边界值从而保证了居中显示。不过，这在IE6之前版本的浏览器中仍然有问题，将不会居中，因此必须修改如下:

以下是引用片段：
　　body
　　{
　　text-align: center;
　　}
　　#content
　　{
　　text-align: left;
　　width: 700px;
　　margin: 0 auto;
　　}

　　对body的设定将导致主体内容居中，但是连所有的文字也居中了，这恐怕不是你想要的效果，为此#content 的div还要指定一个值:text-align: left 。

本文导航:
·网页CSS样式表设计十条技巧 ·网页CSS样式表设计十条技巧(2)		·网页CSS样式表设计十条技巧(3)

【发表评论】

不支持Flash


·Ⅱ型糖尿病新疗法 ·高血压血脂新发现	·湿疹、荨麻疹警惕 ·祛斑！祛痘祛疮！	·拜拜口臭口腔溃疡 ·结肠炎--07新突破	·警惕高血压高血脂 ·帕金森—07新揭密

不支持Flash

不支持Flash