面试官：说一下css盒子模型

最新推荐文章于 2025-03-26 19:45:04 发布

zhang070514

最新推荐文章于 2025-03-26 19:45:04 发布

阅读量5k

点赞数 3

分类专栏：前端面试 css 文章标签： css 盒子模型

本文链接：https://blog.csdn.net/zhang070514/article/details/114013135

版权

前端面试同时被 2 个专栏收录

11 篇文章

订阅专栏

css

7 篇文章

订阅专栏

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
所有的文档元素（标签）都会生成一个矩形框，我们称为元素框，它描述了一个文档元素在网页布局汇总所占的位置大小。每个盒子除了有自己的大小和位置外，还影响着其他盒子的大小和位置，因此正确了解css盒子模型对我们前端页面布局十分重要。
css的盒子模型包括标准盒子模型和IE盒子模型（怪异模型） 。

借用网络上的两张图片

标准盒子模型：
在这里插入图片描述
IE盒子模型：

从上面两张图中我们可以看出，两种盒子模型的主要区别就是width的包含范围：

标准盒子模型

width就是content的内容，盒子的宽度是 content + padiing + border
IE盒子模型

width是content + padding + border这是三部分的宽度，盒子的宽度就是width

css3中引入了box-sizing属性，box-sizing:content-box 表示标准盒子模型，box-sizing:border-box 表示IE盒子模型

为了更直观的了解盒子模型，下面是一个简单的demo对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            border: 3px solid red;
            padding: 0 10px;
            box-sizing: content-box;  /* 标准盒子模型*/
        }
        #box2{
            width: 100px;
            height: 100px;
            border: 3px solid red;
            padding: 0 10px;
            box-sizing: border-box;  /*   IE盒子模型*!*/
        }
    </style>
</head>
<body>
    标准盒模型  width为content内容的宽度  盒子的宽度为 content + padding + border
    <div id="box1">哈哈哈哈哈</div>
    <p class="p1"></p>
    <p class="p2"></p>
    怪异盒模型  width为 content + padding + border  盒子宽度为width
    <div id="box2">哈哈哈哈哈</div>
    <p class="p3"></p>
    <p class="p4"></p>
</body>
<script>
    var boxWidth1 = document.querySelector('#box1')
    document.querySelector('.p2').innerHTML = 'box的宽度offsetWidth：' + boxWidth1.offsetWidth

    var boxWidth2 = document.querySelector('#box2')
    document.querySelector('.p4').innerHTML = 'box的宽度offsetWidth：' + boxWidth2.offsetWidth
</script>
</html>