當(dāng)前位置：
首頁 >
css3盒模型：IE6混杂模式下的盒模型
發(fā)布時間：2024/2/28
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
css3盒模型：IE6混杂模式下的盒模型
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
IE6混雜模式下的盒模型本來是IE的特有的，后來大家發(fā)現(xiàn)，誒還行好用，所以在CSS3中加入了屬性box-sizing，當(dāng)屬性值為border-box時，則按照混雜模式的原則創(chuàng)建盒子
適用于場景
1.寬度不確定（百分?jǐn)?shù)），但內(nèi)邊距固定；
2.input，因為默認(rèn)帶兩像素的邊框，父級寬度不確定，且input又想與父級同寬，則可使用該屬性來實現(xiàn)
3.輸入框想加padding更方便
還有別的等等， 總之還挺方便的，下面進(jìn)入正題，講一講它和W3C標(biāo)準(zhǔn)模型的盒子有什么區(qū)別吧~
W3C標(biāo)準(zhǔn)的盒模型與IE6混雜模式（怪異模式）的盒模型對比
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混杂模式下的盒模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3属性——text
- 下一篇： 贝塞尔曲线 cubic-bezier()