css盒模型标准盒模型的占地大小在width固定的情况下，会在加上padding和border的值，但是IE盒模型wid

首先提个问题，在写HTML文件时第一行为什么要写<!DOCTYPE html>呢？

什么是盒模型

盒模型分为标准盒模型和IE盒模型，下图是Google开发者工具的截图：

标准盒模型：width = contentWidth + padding + border 、height = contentHeight + padding + border
IE盒模型：width = contentWidth、height = contentHeight

效果如图所示：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>盒模型</title>
    <style>
      body {
        background: #ff000;
      }
      .model {
        width:100px;
        height:50px;
        padding: 10px;
        border: 1px solid green;
        margin: 20px;
      }
      .model2 {
        box-sizing:border-box;
        width: 100px;
        height:50px;
        padding:10px;
        border: 1px solid green;
        margin:20px
      }
    </style>
  </head>
  <body>
    <div class="model">
      标准盒模型
    </div>
    <div class="model2">
      IE盒模型
    </div>
  </body>
</html>

标准盒模型的占地大小在width固定的情况下，会在加上padding和border的值，但是IE盒模型width固定占地大小就是width的值，如果有padding和border的值就会挤占width的位置。

在样式model2中比model多了个box-sizing:border-box;那这个属性值又是什么呢？

box-sizing属性

box-sizing是css3属性，定义了user-agent应该如何计算一个元素的总宽度和总高度，可更改用于计算元素宽度和高度的默认css盒模型，默认值是content-box。可以使用这个属性模拟IE盒模型。

box-sizing : content-box || border-box || inherit

content-box：标准模式
border-box：IE模式
inherit：从父元素继承box-sizing的值

浏览器兼容性：

问题解答

现在想想开头提到的问题，<!DOCTYPE html>是什么？

它是HTML标准网页声明，全称为Document Type HyperText Markup Language，超文本标记性语言，支持HTML5的主流浏览器都认识这个声明，表示网页采用HTML5，这句话一定要放在文本的最前面，告知浏览器使用哪种HTML规范。

在编写页面的时候，如果不声明<!DOCTYPE html>，那Chrome浏览器会将盒子模型解释为w3c标准盒子模型，IE会解释为IE盒子模型，也就是不同的浏览器会以自己的方式去解释盒模型，页面的样式的效果也就不一样，为了避免这种“怪异模式”，我们尽量都使用标准w3c模型，这样可以避免不同浏览器的不兼容。