盒模型(标准和IE)

最新推荐文章于 2022-07-21 17:49:41 发布

consistent__

最新推荐文章于 2022-07-21 17:49:41 发布

阅读量175

点赞数

本文链接：https://blog.csdn.net/consistent__/article/details/113481004

版权

本文通过一个代码示例探讨了CSS中的盒模型，解释了为何设置100*100的盒子在浏览器中显示为150*150。内容、padding和border在不同盒模型下如何影响元素的总尺寸。标准盒模型中，width仅包含内容宽度，而IE盒模型中width包括内容、padding和border。理解这两种盒模型对于精确布局至关重要。

摘要由CSDN通过智能技术生成

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box</title>
</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        padding: 20px;
        margin: 30px;
        border: rgb(179, 231, 247) 5px solid;
        background-color: pink;
        display: inline-block;
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

效果：
box1
对比代码发现，设置100 * 100长宽比，但呈现出150 * 150的盒子。

控制台示意图：
box2
图中发现设置的100*100出现在了最里面的那个蓝框中，同时发现在这个盒模型中除了设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框）
计算发现：
150=100（长/宽）+20（padding）*2+5（border）*2