CSS處理網頁內容時，會把每一個元素"放在"一個盒子里,也就是所謂的盒子模型。

　　盒子模型包括4部分：內容,內邊距(padding),邊框(border)和外邊距(margin)

　　上圖展示了整個盒子模型的內容，怎么樣？簡單吧。如果你認為簡單，那就大錯特錯了!!

盒子模型里邊有一個坑，就是取元素的height和width時，可以多種方式來指定這個高和寬屬性。換句話說在某些情況下，一個元素的height和width是不一樣的。那么究竟是哪些情況下呢？答案就是box-sizing屬性。這個屬性設值不一樣,元素的height和width就不一樣。

　　1) box-sizing:content-box. 也就是默認值。

　　在上圖中，height和width就是最內側矩形(內容區域)的高和寬。

　　2）box-sizing:padding-box

　　在上圖中，height和width就是最內側矩形(內容區域)的高和寬加上各自的padding。

3) box-sizing:border-box

　　在上圖中，height和width就是最內側矩形(內容區域)的高和寬加上各自的padding，在加上border寬度。

　　怎么樣，有點坑吧，不過這個坑還沒有完全填好。這個丫的box-sizing屬性還TM跟瀏覽器相關，不同瀏覽器屬性名稱前綴還不一樣，這一點容易看出來，在IDE里邊敲屬性名稱時候自然就提示出來了。

　　一般瀏覽器：box-sizing

　　Firefox用的是：-moz-box-sizing

　　移動設備安卓/IOS：-webkit-box-sizing

　　怎么樣，這個CSS知識點掌握了吧。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com