css3盒模型：IE6混杂模式下的盒模型
生活随笔
收集整理的這篇文章主要介紹了
css3盒模型：IE6混杂模式下的盒模型
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
IE6混雜模式下的盒模型本來(lái)是IE的特有的，后來(lái)大家發(fā)現(xiàn)，誒還行好用，所以在CSS3中加入了屬性box-sizing，當(dāng)屬性值為border-box時(shí)，則按照混雜模式的原則創(chuàng)建盒子
適用于場(chǎng)景
1.寬度不確定（百分?jǐn)?shù)），但內(nèi)邊距固定；
2.input，因?yàn)槟J(rèn)帶兩像素的邊框，父級(jí)寬度不確定，且input又想與父級(jí)同寬，則可使用該屬性來(lái)實(shí)現(xiàn)
3.輸入框想加padding更方便
還有別的等等， 總之還挺方便的，下面進(jìn)入正題，講一講它和W3C標(biāo)準(zhǔn)模型的盒子有什么區(qū)別吧~
W3C標(biāo)準(zhǔn)的盒模型與IE6混雜模式（怪異模式）的盒模型對(duì)比
W3C：realWidth = contentWidth + padding*2 + border*2
IE6怪異模式：realWidth = width；
contentWidth = width - padding*2 - border*2
兩種模式下，width：180px；padding：10px；border：10px的盒子分別如下
盒模型如下
?代碼如下
<!DOCTYPE html> <html lang="en"> <head><style>div {width: 180px;height: 80px;line-height: 80px;text-align: center;border: 10px solid #424242;padding: 10px;background-color: #f77;color: #fff;float: left;margin-left: 10px;}.demo {line-height: 40px;box-sizing: border-box;}</style> </head> <body><div>W3C標(biāo)準(zhǔn)盒模型</div><div class="demo">IE6的怪異盒模型</div> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的css3盒模型：IE6混杂模式下的盒模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3属性——text
- 下一篇： 贝塞尔曲线 cubic-bezier()