原文鏈接：https://blog.csdn.net/qq_41145685/article/details/104464232
—————————————————————
一、什么是盒子模型(Box Model)
盒子想必大家都是知道的吧！
生活中我們的快遞有盒子包裝著民逼，買的蛋糕也是有盒子包裝著囱持，我們的禮品也是被盒子包裝著逞壁。
模型是什么呢毛俏？
它是主觀意識借助實體或者虛擬表現構成客觀闡述形態(tài)結構的一種表達目的的物件
css中的盒子模型它是可以對元素進行布局考余，設置距離的大小砂豌，這里面包括含有外邊距钻蔑、邊框、內邊距和內容主體這四個部分奸鸯。
二咪笑、CSS中的標準盒子模型(W3c標準的盒子模型)
CSS中的盒子模型也是主觀意識借助實體或者虛擬表現構成客觀闡述形態(tài)結構的一種表達目的的物件，在網頁的實體中我們是看不見實際盒子模型的娄涩。但是我們能夠清楚的看到它起到的作用窗怒。
1、盒子模型由” content(內容)+padding(內邊距)+border(邊框)+margin(外邊距)“四個部分組成
Margin(外邊距) - 清除邊框外的區(qū)域蓄拣，外邊距是透明的扬虚。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區(qū)域球恤，內邊距是透明的辜昵。
Content(內容) - 盒子的內容，顯示文本和圖像咽斧。
2堪置、標準盒子模型的計算
如圖：
標準的盒子模型的大小是：content(區(qū)域內容大小)+padding(內邊距)+border(邊框)+margin(外邊距)；
注：標準盒子的初始設置寬高大小不包含padding张惹、border和margin的大小舀锨。
三、怪異盒子模型(IE標準的盒子模型)
1宛逗、怪異盒模型也叫IE盒子模型
怪異盒主要表現在IE內核瀏覽器中坎匿，當前大部分瀏覽器支持的是W3C的標準盒子模型，不過其他瀏覽器也保留了IE盒子模型的支持，需要在CSS中添加觸發(fā)怪異盒的條件替蔬。
怪異盒子(IE盒子模型)的觸發(fā)條件：
(1) 給元素添加CSS3屬性box-sizing:border-box; (注：所以如果用CSS3新屬性告私，就不要考慮低版本瀏覽器了)
(2)文檔結構的doctype不寫，這個是在IE8 IE7 IE6 IE5等低版本上有承桥，測試可以在win7系統(tǒng)上比較老舊的IE瀏覽器上德挣，win10自帶的新IE瀏覽器不可以。
2快毛、怪異盒子(IE盒子模型)模型的計算
如圖可見添加了怪異盒的div盒子寬度變小了。
標準的盒子模型的大小是：content(區(qū)域內容大小)+margin(外邊距)番挺；
注：怪異盒子的初始設置寬高大小包含padding唠帝、border大小在內，但不包含margin的大小玄柏。
