likes
comments
collection
share

大厂面试常考题：CSS布局的盒子模型

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

在前端开发中，理解和掌握CSS的盒子模型是非常重要的，因为它是页面布局的基础。CSS盒子模型描述了每个HTML元素如何占据空间以及它们如何相互作用。今天就让我们一起来探讨一下CSS盒子模型中的小细节。

盒子模型

何为盒子模型？

盒子模型（Box Model）是CSS（层叠样式表）中一个核心的概念，用于描述HTML文档中每个元素的布局和渲染方式。在网页设计中，每个HTML元素都可以被视为一个矩形盒子，这个盒子包含了以下几个关键的部分：

大厂面试常考题：CSS布局的盒子模型
  1. Content（内容） : 这是元素的核心区域，用于显示文本、图片或其他内容。内容区的尺寸可以通过width和height属性来设置。
  2. Padding（内边距） : 内边距是在内容区和边框之间的空白区域。可以通过padding属性来调整，它可以接受不同的值，分别对应上、右、下、左四个方向的内边距。
  3. Border（边框） : 边框位于内边距的外围，用于包围整个元素。边框可以有多种样式，如实线、虚线、点线等，可以通过border-width、border-style和border-color属性来设置。
  4. Margin（外边距） : 外边距是边框之外的空白区域，它不占据任何内容，但可以影响元素之间的间距。margin属性同样可以设置不同的值，控制元素四周的外部间距。

盒子模型的计算规则

首先，先让我们来看如下一个简单盒子模型的例子；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .row{
            background-color: red;
        }
        .col{
            width: 50%; 
            height: 200px;
            background-color: blue;
        }
        .col:nth-last-child(1){       
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
    </div>
</body>
</html>

在上面的示例中，我们可以得到如下的效果；

大厂面试常考题：CSS布局的盒子模型

如果我们要把1和2两个子容器排列到一起，我们可以给col加上一个向左的浮动布局，这样就可以打破块级元素不能在同一行的规则，让他们排列到同一行中。

.col{
            width: 50%;
            height: 200px;
            background-color: blue;
            float: left;
        }

如下图，两个子容器排列到同一行中了。

大厂面试常考题：CSS布局的盒子模型

box-sizing

再来看，如果我们给两个子容器都加上一个border边框，页面会发生变化吗？

.col{
            width: 50%;
            height: 200px;
            background-color: blue;
            float: left;
            border: 1px solid red;
        }

效果如下，两个子容器又重新换行排列了；这是因为子容器的border边框也占据了页面的大小，所以会导致两个盒子在同一行中放不下，而被挤下去了。

大厂面试常考题：CSS布局的盒子模型

这就是盒子模型它自身的默认计算规则导致的；默认box-sizing：content-box；也称标准盒模型。

标准盒模型

标准盒模型（Standard Box Model）是CSS中定义元素尺寸和布局的一种方式；box-sizing：content-box；当设置为 content-box 时，元素的 width 和 height 仅计算内容区的尺寸，而不包括内边距 (padding) 和边框 (border) 的尺寸。这意味着如果给元素添加了内边距或边框，元素的总宽度和总高度将会增加。

大厂面试常考题：CSS布局的盒子模型

在标准盒模型中，box-sizing = content内容 + padding + border + margin；也就是说一个盒子模型在页面上的占位，会把内容以及盒子的内外边距和边框都计算进去。

IE 盒模型

在上面的例子中，如果我们要把加了border边框的两个子容器给排列到同一行中，我们可以怎么做呢？ 除了标准盒模型的计算方式外，还有一个IE盒模型也是常用的盒子模型计算规则，box-sizing: border-box;。

IE盒模型，有时也被称作“quirks mode box model”（怪异模式盒模型）或“legacy box model”（遗留盒模型），是早期版本的Internet Explorer（IE）浏览器在渲染CSS布局时采用的一种非标准的盒模型实现。在IE盒模型中，元素的width和height属性包含了内边距(padding)和边框(border)的尺寸。

大厂面试常考题：CSS布局的盒子模型

也就是说，在IE盒模型中，box-sizing: border-box; border边框及以内（内边距）的都属于width；box-sizing = content内容 + padding + border 。

利用IE盒模型的特性，我们可以给上面的例子中，添加一条IE盒模型的计算规则，box-sizing: border-box;让两个子容器又能够重新排列到同一行中。

大厂面试常考题：CSS布局的盒子模型

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .row{
            background-color: red;
            overflow: hidden;
        }
        /* 盒子模型 一个盒子在页面上的占位
            box-sizing = content内容 + padding + border + margin  */
        .col{
            /* 两列式布局 */
            /* box-sizing 盒模型的使用方式 */
            box-sizing: border-box; /* border 及以内的都属于width */
            border: 1px solid red;
            padding: 5px;
            float: left;
            width: 50%; /* content + padding + border 屏幕宽度50% - 2px */
            height: 200px;
            background-color: blue;
        }
        .col:nth-last-child(1){
            
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
    </div>
</body>
</html>
转载自:https://juejin.cn/post/7388088513457881097
评论
请登录