标准 DOM 盒模型与 IE 盒模型

包括四个部分：margin>border>padding>content

在标准DOM盒模型中，dom 的 width 和 height 仅作用于content （IE6 及早期版本的IE7 下 width 和 height 包括了 border 和 padding）

因此，一个html元素占据的空间不是width和height，而是这四个部分的加总，

另外，由于margin没有内容无法看到(相邻元素都有margin时，你无法凭肉眼确定 dom 占据范围的边界)，如果你设置了border，那么肉眼所见的 DOM 形状就是border>padding>content三项的加总，

但是，所占据的空间仍是四项的加总。

使用标准盒模型的文档渲染模式有:

document.compatMode = "CSS1Compat"

非标准模式(quirke) 下：

document.compatMode = "BackCompat"

为了使用 IE 浏览器使用标准模式，可以使用下面的做法：

1、添加文档声明 <!DOCTYPE html>

2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

outline 属性：盒模型的outline属性是包围在border外面的边线，设置方法跟border一样，但不能针对某一边单独设置，outline不会占用空间，因此，如果你设置了比较粗的outline属性，可能会导致盒模型遮盖旁边的元素，但不会导致盒模型占用空间发生变化，即，盒模型的尺寸不把 outline计算在内，outline没有圆角效果。

box-shadow属性：包围在border外围的阴影效果，不占据空间，跟随border的圆角效果，如果同时设置了box-shadow和outline，outline会覆盖在上面，但是firefox 例外，outline包围在box-shadow外围，因此，如果box-shadow设置的很大在firefox下outline的包围范围变得很大。

css3圆角边框

border-radius: 110px 20px 50px 20px / 70px 80px 90px 100px;

"/" 分割为2部分，前一部分是水平方向半径，后一部分是垂直方向半径，如果忽略"/"及后半部分，表示2个方向使用相同半径。

每部分4个像素参数，从左上角开始，顺时针设置四个角的圆角，如果只写一个，表示四个角使用相同参数，如果只写两个，分别应用到2对对角上，如果只写三个，则第二个参数应用到右上角和左下角(即第二对对角)

注意：

1、 border-radius的像素参数包括了border部分，如果你想画一个圆，四个角上下半径都应该设置为

(width+padding*2+border*2)/2

当然，width、height应该同样大(正方形)。

椭圆形则是：

 border-radius: (width+padding*2+border*2)/2 / (height+padding*2+border*2)/2  ;

2、如果盒模型的border粗细不一，圆角处会自动渐变平滑对接

3、触发鼠标响应事件的范围是边框及content部分，如果圆角设置得很大，可能导致content部分显示在border之外(圆角的弧度无法影响content的显示位置)，那么border之外的content部分也触发鼠标事件

在 chrome 中， box-shadow 部分也出触发鼠标事件，但是 firefox 不会。

IE8以上支持outline，IE9以上支持border-radius和box-shadow.

在低于IE9 的 IE中，对盒模型的解析跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。

有时候，将border、padding计算到 width 和 height 之内，反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。

考虑到这个问题，css3中引入了一个新的属性：box-sizing，它具有"content-box"和"border-box"两个值。

box-sizing:content-box 和 box-sizing:border-box

当我们设置 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准，width和height不包括border和padding。

当我们设置box-sizing: border-box; 时，border和padding则是被包含在宽高之内的。

内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒模型</title>
<style type="text/css">

.a{position:relative;top:20px;left:10px;width:500px;height:300px;border:1px solid black;}
.b{
    position:absolute;
   left:50px;
   top:50px;
   margin:50px;
   padding:30px;
   padding-bottom:10px;
   width:200px;
   height:100px;
   background-color: silver;
   border:20px solid red;
   border-bottom:5px solid green ;   
   border-radius: 150px / 100px 100px 65px 65px  ;
   outline: 50px groove yellow;
   box-shadow: 0 0 30px blue;
  
}

</style>

</head>

<body>

<div class="a">
  <div id="in" class="b">
      hello world
  </div>
</div>

<script type="text/javascript">
   document.getElementById("in").onclick=function(){
      alert(this.id);
   };
</script>

</body>

</html>

标准 DOM 盒模型 与 IE 盒模型

标准 DOM 盒模型与 IE 盒模型