likes
comments
collection
share

速通面试常考点：CSS盒子模型

作者站长头像
站长
· 阅读数 20

关于这个常见考点，网上也有很多的总结，我也给我自己总结一下。

面试官： 说说你对css盒子模型的理解

盒子模型是什么？

盒子模型是CSS布局的基础概念之一，它定义了一个HTML元素的内容在网页上如何被显示。当浏览器在渲染一个html容器时，会根据某一个标准来绘制出一个矩形，该矩形包含content、padding、border、margin，这就是盒子模型。

速通面试常考点：CSS盒子模型

这张图就很好说明了盒子模型的构造。

有哪些标准对于盒子模型？

既然浏览器在渲染html容器会根据某个标准绘制一个矩形，那根据不同的标准，就分成不同的盒子模型，分为了两种盒子模型：标准盒模型，IE盒模型

速通面试常考点：CSS盒子模型

对于这个两个box，它们设置的width、height、padding、border、margin都是一样，但却呈现不一样的大小，原因就在于不同的标准。

速通面试常考点：CSS盒子模型

速通面试常考点：CSS盒子模型

  • W3C标准盒模型（Standard Box Model）： 这是W3C规范中定义的盒模型。在这个模型中，一个元素的宽度（width）和高度（height）只包括元素的内容区域。边框（border）、内边距（padding）和外边距（margin）都是独立于width和height之外的，并且会增加元素的总尺寸。例如，如果一个元素的width是100px，padding是10px，border是5px，则该元素的总宽度将是100px（内容）+ 20px（左右内边距）+ 10px（左右边框）= 130px。

    • 标准盒模型：width = content

         盒子总宽度 = width + padding + border + margin

  • IE盒模型（Quirks Mode Box Model 或者称为 IE盒模型/怪异盒模型）： 这个模型最初是由Internet Explorer 5和更早版本的浏览器使用的，它与W3C的标准不同。在这个模型中，元素的width和height属性包含了内容、内边距和边框的总和。因此，如果一个元素的width是100px，padding是10px，border是5px，在IE盒模型中，元素的总宽度仍然是100px，因为padding和border已经包含在width之内了。

    • IE盒模型：width = content + padding + border

        盒子总宽度 = width + margin

通俗易懂来说，就是制定了两个标准，标准盒模型就是padding 、border在width之外，去扩展width的地盘，让真正的领地面积更大，而IE盒模型是将padding 、border限定在width之内，当定死了width之后，领地会因为padding 、border缩小面积。

应用场景

对于不同的需要，我们需要用到不同的盒子模型，有的时候我们需要让这个容器最大宽度定死，padding 和 border 都是在width内的就需要用到IE盒模型，我们不希望padding和border把盒子撑开；但是有的时候我们只需要定死content的width所以可以用到标准盒模型，所以涉及到以下的切换盒子模型的属性

设置box-sizing属性来切换盒子模型。box-sizing属性有两个主要的值：content-box和border-box。

  1. content-box（默认值） ：

    • 在content-box模型中，width和height只包括内容区域，不包括内边距、边框和外边距。
    • 这是CSS盒子模型的默认行为。

  2. border-box：

    • 在border-box模型中，width和height包括内容区域、内边距和边框，但不包括外边距。
    • 这种模型可以让元素的总宽度和高度更容易计算和控制。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Model Example</title>
  <style>
    .content-box {
      box-sizing: content-box;
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 10px solid black;
      margin: 10px;
      background-color: lightblue;
    }

    .border-box {
      box-sizing: border-box;
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 10px solid black;
      margin: 10px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="content-box">标准盒模型</div>
  <div class="border-box">IE盒模型</div>
</body>
</html>

如果这对你有帮助，不妨点个免费的赞

速通面试常考点：CSS盒子模型

转载自:https://juejin.cn/post/7397621747926319141
评论
请登录