CSS盒模型图解
下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示。
在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding和border属性上。
W3C盒模型
首先看一下《 the W3C box model》,这里所写出的标准,如果没问题的话,是应该被所有标准的现代浏览器及IE6和它的后续版本所遵循的。 在W3C盒模型中,一个块级元素的总宽度按照如下方程式计算:
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
对于高度也使用同样的计算方法。
IE盒模型
IE盒模型的计算方式:填充(padding)和边框(border) 不被包括在计算的范围内。
总宽度 = margin-left + width + margin-right
这就意味着元素一旦拥有横向的填充和/或边框,实际的内容区域(content area)就要扩大来创造出他们占据的空间。
关于IE的版本
IE5.5及更早的版本使用的是IE盒模型。IE6及更新的版本在标准兼容模式下使用的是W3C标准盒模型。只要为文档设置一个DOCTYPE,就会使得IE遵循标准兼容模式的方式工作。此盒模型问题只会出现在IE5.5及其更早的版本中。
解决问题
现在确定了IE6及后续版本都会遵循标准兼容模式, 唯一要关注的事情就是如何令IE5.5及更早版本中的网页和其在现代的浏览器中的呈现效果是一致的。以下列出了4种方法。
- 避免导致这个问题的情景
- 插入额外的标记
- 使用条件注释判断语句
- 使用CSS Hacks
1. 避免导致这个问题的情景
避免为一个元素同时设置width和padding值或者width和border值,再或者width同时和它们两个值。者确保了所有的浏览器都会一样的去计算元素的总宽度,而不用考虑它们使用哪种盒模型方式。
2. 插入额外的标记
拿一个例子来说明,下面的HTML用来定义一个新闻列表:
<div id="news">
<h2>News</h2>
<ul>
<li>
<h3>News article 1</h3>
<p>Lorem ipsum dolor sit amet</p>
</li>
<li>
<h3>News article 2</h3>
<p>Lorem ipsum dolor sit amet</p>
</li>
</ul>
</div>
为了得到一个250像素宽的列表,且应用1像素的边框和10像素的填充,会用到这样的CSS:
#news {
padding: 10px;
border: 1px solid #000;
width: 228px;
}
在符合标准的浏览器中,总宽度为250px(1px border-left + 10px padding-left + 228px width + 10px padding-right + 1px border-right)。在IE5.5及更早的版本中,总宽度只是228px,因为它并未计算边框和填充的值。
那么如何避免这个问题呢? 让我假设新闻列表在另一个容器里,比如它在侧边栏(sidebar)里:
<div id="sidebar">
<div id="news">
...
</div>
</div>
如果是这样,可以为父容器(sidebar)设置宽度来达到效果:
#sidebar {width:250px}
#news {
padding:10px;
border:1px solid;
}
如果情况不允许,可是使用插入额外标记这个方法。还是上述的例子,在#news里面插入一个标记:
<div id="news">
<div>
<h2>News</h2>
<ul>
...
</ul>
</div>
</div>
使用如下CSS:
#news {width:250px}
#news div {
padding:10px;
border:1px solid;
}
3. 使用条件注释判断语句
如果没有合适的父容器来控制宽度,也不能通过添加标记来解决问题,那针对IE5.*/Win我们需要设置一个不同的width值了。
最安全的方式就是使用条件注释判断语句,这些内容只能在IE/Win中被解析,下面的代码只有在IE6以下的版本中被执行:
<!--[if lt IE 6]>
<style type="text/css">
#news {width: 250px;}
</style>
<![endif]-->
如果采用这种方式,建议将全部的针对IE5.*/Win的代码全部转移到一个单独的CSS文件中来加载它:
<!--[if lt IE 6>
<link rel="stylesheet" type="text/css" href="/css/ie5.css">
<![endif]-->
4.使用CSS Hacks
#news {
padding: 10px;
border: 1px solid;
width: 250px;
width:228px;
}
所有的浏览器都会看到并理解"width:250px",但IE5.*/Win不会读取下面的一行,width:228px,但这行会被其它浏览器解析。所以最后,IE5.*/Win得到width值是250px,其它浏览器得到的width值是228px。这样保证在全部的浏览器中新闻列表的总宽度一致。