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

深入浅出CSS盒子模型

news 2026/2/8 13:39:56

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

文章目录

  • 前言
    • 文章有误敬请斧正 不胜感恩！
    • 什么是盒子模型？
    • 盒子模型的组成部分详解
      • 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

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2026/2/6 5:38:46

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/30 20:05:06

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/1/21 19:46:26

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/2/2 7:49:59

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2026/2/7 17:44:12

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...

编程新知 2025/11/28 7:53:17