盒子模型-怪异模式和标准模式

首先，两种模式可以利用box-sizing属性进行自行选择：

标准模式：box-sizing:content-box;

怪异模式：box-sizing:border-box;

两种模式的区别：

标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。

例：

.box{
box-sizing:border-box; //没有添加时，按照标准模式计算， 添加时按照怪异模式解析
width:200px;
height:200px;
border:2px solid black;
padding:50px;
margin:50px;
}

标准模式：盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin。效果：

1.png

怪异模式：盒子总宽度/高度=width/height+margin。效果：

2.png

前言

[摘自w3c]http://www.w3school.com.cn/css/css_boxmodel.asp

• 盒模型分为 标准 w3c 盒子模型、IE 盒子模型，以及css3中的 伸缩盒模型。

• 注意区分：盒子模型的宽高、盒子的实际宽高、盒子内容content的宽高

• 我们一般理解的盒子模型是标准盒子模型

• 我们在DOM操作中一般使用的是盒子的实际大小，margin 不参与计算

标准盒模型（w3c 盒子模型）

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式，其模型图如下：

1.png

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

w3c中的盒子模型占用的大小：margin + border + padding + width/height;
width: margin2 + border2 + padding2 + width;
height: margin2 + border2 + padding2 + height;

w3c中盒子模型的实际大小：border + padding + width/height;
width: border2 + padding2 + width;
height: border2 + padding2 + height;

w3c中盒子模型的内容区域的大小：width/height
width: width;
height: height;

怪异盒模型（IE 盒子模型）

相较于标准盒模型，IE盒模型最大的不同在于：
IE 盒子模型的 content 部分包含了 border 和 padding 这两个属性。

IE 盒子模型占用的宽度：margin + content-width/height;
width: margin2 + width;
height: margin2 + height;

IE 盒子模型的实际大小：content-width/height
width: width;
height: height;

实例对比

例如一个盒子模型如下：
margin:20px; border:10px; padding:10px; width:200px; height:50px;

1.使用w3c盒子模型解释：

• 盒子模型占用的大小为：
  宽度：20x2+10x2+10x2+200=280px;
  高度：20x2+10x2+20x2+50=130px;

• 盒子的实际大小为：
  宽度：10x2+10x2+200=240px;
  高度：10x2+20x2+50=90px;
• 盒子内容的大小为：
  宽度：200px;
  高度：50px;

2.使用IE盒子模型解释：

• 盒子模型占用的大小为：
  宽度：20x2+200=240px;
  高度：20x2+50=90px;

• 盒子的实际大小为：
  宽度：200px;
  高度：50px;