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

深入浅出CSS盒子模型

news 2025/11/16 10:18:33

“批判他人总是想的太简单 剖析自己总是想的太困难”

文章目录

  • 前言
    • 文章有误敬请斧正 不胜感恩！
    • 什么是盒子模型？
    • 盒子模型的组成部分详解
      • 1. 内容区（Content）
      • 2. 内边距（Padding）
      • 3. 边框（Border）
      • 4. 外边距（Margin）
    • 盒子模型的工作原理
    • `box-sizing`属性的作用
    • 如何应用盒子模型
      • 设置全局`box-sizing`
      • 示例：创建一个卡片布局
    • 常见问题与解决方案
      • 1. 元素宽度超出预期
      • 2. 垂直外边距合并
  • 总结

前言

写在开始：

在网页设计与前端开发中，盒子模型（Box Model）是一个至关重要的概念。理解盒子模型不仅能帮助你更好地布局页面，还能避免许多常见的样式问题。本文将以通俗易懂的方式，详细讲解CSS盒子模型的组成、工作原理以及如何高效应用它。

在这里插入图片描述

文章有误敬请斧正 不胜感恩！

以下是本篇文章正文内容，

什么是盒子模型？

盒子模型是CSS中用于描述HTML元素在页面上占据空间的方式。每个HTML元素都被视为一个矩形盒子，这个盒子由以下几个部分组成：

  1. 内容区（Content）：显示实际内容，如文本、图片等。
  2. 内边距（Padding）：内容与边框之间的空间，用于增加内容的可读性。
  3. 边框（Border）：围绕内容和内边距的线条，可以设置样式、宽度和颜色。
  4. 外边距（Margin）：边框外的空间，用于控制元素之间的间距。

通过这四个部分的组合，盒子模型决定了一个元素在页面上的大小和位置。

请添加图片描述

盒子模型的组成部分详解

1. 内容区（Content）

内容区是盒子模型的核心部分，显示元素的实际内容。其尺寸由CSS的width和height属性控制。例如：

div {width: 200px;height: 100px;background-color: lightblue;
}

上述代码定义了一个宽200像素、高100像素的内容区，背景色为浅蓝色。

2. 内边距（Padding）

内边距是在内容区与边框之间的空间，用于增加内容的可读性或美观性。可以分别设置上下左右的内边距，也可以统一设置。例如：

div {padding: 20px; /* 四个方向均为20px */
}

或者：

div {padding-top: 10px;padding-right: 15px;padding-bottom: 10px;padding-left: 15px;
}

请添加图片描述

3. 边框（Border）

边框围绕在内边距之外，可以通过CSS设置边框的宽度、样式和颜色。例如：

div {border: 2px solid #000; /* 2px宽的实线黑色边框 */
}

请添加图片描述
请添加图片描述

4. 外边距（Margin）

外边距是盒子模型的最外层，用于控制元素与其他元素之间的距离。与内边距类似，可以分别设置各个方向的外边距：

div {margin: 20px; /* 四个方向均为20px */
}

或者：

div {margin-top: 10px;margin-right: 15px;margin-bottom: 10px;margin-left: 15px;
}

盒子模型的工作原理

在默认情况下，盒子模型的总宽度和高度是内容区、内边距、边框和外边距的总和。计算公式如下：

  • 总宽度 = 宽度（content） + 左右内边距（padding） + 左右边框（border）
  • 总高度 = 高度（content） + 上下内边距（padding） + 上下边框（border）

例如：

div {width: 200px;padding: 20px;border: 5px solid #000;
}

总宽度 = 200px（内容） + 20px * 2（内边距） + 5px * 2（边框） = 250px

总高度 = 同理计算。

这种计算方式有时会导致布局问题，尤其是在复杂布局中。例如，如果一个父容器设置了固定宽度，内部多个子元素的总宽度超过父容器宽度，就会出现溢出问题。

box-sizing属性的作用

为了更灵活地控制盒子的尺寸，CSS提供了box-sizing属性。它有两个主要的值：

  1. content-box（默认值）：宽度和高度只包括内容区，不包括内边距和边框。
  2. border-box：宽度和高度包括内容区、内边距和边框。

使用border-box可以更方便地进行布局，因为元素的总尺寸不会因为内边距和边框的增加而变化。

例如：

div {box-sizing: border-box;width: 200px;padding: 20px;border: 5px solid #000;
}

在border-box模式下，总宽度仍然是200px，内容区的实际宽度会自动调整为：

200px（总宽度） - 20px * 2（内边距） - 5px * 2（边框） = 150px

如何应用盒子模型

设置全局box-sizing

为了避免在不同元素上重复设置box-sizing，通常建议在全局范围内将所有元素的box-sizing设置为border-box。这样可以简化布局的计算，提高开发效率。

*, *::before, *::after {box-sizing: border-box;
}

在这里插入图片描述

示例：创建一个卡片布局

让我们通过一个简单的例子来应用盒子模型。假设我们要创建一个卡片组件，包括图片、标题和描述。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>盒子模型示例</title><style>*, *::before, *::after {box-sizing: border-box;}.card {width: 300px;padding: 20px;border: 1px solid #ddd;margin: 20px;background-color: #f9f9f9;}.card img {width: 100%;height: auto;border-bottom: 1px solid #ddd;padding-bottom: 15px;margin-bottom: 15px;}.card h2 {font-size: 1.5em;margin-bottom: 10px;}.card p {font-size: 1em;color: #555;}</style>
</head>
<body><div class="card"><img src="image.jpg" alt="示例图片"><h2>卡片标题</h2><p>这是一个卡片的描述内容，用于展示盒子模型的应用。</p></div>
</body>
</html>

在这个例子中：

  • .card元素的宽度被设置为300px，内边距20px，边框1px，外边距20px。
  • 图片设置为100%的宽度，自动高度，底部添加边框和内边距。
  • 标题和描述通过内边距和边距进行间隔，确保内容的可读性。

通过合理运用盒子模型，我们可以轻松地创建结构清晰、布局美观的网页组件。

常见问题与解决方案

1. 元素宽度超出预期

问题：在设置固定宽度的元素时，加入内边距和边框后，总宽度超出预期，导致布局错乱。

解决方案：使用box-sizing: border-box，这样内边距和边框会包含在元素的总宽度内，避免超出。

*, *::before, *::after {box-sizing: border-box;
}

2. 垂直外边距合并

问题：相邻块级元素的垂直外边距会发生合并，导致预期的间距不生效。

解决方案：可以通过设置父元素的内边距或边框，或者使用overflow: hidden等方式，避免外边距合并。

.parent {overflow: hidden; /* 触发BFC，防止外边距合并 */
}

总结

CSS盒子模型是理解网页布局的基础。

而前端开发就是一个摆盒子的过程,所以一定要多加练习这个

请添加图片描述

相关文章：

深入浅出CSS盒子模型

“批判他人总是想的太简单 剖析自己总是想的太困难” 文章目录 前言文章有误敬请斧正 不胜感恩&#xff01;什么是盒子模型&#xff1f;盒子模型的组成部分详解1. 内容区&#xff08;Content&#xff09;2. 内边距&#xff08;Padding&#xff09;3. 边框&#xff08;Border&am…...

编程日记 2024/9/28 3:21:21

字符编码发展史4 — Unicode与UTF-8

上一篇《字符编码发展史3 — GB2312/Big5/GBK/GB18030》我们讲解了ANSI编码中的GB2312/Big5/GBK/GB18030。本篇我们将继续讲解字符编码的第三个发展阶段中的Unicode与UTF-8。 2.3. 第三个阶段 国际化 前面提到的第二个阶段&#xff0c;各个国家和地区各自为政&#xff0c;纷纷…...

编程日记 2024/9/28 3:20:21

【flink】之如何消费kafka数据并读写入redis？

背景&#xff1a; 最近公司出现做了一个新需求&#xff0c;需求内容是加工一个营销时机&#xff0c;但是加工营销时机的同时需要把数据内容里的一个idmapping存入redis用于后续的读写。 准备&#xff1a; <!-- 依赖 --><dependency><groupId>org.apache.fl…...

编程日记 2024/9/28 3:19:20

搜索引擎onesearch3实现解释和升级到Elasticsearch v8系列(二)-索引

场景 首先介绍测试的场景&#xff0c;本系列schema定义 pdm文档索引&#xff0c;包括nested&#xff0c;作为文档扩展属性字段&#xff0c;_content字段是组件保留字段&#xff0c;支持文本内容&#xff0c;字段属性还有其他属性&#xff0c;如boost&#xff0c;getter&#x…...

编程日记 2024/9/28 3:17:18

离散化算法

离散化 在C中&#xff0c;离散化通常指的是将连续的数值或数据转化为离散的形式。这在数值分析、信号处理、图像处理和机器学习等领域都非常常见。以下是一些离散化的基本概念和方法&#xff1a; 1.区间划分&#xff1a; 将连续变量的值域分成多个区间&#xff0c;每个区间对…...

编程日记 2024/9/28 3:15:16

基于ollama的本地RAG实践

先放参考的原文链接大语言模型实战——搭建纯本地迷你版RAG_本地rag-CSDN博客 一、大模型选择 在我之前的文章中有讲到&#xff0c;我用的是ollama中的llama3.1 Ollama在Windows安装&#xff0c;使用&#xff0c;简单调用API_ollama如何对外提供api-CSDN博客 二、嵌入模型 …...

编程日记 2024/9/28 3:14:15

安卓开发板_MTK开发板_联发科开发评估套件Demo板接口介绍

开发板是一种功能丰富的电路平台&#xff0c;专为开发人员设计&#xff0c;集成了多种传感器、扩展接口和通信模块。这使得开发者能够高效进行原型设计和功能验证&#xff0c;极大地简化了软硬件开发的过程。 此次介绍的安卓开发板由MT8788核心板与底板构成&#xff0c;特别之处…...

编程日记 2024/9/28 3:13:14

代码随想录冲冲冲 Day58 图论Part9

47. 参加科学大会&#xff08;第六期模拟笔试&#xff09; 根据昨天的dijkstra进行堆优化 使用的原因是点多但边少 所以直接对于边进行操作 1.对于priority_queue来说 这是最小堆, 小于的话就是最大堆 之后由于是根据边来说的 所以新建一个Edge并且初始化一下 之后由于使用…...

编程日记 2024/9/28 3:12:12

UnityHub下载任意版本的Unity包

1)先打开 // 也可以采用2直接打开 2)也可以直接打开 下载存档 (unity.com) 3)关联起来UnityHub即可...

编程日记 2024/9/28 3:11:11

网站服务器怎么计算同时在线人数？

网站服务器计算同时在线人数通常涉及跟踪和记录当前活跃会话的数量。以下是几种常用的方法来估算或计算网站的同时在线人数&#xff1a; 1. 会话跟踪 - 基于会话(Session)&#xff1a;服务器可以为每个访问者创建一个会话&#xff0c;并跟踪这些会话。当访问者首次访问网站时&a…...

编程日记 2024/9/28 3:10:10

[spring]MyBatis介绍 及 用MyBatis注解操作简单数据库

文章目录 一. 什么是MyBatis二. MyBatis操作数据库步骤(使用注解)创建工程创建数据库创建对应实体类配置数据库连接字符串写持久层代码单元测试 三. MyBatis基础操作 使用注解打印日志参数传递增删改查 一. 什么是MyBatis 简单来说 MyBatis 是更简单完成程序和数据库交互的框架…...

编程日记 2024/9/28 3:05:04

Ks渲染做汽车动画吗?汽车本地渲染与云渲染成本分析

Keyshot是一款强大的实时光线追踪和全域光渲染软件&#xff0c;它确实可以用于制作汽车动画&#xff0c;包括汽车模型的渲染和动画展示。Keyshot的动画功能允许用户创建相机移动、物体变化等动态效果&#xff0c;非常适合用于汽车动画的制作。 至于汽车动画的渲染成本&#xff…...

编程日记 2024/9/28 3:03:02

AI智能时代：哪款编程工具让你的工作效率翻倍？

引言 在日益繁忙的工作环境中&#xff0c;选择合适的编程工具已成为提升开发者工作效率的关键。不同的工具能够帮助我们简化代码编写、自动化任务、提升调试速度&#xff0c;甚至让团队协作更加顺畅。那么&#xff0c;哪款编程工具让你的工作效率翻倍&#xff1f;是智能的代码编…...

编程日记 2024/9/28 3:01:01

这五本大模型书籍，让你从大模型零基础到精通，非常详细收藏我这一篇就够了

大模型&#xff08;Large Language Models, LLMs&#xff09;是近年来人工智能领域的一大热点&#xff0c;它们在自然语言处理、对话系统、内容生成等多个方面展现出了强大的能力。随着技术的发展&#xff0c;市面上出现了许多介绍大模型理论与实践的书籍&#xff0c;为研究人员…...

编程日记 2024/9/28 2:59:59

面试经典150题 堆

215.数组中的第K个最大元素 建堆算法实现-CSDN博客 215. 数组中的第K个最大元素 中等 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必…...

编程日记 2024/9/28 2:58:58

day-62 每种字符至少取 K 个

思路 滑动窗口&#xff1a;改变思路&#xff0c;从左右两边取字符&#xff0c;是a b c三个字符至少被取k次&#xff0c;那么意味着如果我们知道字符串中a b c的出现个数&#xff0c;那么可以知道取走后剩下子串a b c的个数&#xff0c;问题转化为了求最长子串 解题过程 如果a …...

编程日记 2024/9/28 2:56:56

免费好用！AI声音克隆神器，超级简单，10秒就能克隆任何声音！（附保姆级教程）

今天下午还有读者问&#xff1a; 有没有能克隆声音的 AI 工具&#xff1f; 其实剪映很早就上了克隆声音的功能。 只需要按要求朗读例句&#xff0c;或者上传本地的音视频文件&#xff0c;就可以克隆声音了。 操作非常简单&#xff0c;效果也不错&#xff0c;可以试试。 除了…...

编程日记 2024/9/28 2:54:54

LeetCode146 LRU缓存

请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;否则返回 -1 …...

编程日记 2024/9/28 2:53:53

【Java】包装类【主线学习笔记】

文章目录 前言包装类基本数据类型与包装类之间的转换基本数据类型转换为包装类可以通过以下几种方式&#xff1a;包装类转换为基本数据类型可以通过以下几种方式&#xff1a;初始化值不同与String之间的转换 前言 Java是一门功能强大且广泛应用的编程语言&#xff0c;具有跨平台…...

编程日记 2024/9/28 2:52:52

华为HarmonyOS地图服务 11 - 如何在地图上增加点注释？

场景介绍 本章节将向您介绍如何在地图的指定位置添加点注释以标识位置、商家、建筑等&#xff0c;并可以通过信息窗口展示详细信息。 点注释支持功能&#xff1a; 支持设置图标、文字、碰撞规则等。支持添加点击事件。 PointAnnotation有默认风格&#xff0c;同时也支持自定…...

编程日记 2024/9/28 2:49:49

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2025/11/12 21:38:42

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/11/7 19:47:01

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/11/7 20:04:06

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/10/22 23:35:38

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/11/7 21:03:30

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/10/4 1:16:44

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/11/12 9:56:17