当前位置： 首页 > news >正文

【面试题】面试官：说说你对 CSS 盒模型的理解

news 2025/6/8 8:05:30

前言

CSS 盒模型是 CSS 基础的重点难点，因此常被面试官们拿来考察候选人对前端基础的掌握程度，这篇文章将对 CSS 盒模型知识点进行全面的梳理。

我们先看个例子：下面的 div 元素的总宽度是多少呢？

js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>CSS 盒模型(https://github.com/webharry/fe-interview)</title>
<style>
div {background-color: lightgrey;width: 200px;border: 10px solid yellow;padding: 10px;margin: 20px;
}
</style>
</head>
<body><div>这里是盒子内的实际内容。有 10px 内间距，20px 外间距、10px 黄色边框。</div>
</body>
</html>

要回答这个问题，我们首先得弄明白 CSS 盒模型。

什么是 CSS 盒模型？

每个HTML元素都由一个矩形框（盒子）组成，称为盒模型。CSS 盒模型定义了一个 HTML 元素的尺寸和边距。

盒模型的各个部分

CSS 中组成一个盒子需要：

  • Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height。
  • Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

如图所示：

CSS 有两种盒模型：标准盒模型和IE盒模型。

  • 标准盒模型：元素的宽度和高度只包括内容（content），不包括内边距（padding）、边框（border）和外边距（margin）。
  • IE盒模型：元素的宽度和高度包括内容（content）、内边距（padding）和边框（border），但不包括外边距（margin）。

两种盒模型的区别是什么？

这两种盒模型的区别在于它们如何计算元素的宽度和高度，以及如何处理元素的内边距、边框和外边距。

  • 在标准盒模型中，元素的宽度和高度只包括内容，因此设置宽度和高度时需要考虑内边距、边框和外边距对它们的影响。
    • 如图：

  • 而在IE盒模型中，元素的宽度和高度包括内边距和边框，因此设置宽度和高度时不需要考虑内边距和边框对它们的影响。
    • 如图：

重要:  当您指定一个 CSS 元素的宽度（width）和高度（height）属性时，你只是设置内容区域（content）的宽度和高度。

两种盒模型间如何转换？

可以通过设置 CSS 的 box-sizing 属性来指定使用哪种盒模型。默认情况下，box-sizing 属性的值为 content-box，即使用标准盒模型。可以将其设置为 border-box，即使用IE盒模型。

写在最后

现在，我们再来看文章开头的例子，答案显而易见。因为在默认情况下，box-sizing 属性的值为 content-box，即使用标准盒模型。所以例子中的 div 元素总宽度是 200+10x2+10x2=240px。

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全

相关文章：

【面试题】面试官：说说你对 CSS 盒模型的理解

前言 CSS 盒模型是 CSS 基础的重点难点&#xff0c;因此常被面试官们拿来考察候选人对前端基础的掌握程度&#xff0c;这篇文章将对 CSS 盒模型知识点进行全面的梳理。 我们先看个例子&#xff1a;下面的 div 元素的总宽度是多少呢&#xff1f; js <!DOCTYPE html> &…...

编程日记 2023/5/19 6:12:39

【ROS2】学习笔记

1. 基础概念 1.1 执行单元 1.1.1 executable——执行程序 executable表示针对某个目标的程序执行流程&#xff0c;一个executable可以启动多个node&#xff1b; 1.1.2 node——“进程” node其实就是进程的意思&#xff1b; ROS2允许同时启动两个相同的node&#xff0c;&a…...

编程日记 2023/5/30 20:58:32

Springboot +Flowable，流程表单应用之外置表单（JSON形式）（二）

一.简介 整体上来说&#xff0c;我们可以将Flowable 的表单分为三种不同的类型&#xff1a; 动态表单 这种表单定义方式我们可以配置表单中每一个字段的可读性、可写性、是否必填等信息&#xff0c;不过不能定义完整的表单页面。外置表单 外置表单我们只需要定义一下表单的 k…...

编程日记 2023/5/30 15:25:08

JavaScript如何使用if语句

JavaScript的if语句可以让我们根据某些条件来执行不同的代码块。使用if语句的基本思路是将要执行的代码放在括号内&#xff0c;并使用if关键字进行匹配。下面是一些例子&#xff1a; 简单的if语句&#xff1a; let age 18; if (age > 18) { console.log("You are…...

编程日记 2023/5/30 5:27:03

XSS攻击以及java应对措施

文章目录 一. XSS攻击介绍1. 前端安全2. xss攻击简介3. xss的攻击方式 二. java应对xss攻击的解决方案1. 强制修改html敏感标签内容2. 利用过滤器过滤非法html标签 一. XSS攻击介绍 1. 前端安全 随着互联网的高速发展&#xff0c;信息安全问题已经成为企业最为关注的焦点之一…...

编程日记 2023/5/19 5:52:28

yolo 训练

这里写目录标题 分配训练集&Validation数量数据集读取读取全部文件夹替换路径 loss weightNMSBBox_IOUEIou Optimizer 分配训练集&Validation数量 validation_size training_size * validation_ratio / (1 - validation_ratio)training_size 219 validation_ratio …...

编程日记 2023/5/19 5:47:27

谷歌chrome浏览器升级新版后字体显示不清楚解决方案

谷歌chrome浏览器升级新版后字体显示不清楚解决方案 参考图片&#xff1a; Chrome更新至版本Chrome 109.0.5414.120 字体看不清 浏览器症状与表现 Chrome更新至版本Chrome 109.0.5414.120 字体看不清&#xff1b;会很细&#xff0c;在设置中选择自定义的字体&#xff0c;仍无法…...

编程日记 2023/5/19 5:42:25

在外包干了三年，我废了……不吹不黑！

没错&#xff0c;我也干过外包&#xff0c;一干就是三年&#xff0c;三年后&#xff0c;我废了…… 虽说废的不是很彻底&#xff0c;但那三年我几乎是出差了三年、玩了三年、荒废了三年&#xff0c;那三年&#xff0c;我的技术能力几乎是零成长的。 说起这段三年的外包经历&a…...

编程日记 2023/5/19 5:37:23

【Vue】学习笔记-消息的订阅与发布

消息的订阅与发布(基本不用) 消息订阅与发布(pubsub)消息订阅与发布是一种组件间的通信的方式&#xff0c;适用于任意组件间通信 消息订阅与发布 1.订阅消息∶消息名 2.发布消息︰消息内容 消息订阅与发布的工作流程&#xff1a; &#xff08;A是订阅者&#xff0c;B是发布…...

编程日记 2023/5/19 5:32:21

大疆无人机 MobileSDK（遥控器/手机端）开发 v5版＜1＞

文章目录 概要整体架构流程技术细节SDK 架构体系概述层级架构智能任务空白项目集成 MSDK新建空白项目新建 MyApplication.kt 文件修改 build.gradle(Module) 文件修改 AndroidManifest.xml 文件修改 MainActivity.kt 文件导入 UXSDK 开源框架4.X 和 5.X 版本差异说明DJIKey差异…...

编程日记 2023/5/19 5:27:20

azkaban介绍

目录 为什么需要工作流调度系统 什么是azkaban azkaban适用场景 azkaban特点 常见的工作流调度系统 azkaban和Ooize特性对比 azkaban的架构 azkaban调度的任务有可能有那些类型 总结 为什么需要工作流调度系统 一个完整的大数据分析系统&#xff0c;必然由很多任务单…...

编程日记 2023/5/19 5:22:19

自学黑客（网络安全）必学内容

随着时代的发展&#xff0c;经济、社会、生产、生活越来越依赖网络。而随着万物互联的物联网技术的兴起&#xff0c;线上线下已经打通&#xff0c;虚拟世界和现实世界的边界正变得模糊。这使得来自网络空间的攻击能够穿透虚拟世界的边界&#xff0c;直接影响现实世界的安全。 …...

编程日记 2023/5/30 3:39:43

Java每日一练(20230518) 移除元素、跳跃游戏II、复原IP地址

目录 1. 移除链表元素 &#x1f31f; 2. 跳跃游戏 II &#x1f31f;&#x1f31f; 3. 复原 IP 地址 &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 移…...

编程日记 2023/5/19 5:12:15

diff命令和vimdiff命令

文章目录 diff命令基本用法选项示例 vimdiff命令命令格式选项说明常用操作 diff命令 diff命令是一个文本比较工具&#xff0c;用于比较两个文件的内容&#xff0c;它会逐行比较两个文件的内容并输出它们之间的差异。下面是diff命令的常用选项和用法&#xff1a; 基本用法 比…...

编程日记 2023/5/19 5:07:13

AcWing 797.差分（C++）

目录 1.题目描述 2.AC 1.题目描述 797.差分 输入一个长度为 nn 的整数序列。 接下来输入 mm 个操作&#xff0c;每个操作包含三个整数 l,r,cl,r,c&#xff0c;表示将序列中 [l,r][l,r] 之间的每个数加上 cc。 请你输出进行完所有操作后的序列。 输入格式 第一行包含两…...

编程日记 2023/5/31 5:54:54

Python每日一练(20230515) 只出现一次的数字 I\II\III

目录 1. 只出现一次的数字 Single Number 2. 只出现一次的数字 II Single Number II 3. 只出现一次的数字 III Single Number III &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 leetcod…...

编程日记 2023/5/19 4:57:10

基于【EasyDL】【图像分类】实现农作物病害识别小程序

内容、数据集来源:基于飞桨的农作物病害智能识别系统 - 飞桨AI Studio 项目背景 联合国粮食及农业组织的一份报告表明&#xff0c;每年农业生产的自然损失中有三分之一以上是由农业病虫害造成的&#xff0c;使这些成为当前影响农业生产和农业生产的最重要因素。需要考虑的农业…...

编程日记 2023/5/19 4:52:09

元宇宙又“死”了！Epic老板：你当6亿用户是摆设？

“扎克伯格花了数年时间试图让Metaverse成为现实&#xff0c;但现在它已被AI取代&#xff0c;并走向科技创意的坟墓。”一篇表达“元宇宙已死”的文章近期在推特上引发热议&#xff0c;而游戏制作公司Epic Games CEO Tim Sweeney的还击更是让这个话题热上加热。 “搞一次在线守…...

编程日记 2023/5/19 4:47:08

阶段小结2022

工作马上一年&#xff0c;对于一年工作能力提升可能逐步在提升&#xff0c;业务能力也在慢慢提升&#xff0c;虽然没有一年前想象的飞起状态&#xff0c;但是刚接触这一行&#xff0c;希望越来越好。 之前每次的遇到的问题其实都会在笔记或者博客中记录&#xff0c;但是没有整体…...

编程日记 2023/5/19 4:42:06

linux0.12-8-11-vsprintf.c

[383页] 1、 这一小节可以不看代码如何实现&#xff0c;因为标准的C库函数&#xff1b; 2、 等自己看完的这本书&#xff0c;有兴趣过来研究研究也是可以的。 8-11 vsprintf.c程序 8-11-1 功能描述 该程序主要包括vsprintf(),用于对参数产生格式化的输出。由于该函数是C函数…...

编程日记 2023/5/19 4:37:03

Java 2D 图形类总结与分类

一、基本形状类 这些类用于绘制简单的标准几何形状。 1. 圆形 / 椭圆类 Ellipse2D&#xff1a;椭圆基类&#xff0c;支持浮点精度。 子类&#xff1a; Ellipse2D.Double&#xff1a;双精度浮点坐标。Ellipse2D.Float&#xff1a;单精度浮点坐标。 参数&#xff1a;x, y, wid…...

编程新知 2025/6/8 3:58:26

Vue-3-前端框架Vue基础入门之VSCode开发环境配置和Tomcat部署Vue项目

文章目录 1 安装配置VSCode1.1 安装中文语言插件1.2 主题颜色1.3 禁用自动更新1.4 开启代码提示设置1.5 安装open in browser插件2 安装配置nodejs2.1 配置环境变量2.2 npm与maven的区别2.3 使用npm避坑3 创建Vue项目3.1 两种创建方式3.2 package.json3.3 安装新的依赖3.4 运行…...

编程新知 2025/6/8 3:46:03

JVM 内存溢出 详解

内存溢出 内存溢出指的是内存中某一块区域的使用量超过了允许使用的最大值&#xff0c;从而使用内存时因空间不足而失败&#xff0c;虚拟机一般会抛出指定的错误。 在Java虚拟机中&#xff0c;只有程序计数器不会出现内存溢出的情况&#xff0c;因为每个线程的程序计数器只保…...

编程新知 2025/6/8 1:42:48

pytorch3d+pytorch1.10+MinkowskiEngine安装

1、配置pytorch1.10cuda11.0 pip install torch1.10.1cu111 torchvision0.11.2cu111 torchaudio0.10.1 -f https://download.pytorch.org/whl/cu111/torch_stable.html 2、配置 MinkowskiEngine库 不按下面步骤&#xff0c;出现错误 1、下载MinkowskiEngine0.5.4到本地 2、查看…...

编程新知 2025/6/7 23:12:04

如何自动部署GitLab项目

如何自动部署 原理 GitLab有预制的钩子, 在代码提交/合并等事件中,会自动调用WebHoos, 即向该URL发送POST请求在布署服务器上监听该POST, 验证通过后执行相关的布置Shell脚本, 即可完成自动布署 配置环境 安装Python和Pip 2.如果需要, 安装python的requests模块和argparse模…...

编程新知 2025/6/7 22:07:48

【C语言】C语言经典小游戏：贪吃蛇（上）

文章目录 一、游戏背景及其功能二、Win32 API介绍1、Win32 API2、控制台程序3、定位坐标&#xff08;COORD&#xff09;4、获得句柄&#xff08;GetStdHandle&#xff09;5、获得光标属性&#xff08;GetConsoleCursorInfo&#xff09;1&#xff09;描述光标属性&#xff08;CO…...

编程新知 2025/6/7 15:37:20

逻辑回归与Softmax

Softmax函数是一种将一个含任意实数的K维向量转化为另一个K维向量的函数，这个输出向量的每个元素都在(0, 1)区间内，并且所有元素之和等于1。 因此，它可以被看作是某种概率分布，常用于多分类问题中作为输出层的激活函数。这里我们以拓展逻辑回归解决多分类的角度对Softmax函…...

编程新知 2025/6/7 10:43:58

如何在Lyra中创建一个新的Game Feature Plugin和Experience游戏体验

目录 -1.前言0.预备知识1.创建一个新的Game Feature Plugin插件2.创建Lyra Pawn Data Asset3. 创建Lyra Experience Definition4. 创建自定义关卡5. 设置资产管理器Asset Manager引用6. 创建Lyra User Facing Experience Definition7. 在编辑器中运行测试后记-1.前言 由于转职…...

编程新知 2025/6/7 6:18:18

枫之谷Artale端午节大当机----后端技术的巨大风险

枫之谷Artale在端午节活动造成大量玩家上线塞爆&#xff0c;进不去&#xff0c;甚至在最后时段大当机&#xff0c;造成数万玩家怒火。 这体现了后端技术的影响&#xff0c;它不像是前端技术只对少数人造成影响&#xff0c;只要一出事&#xff0c;就是大批的玩家一起面对崩溃的伺…...

编程新知 2025/6/8 7:39:20

AT2659_GNSS低噪声放大器芯片

AT2659 射频放大器在SiGe工艺平台上实现23dB增益与0.71dB噪声系数的优异组合&#xff0c;专为BDS/GPS/GLONASS/GALILEO多模导航系统优化设计。其宽电压适应能力&#xff08;1.4-3.6V&#xff09;与低至4.4mA的功耗特性&#xff0c;配合1.5mm1mm0.55mm的6脚DFN封装&#xff08;R…...

编程新知 2025/6/7 5:10:21