一、區(qū)別
當不對doctype進行定義時,會觸發(fā)怪異模式皱炉。
在標準模式下,一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
在怪異模式下狮鸭,一個塊的總寬度= width + margin(左右)(即width已經包含了padding和border值)
如圖:
標準盒模型
怪異盒模型
二合搅、box-sizing的使用場景
box-sizing語法:
box-sizing : content-box || border-box || inherit;
當設置為box-sizing:content-box時,將采用標準模式解析計算歧蕉,也是默認模式灾部;
當設置為box-sizing:border-box時,將采用怪異模式解析計算惯退。
目前自己遇到的需要用到非默認模式(即怪異盒模型)的情況:
當兩個塊級元素并排排在一起剛好等于父級元素區(qū)域時赌髓,再添加內邊距或邊框,就需要用到怪異盒模型催跪,不然就出現把另一個元素“擠下去”的情況锁蠕。