likes
comments
collection
share

分享一些我在面试时所遇到的CSS问题 （一）

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

前言

在前端面试中，CSS是一个非常重要的考察点，因为它是构建网页界面和用户交互的关键技术之一。年也算过完了，又到了春招的时候，这是一个检验成果的阶段，接下来我会陆续分享一下我在面试时所遇到的与CSS有关的问题。

说说你对盒模型的理解

面试官很喜欢问一些回答面很宽的问题，就比如让你谈谈对盒模型的理解，这里很多小伙伴们就会慌了，我该怎么去全面的回答这个问题呢？其实，回答这类问题，应该有一套固定的回答模式。

是什么

浏览器在页面布局时，将所有的元素表示为一个个矩形盒子，每一个盒子包含四个部分： content, padding, border, margin

如果有小伙伴对这四个部分不太了解的话，我来给大家解释一下：

  1. 内容区（Content） ：

    • 内容区是盒子中用于显示文本、图像、视频或其他任何内容的区域。
    • 它的大小由元素的内容和指定的宽度和高度属性决定。
    • 一般来说，内容区是盒子中的可见部分，它包含了元素的实际内容。

  2. 内边距（Padding） ：

    • 内边距是内容区与边框之间的空白区域，用于控制内容与边框之间的间距。
    • 内边距可以使用 CSS 的 padding 属性进行控制，可以分别设置上、右、下、左四个方向的内边距。
    • 内边距为元素提供了额外的空间，使内容与边框之间具有一定的距离，提升了页面的美观性和可读性。

  3. 边框（Border） ：

    • 边框是围绕内容区和内边距的一条线，用于界定元素的边界。
    • 边框的样式、宽度和颜色可以通过 CSS 的 border 属性进行设置。
    • 边框可以为元素提供视觉上的分隔和装饰效果，突出元素的边界。

  4. 外边距（Margin） ：

    • 外边距是边框与相邻元素之间的空白区域，用于控制元素与其他元素之间的间距。
    • 外边距可以使用 CSS 的 margin 属性进行控制，可以分别设置上、右、下、左四个方向的外边距。
    • 外边距影响着元素在页面布局中的位置和间距，通过调整外边距可以实现元素之间的间隔和对齐。

特征

盒模型有两种体现方式，一种为标准盒模型，一种为怪异盒模型（也称为IE盒模型)

    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 5px solid #000;
            padding: 10px;
            margin: 20px;
        }
    </style>
    <body>
        <div class="box"></div>
    </body>

盒模型是默认以标准盒模型的模式出现的，那么标准盒模型和IE盒模型有什么区别呢？

分享一些我在面试时所遇到的CSS问题 （一）

如图，当盒模型为标准盒模型时，我们设置box的样式为width: 300px,height: 300px,可为什么box的宽高都是330px呢？

因为，我们设置的宽高300px是内容区content的宽高，而三百三还加上了内边距padding的20px和边框border的10px,所以为330px

IE盒模型

我们可以使用box-sizing: border-box,要求浏览器以IE盒模型来加载容器。当以IE盒模型来加载容器时，如图

分享一些我在面试时所遇到的CSS问题 （一）

所设置的宽高300px为内容区content加内边距padding加边框border的宽度。

总结

  1. 是什么？ 浏览器在页面布局时，将所有的元素表示为一个个矩形盒子，每一个盒子包含四个部分： content, padding, border, margin

  2. 标准盒模型 盒子总宽度: widith + padding + border + margin

  3. 怪异盒模型(IE) 盒子总宽度: widith + margin