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

深入浅出CSS盒子模型

news 2026/4/1 0:40:11

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

文章目录

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

CanFestival主站PDO配置避坑指南：以Kinco FD伺服的速度/位置模式控制为例

CanFestival主站PDO配置实战&#xff1a;从零解析Kinco FD伺服双模式控制 当你在深夜的实验室里盯着屏幕上闪烁的CAN报文&#xff0c;却发现伺服电机对控制指令毫无反应时&#xff0c;那种挫败感每个工控开发者都深有体会。本文将带你穿透CanFestival主站配置的迷雾&#xff0c…...

编程新知 2026/3/31 22:36:24

零基础玩转通义千问2.5：手把手教你用vLLM+Open WebUI一键部署

零基础玩转通义千问2.5&#xff1a;手把手教你用vLLMOpen WebUI一键部署 1. 通义千问2.5-7B-Instruct简介 1.1 模型特点概述 通义千问2.5-7B-Instruct是阿里云2024年9月发布的70亿参数指令微调模型&#xff0c;定位为"中等体量、全能型、可商用"的开源大语言模型。…...

编程新知 2026/3/31 21:22:58

基于zlmediakit的RTSP流媒体服务器嵌入式开发指南

1. 为什么选择zlmediakit作为嵌入式RTSP服务器 第一次接触流媒体开发时&#xff0c;我试过用FFmpeg直接搭建服务&#xff0c;结果被复杂的协议栈和线程管理折腾得够呛。后来发现zlmediakit这个宝藏项目&#xff0c;它把RTSP/RTMP/HTTP-FLV等协议封装得特别友好&#xff0c;特别…...

编程新知 2026/3/31 19:59:33

Qt属性动画进阶：QPropertyAnimation在自定义控件动态效果中的应用

1. QPropertyAnimation基础入门 第一次接触Qt动画框架时&#xff0c;我被QPropertyAnimation的简洁API惊艳到了。这个看似简单的类&#xff0c;却能创造出丝滑流畅的界面动效。先来看个最基础的例子&#xff1a;让按钮从左向右滑动。你只需要5行核心代码&#xff1a; QProperty…...

编程新知 2026/3/31 19:23:03

深入解析STM32 SysTick定时器：从原理到时间片轮询实战

1. SysTick定时器的前世今生 第一次接触STM32的开发板时&#xff0c;我就被这个叫做SysTick的神秘定时器吸引了。当时我正为如何实现精确延时发愁&#xff0c;GPIO翻转测试显示软件延时误差高达30%&#xff0c;直到一位资深工程师提醒我&#xff1a;"内核里就藏着个高精度…...

编程新知 2026/3/31 19:16:53

Fish 4.6发布，命令行工具迎来新升级

近日&#xff0c;基于 Rust 语言开发的现代化交互式 Shell Fish 4.6 正式发布。它以智能提示和友好体验著称&#xff0c;此次更新带来细节优化&#xff0c;支持 systemd 环境变量&#xff0c;提升与 Linux 系统集成度。深度集成 systemd2024 年起&#xff0c;systemd 引入三个用…...

编程新知 2026/3/31 18:30:03

Tree of Thoughts终极指南：5分钟掌握思维树算法原理与实战应用

Tree of Thoughts终极指南&#xff1a;5分钟掌握思维树算法原理与实战应用 【免费下载链接】tree-of-thought-llm [NeurIPS 2023] Tree of Thoughts: Deliberate Problem Solving with Large Language Models 项目地址: https://gitcode.com/gh_mirrors/tr/tree-of-thought-l…...

编程新知 2026/3/31 18:25:59

越擎科技发布机器人离线编程软件应用白皮书，阐述机器人装配工艺规划、离线编程与虚拟调试方案的原理及优势

摘要&#xff1a;越擎科技针对机器人复杂产品装配的应用场景&#xff0c;打造全国产的机器人离线编程软件iRobotCAM&#xff0c;可以快速的提取装配约束关系并进行装配工艺规划&#xff0c;并编写机器人程序及快速仿真&#xff0c;提升装配过程的精度及编程效率。 根据艾瑞咨询…...

编程新知 2026/3/31 17:23:08

Winhance中文版深度解析：Windows系统优化的C解决方案

Winhance中文版深度解析&#xff1a;Windows系统优化的C#解决方案 【免费下载链接】Winhance-zh_CN A Chinese version of Winhance. C# application designed to optimize and customize your Windows experience. 项目地址: https://gitcode.com/gh_mirrors/wi/Winhance-zh…...

编程新知 2026/3/31 16:52:29

革新性英雄联盟智能辅助解决方案：一站式游戏体验提升工具

革新性英雄联盟智能辅助解决方案&#xff1a;一站式游戏体验提升工具 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的英…...

编程新知 2026/3/31 15:41:28