包括四个部分：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>
来源：https://www.cnblogs.com/ecalf/archive/2012/11/25/2788290.html