标准盒模型和IE盒模型的区别及转换

最新推荐文章于 2024-06-22 17:01:14 发布

nnlss

最新推荐文章于 2024-06-22 17:01:14 发布

阅读量2.7k

点赞数 1

分类专栏：实习所学

本文链接：https://blog.csdn.net/qq_38233172/article/details/91040211

版权

实习所学专栏收录该内容

9 篇文章 0 订阅

订阅专栏

标准盒模型是w3c 标准的盒模型，其包含：
盒子占用宽度：margin2 + border2 + padding2 + width
实际宽度： border2 + padding2 + width
IE盒模型，在IE中content的宽度包括padding和border这两个属性，所以
盒子占用宽度：margin2 + width
实际宽度：width = padding + border + 内容宽度

举个小例子：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style>
        body{
            font-size: 32px;
            background-color: aqua;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 20px solid skyblue;
            padding: 50px;
            margin:50px;
        }
    </style>
</head>

<body>
    <div class="box">
        box
    </div>
    <span>
        1
    </span> 
</body>
</html>

在这里插入图片描述

中间绿色部分是padding的空间

border外围是margin的空间
可以看出页面实现的是w3c盒模型。即默认box-sizing：content-box;

w3c标准盒模型和IE盒模型(怪异盒模型)之间的转换：

CSS3的box-sizing属性
语法：
box-sizing : content-box || border-box || inherit;
在css3中新增了box-sizing属性，具备了以上知识后，我们已经理解：
当为content-box时，将采取标准模式进行解析计算
当为border-box时，将采取怪异模式解析计算
当为inherit时，将从父元素来继承box-sizing属性的值

w3c兼容浏览器，当上个小例子添加box-sizing：border-box;注意真正内容的变化。
在这里插入图片描述
在移动端布局的时候当子元素的width自适应父级元素的50%，父级元素占据整个屏幕的100%；此时，一排刚好两个子元素，
这时给子元素设置padding或者margin都会让第二个子元素挤到下一行，这就是因为当我们在设计的时候默认是W3C标准盒模型，如果要调节布局，这需要转换盒模型，将默认模型转换为怪异模式的盒模型，即需要使用box-sizing：border-box；此时在设置相应的padding值就不会出现被挤下去的布局现象。

nnlss

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
标准盒模型和IE盒模型的区别及转换

标准盒模型是w3c 标准的盒模型，其包含：盒子占用宽度：margin2 + border2 + padding2 + width实际宽度： border2 + padding2 + widthIE盒模型，在IE中content的宽度包括padding和border这两个属性，所以盒子占用宽度：margin2 + width实际宽度：width = padding + border +...
复制链接

扫一扫

专栏目录