标准盒模型和怪异盒模型的区别

最新推荐文章于 2024-04-05 08:27:21 发布

励志成为前端大佬

最新推荐文章于 2024-04-05 08:27:21 发布

阅读量4.3k

点赞数 4

文章标签：前端 html css css3

本文链接：https://blog.csdn.net/lizhichengwei/article/details/128058256

版权

我们先来学习下W3c标准盒子模型

W3c标准盒子模型是由：content（内容）,margin（外边距）,padding（内边距）,border（边框）组成。

那么标准盒模型和怪异盒模型（ie盒子模型）的区别在哪里呢？

标准盒与怪异和的区别在于他们的总宽度的计算公式是不一样的

标准盒模型总宽度=width+margin(左右)+padding（左右）border（左右）

怪异盒模型总宽度=width+margin（左右）（width已经包含了padding和border值

扩展：

box-sizing:border-box一般设置在通配符里面

布局中，如果width和height已经确定了，不过后面会修改border或者padding，默认的盒子模型，肯定会让盒子大小发生改变，我会设置box-sizing:border-box，这样，我们的盒子不发生变化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

励志成为前端大佬

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
标准盒模型和怪异盒模型的区别

布局中，如果width和height已经确定了，不过后面会修改border或者padding，默认的盒子模型，肯定会让盒子大小发生改变，我会设置。怪异盒模型总宽度=width+margin（左右）（width已经包含了padding和border值。标准盒模型总宽度=width+margin(左右)+padding（左右）border（左右）标准盒模型和怪异盒模型（ie盒子模型）的区别。他们的总宽度的计算公式是不一样的。，这样，我们的盒子不发生变化。标准盒与怪异和的区别在于。一般设置在通配符里面。
复制链接

扫一扫