盒子模型包括content（內容）、padding（內邊距）、border（邊框）、margin（外邊距）
CSS中有兩個盒子模型，分別是W3C標准模型和IE的怪異模型。
引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 申明文檔的解析類型，那么它到底有多重要呢
解析類型：
BackCompat：怪異模式，瀏覽器自己的模式
CSS1Compat:標准模式，W3C標准解析渲染頁面
如果不做申明，則按照怪異模式進行渲染，不同的瀏覽器渲染有所不同
一、標准模型
W3C 標准模型
二、怪異模型
怪異模型
主要區別是盒子的寬高。
①標准盒子的width和height表示內容content的寬高。 width=（content-width）heigth=（content-height）
②而怪異盒子的width包含padding、content-width、border。height包含content-height、border、padding
width=（border-left+padding-left+content-width+padding+right+border+right）
height=(border-top+padding-top+content-height+padding-bottom+border-bottom)