?

什么是盒模型？

css中的每個元素都是一個盒模型， 包括html body元素， 瀏覽器解析css的時候也會把每個元素看成一個盒子來解析。 盒模型具備的屬性有： content 、padding 、margin、border 、background等

盒模型的分類？

tips：border-box俗稱混雜盒模型，content-box是w3c組織定義的盒模型。

IE6混雜盒模型： 觸發(fā)怪異模式 怪異模式下可以給行內(nèi)元素加寬高， 圖片的padding值會失效 margin:0 auto不好使

觸發(fā)怪異模式并不能讓頁面對頁面中的盒子用IE6混雜盒模型來解析 怎么能用IE6混雜模式盒模型來解析呢 ？ 怪異模式 IE6瀏覽器

css3中的可以選擇盒模型的類型: box-sizing: border-box/content-box;

盒模型實現(xiàn)布局

?

?

?

?

?

效果：

不加box-sizing的效果

?

加box-sizing的效果

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的css3之盒模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。