?

什么是盒模型？

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

盒模型的分類？

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

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

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

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

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

?

?

?

?

?

效果：

不加box-sizing的效果

?

加box-sizing的效果

?

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

總結(jié)

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

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