參考： 盒模型理解
前端的盒模型包括兩種，分別是w3c盒模型和ie盒模型。
w3c盒模型包括content、padding、border、margin。其中width = content
ie盒模型包括content、padding、border、margin。其中width=content+padding+border
後來w3c在css3中新增了box-sizing的樣式，屬性包含content-box和border-box；content-box就是預設的樣式，border-box是width包含了content+padding+boder。
（1）content-box 元素的width=content+padding+border（2）border-box 元素的width=width（用樣式指定的寬度）
其他知識點：
1.對於行級元素，margin-top和margin-bottom對於上下元素無效，margin-left和margin-right有效
2.對於相鄰的塊級元素margin-bottom和margin-top 取值方式
1） 都是正數： 取最大值
距離=math.max(margin-botton,margin-top)
2） 都是負數： 取最小值
距離=math.min(margin-botton,margin-top)
3）上面是正數，下面是負數或者 上面是負數，下面是正數： 正負相加
距離=margin-botton+margin-top
理解盒模型
div css有兩種盒模型 標準w3c盒模型 ie盒模型 如何讓瀏覽器能夠按標準盒模型來處理，就是在網頁的頂部加上doctype宣告。如果不加 doctype宣告，那麼各個瀏覽器會根據自己的行為去理解網頁。標準盒模型中width和height指的是內容區域的寬度和高度，增加內邊距 邊框和外邊距不會影...
理解盒模型
div css有兩種盒模型 標準w3c盒模型 ie盒模型 如何讓瀏覽器能夠按標準盒模型來處理，就是在網頁的頂部加上doctype宣告。如果不加 doctype宣告，那麼各個瀏覽器會根據自己的行為去理解網頁。標準盒模型中width和height指的是內容區域的寬度和高度，增加內邊距 邊框和外邊距不會影...
盒模型簡單理解
盒模型 由內而外，由context padding border margin組成的模型 分類 1.標準盒模型 2.ie盒模型 區別 ie盒模型的寬度由context padding border組成。標準盒模型的寬度為context寬度。css設定 標準 box sizing context bo...