盒模型(标准和IE)

最新推荐文章于 2023-12-14 14:03:21 发布

consistent__

最新推荐文章于 2023-12-14 14:03:21 发布

阅读量134

点赞数

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

版权

代码：

<!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

CSS两种盒模型

引起上面效果的原因来自于 css 的两种盒模型的不同

标准盒子

在标准的盒子模型中，width指content部分的宽度

IE盒子

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

优惠劵

consistent__

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
盒模型(标准和IE)

代码：<!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{
复制链接

扫一扫