css3盒模型：IE6混杂模式下的盒模型

最新推荐文章于 2022-04-04 17:41:05 发布

桃花扇J

最新推荐文章于 2022-04-04 17:41:05 发布

阅读量263

点赞数 1

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_44584442/article/details/105248706

版权

CSS3 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

IE6混杂模式下的盒模型本来是IE的特有的，后来大家发现，诶还行好用，所以在CSS3中加入了属性box-sizing，当属性值为border-box时，则按照混杂模式的原则创建盒子

适用于场景

1.宽度不确定（百分数），但内边距固定；

2.input，因为默认带两像素的边框，父级宽度不确定，且input又想与父级同宽，则可使用该属性来实现

3.输入框想加padding更方便

还有别的等等，总之还挺方便的，下面进入正题，讲一讲它和W3C标准模型的盒子有什么区别吧~

W3C标准的盒模型与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标准盒模型</div>
    <div class="demo">IE6的怪异盒模型</div>
</body>
</html>

桃花扇J

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3盒模型：IE6混杂模式下的盒模型

IE6混杂模式下的盒模型本来是IE的特有的，后来大家发现，诶还行好用，所以在CSS3中加入了属性box-sizing，当属性值为border-box时，则按照混杂模式的原则创建盒子适用于场景1.宽度不确定（百分数），但内边距固定；2.input，因为默认带两像素的边框，父级宽度不确定，且input又想与父级同宽，则可使用该属性来实现3.输入框想加padding更方便还有别的等等...
复制链接

扫一扫