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

前言

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

说说你对盒模型的理解

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

是什么

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

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

  1. 内容区(Content)

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

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

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

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

特征

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

html 复制代码
    <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盒模型有什么区别呢?

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

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

IE盒模型

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

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

总结

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

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

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

相关推荐
MyFreeIT14 分钟前
Page光标focus在某个控件
前端·javascript·vue.js
通往曙光的路上14 分钟前
day8_elementPlus
前端·javascript·vue.js
Simon_He15 分钟前
最强流式渲染,没有之一
前端·面试·ai编程
你真的可爱呀16 分钟前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
Jeffrey__Lin17 分钟前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus
咖啡の猫18 分钟前
Vue-MVVM 模型
前端·javascript·vue.js
xvmingjiang19 分钟前
Element Plus el-table 默认勾选行的方法
前端·javascript·vue.js
野生yumeko1 小时前
伪静态WordPress/Vue
前端·javascript·vue.js
爱因斯坦乐1 小时前
【vue】I18N国际化管理系统
前端·javascript·vue.js·笔记·前端框架
一只游鱼1 小时前
vue集成dplayer
前端·javascript·vue.js·播放器·dplayer