11
2014
02

box-sizing的使用及浏览器盒子模式回顾

box-sizing是一个CSS3中的属性,他的出现让传统的盒子模式有所改变,算是一个非常重要的属性,一个可以让你回到浏览器怪异模式的时代。先回顾下盒子模式。


盒子模式( 标准模式和IE的怪异模式的区别)

盒子模式在各浏览器分为两种: 标准模式和IE的怪异模式(quirksmode),两种模式的区别和简单就是区域的宽度高度换算方法。从一个简单的例子来看这两模式的区别。

.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}


怪异模式,存在在IE的6,7,8版本,设置的宽度/高度包括合资的border和padding,所以盒子占的总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin

1.png

标准模式:盒子占的总宽度/高度=width/height+padding+border+margin

2.png

如何触发IE怪异模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML>

触发IE出现怪异模式的方法很简单,就是直接去掉HTML文档上面的DOCTYPE,或则用的dtd头是低于HTML4.0版本的标准,有上面这些DOCTYPE完整定义浏览器都会自动触发成标准模式渲染。所哟DOCTYPE一定要定义,不然IE出现怪异了。

当然,不可忽略,如果下面代码存在在head中,也不会再IE8触发怪异模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

box-sizing的使用

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。包含两个值content-box(默认)和border-box(firefox还有一个padding-box就是宽度高度定义时包含padding的值,而不计算border的值,本文不讨论)

当设置为box-sizing:content-box时,将采用标准模式解析计算宽度高度

当设置为box-sizing:border-box时,将采用怪异模式解析计算宽度高度

浏览器支持:

(×)IE8+
(√)Firefox 2.0+
(√)Chrome 1.0.x+
(√)Opera 9.63
(√)Safari 3.1+

box-sizing实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
	
    <title>box-sizing and box models</title>
	
	<style>
		.wrap{
			background: #eee;
		}
		.box{
			width: 200px;
			height: 50px;
			background: #ff0;
			border: 5px solid #f00;
			padding: 10px;
			margin: 10px;
		}
		#border-box{
			box-sizing: border-box;
		}
		#content-box{
			box-sizing: content-box;
		}
	</style>
    
  </head>

  <body>
	<div class="wrap">
		<div id="border-box" class="box"></div>
		<div id="content-box" class="box"></div>
	</div>
  </body>
</html>

再支持ie8+,chrome测试得到的记过如下图


01.jpg

再IE6,IE7下渲染如下图

3.jpg

IE怪异模式下渲染,触发条件,去掉下面两行代码

<!DOCTYPE html>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

02.jpg






« 上一篇下一篇 »

相关文章:

CSS3浏览器支持参照表  (2013-2-15 18:51:40)

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。