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

深入浅出CSS盒子模型

news 2025/9/19 7:19:45

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

文章目录

  • 前言
    • 文章有误敬请斧正 不胜感恩！
    • 什么是盒子模型？
    • 盒子模型的组成部分详解
      • 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;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/9/19 0:14:07

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/9/19 2:49:47

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/9/18 16:34:04

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

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

编程新知 2025/8/18 10:21:48

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/8/13 21:32:37

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2025/9/2 18:20:56

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/9/2 19:02:02

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

编程新知 2025/7/7 9:39:54

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/9/13 4:12:41