By

Contents
  1. 1. 盒模型
    1. 1.1. IE盒子模型和W3C盒子模型
      1. 1.1.1. W3C模型中：
      2. 1.1.2. IE盒模型：
    2. 1.2. 标准模式与怪异模式
    3. 1.3. 解决办法：
    4. 1.4. CSS3指定盒子模型种类

今天读一个布局文章时候看到的一些问题，想说从现在开始进行整理给自己看看。

盒模型

之前面试的时候经常被问这个，讲的可能不好，现在总结一下

IE盒子模型和W3C盒子模型

盒子模型分为上述两种，W3C盒子模型也就是W3C的标准。

这两个模型的唯一区别是计算width和height时，IE盒子模型包含padding和border, W3C盒子模型则不包括。

W3C模型中：

　　　　　　CSS中的宽（width）=内容（content）的宽

　　　　　　CSS中的高（height）=内容（content）的高


image
eg:

　　　　<div style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">W3C模型</div>
则此div的实际大小：
　　　　　　　　div高=height+（padding+border+margin）2=50+(2+1+3)2=62px;

　　　　　　　　div宽=width+（padding+border+margin）2=50+(2+1+3)2=62px;
div内容占大小：

　　　　　　　　div高=height=50px;

　　　　　　　　div宽=width=50px;

IE盒模型：

　　　　　　CSS中的宽（width）=内容（content）的宽+（border+padding）*2

　　　　　　CSS中的高（height）=内容（content）的高+（border+padding）*2
image
eg:

　　　　<div style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">W3C模型</div>

则此div的实际大小：

　　　　　　　　div高=height+margin2=50+32=56px;

　　　　　　　　div宽=width+margin2=50+32=62px;

div内容占大小：

　　　　　　　　div高=height-（border+padding）2=50-（1+2）2=44px;

　　　　　　　　div宽=width-（border+padding）2=50-（1+2）2=44px;

标准模式与怪异模式

为了使页面在不同浏览器下呈现相同的效果，必须统一盒子模型。
那么必须设置浏览器的渲染模式是标准模式，在标准模式下，IE6+和其他现代浏览器会以W3C盒子模型渲染。（在怪异模式下，IE中只有IE9+会用W3C盒子模型。

解决办法：

在代码顶部加如下的 doctype 声明，

　　<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

使页面以W3C盒子模型渲染。

eg：

1
2
3
4
5
6
7
8
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
　　<html>
　　<head>
　　　　<title>标准w3c盒子模型</title>
　　</head>
　　<body>
　　</body>
　　</html>

为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型。

CSS3指定盒子模型种类

box-sizing

Contents
  1. 1. 盒模型
    1. 1.1. IE盒子模型和W3C盒子模型
      1. 1.1.1. W3C模型中：
      2. 1.1.2. IE盒模型：
    2. 1.2. 标准模式与怪异模式
    3. 1.3. 解决办法：
    4. 1.4. CSS3指定盒子模型种类