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

CSS—盒模型(3分钟结合示例精通盒模型)

article 2026/4/9 3:32:52

个人博客：haichenyi.com。感谢关注

1. 目录

  • 1–目录
  • 2–概念
  • 3–内容
  • 4–内边距
  • 5–边框
  • 6–外边距
  • 7–类型

概念

  在HTML中，每一个元素都可以看作一个矩形的盒子。如图

图片1.png

  如上图所示，一个一个的矩形都可以堪称一个元素。矩形有大有小，边有粗有细，离HTML四周的边距有近有远。在HTML里面，一个盒子的大小，边的粗细，离四周的距离这都是盒模型的组成要素。

  我们以边为分界线，把一个盒模型分为"里面"，“边”，和"外面"。

  在HTML中，"里面"又分为内容(content)，内边距(padding)；"边"叫边框(border)；"外面"叫外边距(margin)。

  内边距(padding)就是边框距离内容的距离。

图2.png

  如上图，第一个元素所示，红色部分就是元素的内容(content)，绿色部分就是元素的内边距(padding)，黑色边部分就是元素的边框(border)，黑色的边框到html边的距离，类似于紫色线条部分就是外边距(margin)，外边距也是分四周的，并不是只有左边。这里只是拿左边举个例子。

  综上，一个盒子的四个主要组成部分。由内到外，依次是：内容(content)——内边距(padding)——边框(border)——外边距(margin)。

内容(content)

  定义：元素实际的显示给用户看的东西。比方说，img标签的图片，div显示的文本。等等

  设置：在css中，可以通过width和height属性来设置内容区域的大小。设置代码放在后面。

内边距(padding)

  定义，内容和边框之间的距离，让内容不会紧挨着边框，内边距是无法设置颜色的，它的颜色由内容的背景色定。

  特点：
    1. 可以设置上下左右四个方向上的值。
    2. 不可以为负值

  设置：设置代码放在后面

  影响：在默认类型下，添加padding值会导致盒子变大。

边框(border)

  定义：围绕在内容和内边距的外面，用于给盒子添加一个可视边界，也可以不设置。

  设置：设置代码放在后面

外边距(margin)

  定义：位于边框的外面，控制盒子与盒子之间的距离。

  特点：
    1. 可以设置上下左右四个方向上的值。
    2. 可以为负值
    3. 在垂直方向上存在"外边距塌陷"的问题。也就是，上面盒子的marginBottom:10px;下面盒子的marginTop:20px;那么，他们之间的距离取较大的20px，而不是两者相加的30px。
    4. "外边距塌陷"的另一个表现，当父view没有设置边框、内边距或overflow属性时，子view设置的marginTop的值会传递给父View，导致父View整体往下移动。

  案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS盒模型</title><style>/* 清除默认值 */    * {margin: 0px;padding: 0px;}.content-test {/*设置盒子宽度*/width: 100px;/*设置盒子高度*/height: 100px;/*设置盒子外边距*/margin: 10px auto 20px;/*设置文本水平居中显示*/text-align: center;/*设置盒子背景色*/background-color: aqua;/*设置盒子边框*/border: 10px solid red;/*设置盒子内边距*/padding: 10px;}.content-test1 {/*设置盒子宽度*/width: 100px;/*设置盒子高度*/height: 100px;/*设置盒子外边距*/margin: 10px auto 0px;/*设置文本水平居中显示*/text-align: center;/*设置盒子背景色*/background-color: aqua;/*设置盒子边框*/border: 10px solid red;/*设置盒子内边距*/padding: 10px;}.parent {width: 100px;height: 100px;margin: 0 auto;background-color: brown;/* padding: 5px; *//* border: 3px solid black; *//* overflow: hidden; */}.child {width: 50px;height: 50px;background-color: cadetblue;margin-top: 10px;}</style>
</head><body><div class="content-test">哈哈哈</div><div class="content-test1">哈哈哈1</div><div class="parent"><div class="child"></div></div>
</body></html>

图片3.png

类型

  盒模型分为两种类型：标准盒模型和IE盒模型。这两者怎么区分呢？box-sizing属性。

  那么，两者有什么区别呢？在说结论之前，直接看案例说话。在上面代码的基础上，增加如下代码

        <!--样式-->.normal {width: 100px;height: 100px;padding: 30px;border: 5px solid black;margin: 10px;/* 正常模型 */box-sizing: content-box;background-color: coral;}.ie {width: 100px;height: 100px;padding: 30px;border: 5px solid black;margin: 10px;/* ie模型 */box-sizing: border-box;background-color: red;}<!--元素--><div class="normal"></div><div class="ie"></div>

正常盒模型.png

ie盒模型.png

  如上图所示，简单来说，标准模型元素设置的width和height只是content的宽高。而ie模型元素设置的width和height设置的宽高是content+padding+border的总体宽高。

  再来结合css样式仔细看看上面两张图右边的盒子标注。

  标准模型的宽高：宽度=我们设置的width(100px)+左右内边距(各30，也就是60px)+左右边框(各5，也就是10px)+左右外边距(各10，也就是20px，外边距看不见)=100+60+10+20=190px。高度同理

  ie模型的宽高：宽度=我们设置的width(100px)+左右外边距(各10，也就是20px)=100+20=120px。高度同理。那么，我们设置padding和border的宽度呢？

  一个简单的数学题。已知总宽度为100px，左右padding各为30px，左右border各位5px。求内容区域的宽度。

  公式：宽度=左border+左padding+content+右padding+右border。

  100=5+30+content+30+5，content=100-5-30-30-5=30

  所以，内容的宽度就只有30了。也就符合图上面的标注信息了。

  这就是标准盒模型和IE盒模型的区别。

PS:整篇文章，精炼一下，如下

  1. 盒模型由:content+padding+border+margin组成。
  2. 盒模型有两种:正常盒模型和IE盒模型，通过box-size区分。不设置该属性就是默认值content-box(正常盒模型)，设置为border-box，则为IE盒模型
  3. 两种盒模型的区分就是：
    正常盒模型大小=content+padding+border+margin
    IE盒模型大小=content(content+padding+border)+margin

相关文章：

CSS—盒模型(3分钟结合示例精通盒模型)

个人博客&#xff1a;haichenyi.com。感谢关注 1. 目录 1–目录2–概念3–内容4–内边距5–边框6–外边距7–类型 概念 在HTML中&#xff0c;每一个元素都可以看作一个矩形的盒子。如图 如上图所示&#xff0c;一个一个的矩形都可以堪称一个元素。矩形有大有小&#xff0c;边有…...

编程日记 2026/4/9 3:32:52

蓝桥杯 3.搜索

蓝桥杯 3.搜索 文章目录 蓝桥杯 3.搜索DFS回溯DFS剪枝记忆化搜索编程66-75 DFS回溯 回溯法简介 使用**DFS(深度优先搜索)**实现, DFS是一种遍历或搜索图, 树或者图像等数据结构的算法, 当然这个图, 树未必要存储下来(隐式处理就是回溯法)搜索树一般是排列型搜索树 (总节点个数…...

编程日记 2026/3/31 20:52:28

JQD武学思想

无意识&#xff0c;无我&#xff0c;空&#xff0c;无形&#xff0c; 刚柔相济&#xff0c;时机&#xff0c; 战胜对手&#xff0c;克服内心。不预测结果&#xff0c;自发反击。 简单直接的攻击&#xff0c;去除一切冗余的东西。 李小龙其实反复在解释这些概念&#xff0c;常…...

编程日记 2026/3/14 11:25:25

供应链管理-谈判：分配式谈判、整合式谈判、原则式谈判

一、分配式谈判 序号要点解释1特点双方在一定资源或利益范围内进行分配&#xff0c;一方所得即另一方所失&#xff0c;因此也被称为“零和谈判”。2适用场景资源有限、关系不是关键因素&#xff0c;以及需要快速决策的情况。例如&#xff0c;在竞争对手之间&#xff0c;如拍卖…...

编程日记 2026/3/3 4:04:49

C语言递归——青蛙跳台阶问题和汉诺塔问题

一、青蛙跳台阶问题 •题目描述&#xff1a; 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶。求该青蛙跳上n级台阶总共有多少种跳法。 •问题分析&#xff1a; 青蛙跳台阶问题可以分成n个子问题。假设青蛙要跳上n级台阶&#xff0c;那么它的最后一步有两种选择&…...

编程日记 2026/2/18 20:38:48

relief=tk.RAISED详细介绍 relief是指定控件的边框样式

relieftk.RAISED 是在使用 Python 的 Tkinter 库创建图形用户界面&#xff08;GUI&#xff09;时&#xff0c;用于设置控件外观样式的一个参数设置&#xff0c;下面为你详细解释&#xff1a; 整体功能概述 在 Tkinter 里&#xff0c;relief 参数用于指定控件的边框样式&#x…...

编程日记 2026/3/18 5:07:04

基于ffmpeg+openGL ES实现的视频编辑工具-添加转场（九）

在视频编辑的广阔领域中，转场效果无疑是提升视频流畅性与观赏性的关键要素。巧妙运用转场，能够让不同视频片段之间的衔接更为自然，同时赋予视频独特的创意魅力。本文将深入探讨如何借助 ffmpeg 和 openGL ES 技术，在视频编辑工具中实现丰富多样的转场效果。 一、转场技术原…...

编程日记 2026/3/13 12:21:28

2025.2.21 日校内模拟赛总结（AC自动机， 期望，倍增）

文章目录 时间安排题解 时间安排 将近两个半小时才过 T 1 T1 T1&#xff0c;后面花一个半小时过了 T 2 T2 T2&#xff0c;最后半个小时写不出 T 3 T3 T3 暴力没有获得分数。 反思&#xff1a; T 1 T1 T1 这种题要敢于去猜结论打表&#xff0c;由于没有直接猜结论做了很长时…...

编程日记 2026/4/2 16:21:40

STM32的“Unique device ID“能否修改？

STM32F1系列的"Unique device ID"寄存器的地址为0x1FFFF7E8。 这个寄存器是只读的。 "Unique device ID"寄存器位于“System memory”中。“System memory”地址范围为“0x1FFF F000- 0x1FFF F7FF”。 所有STM32 MCU上都存在系统引导加载程序。顾名思义&a…...

编程日记 2026/4/8 15:30:12

[内网基础] 内网基础知识 —— Windows 工作组

关注这个专栏的其他相关笔记&#xff1a;[内网安全] 内网渗透 - 学习手册-CSDN博客 0x01&#xff1a;Windows 工作组介绍 在一个大型单位里&#xff0c;可能有成百上千台计算机互相连接组成局域网&#xff0c;如果不对这些计算机进行分组&#xff0c;网络的混乱程度是可想而知…...

编程日记 2026/4/8 7:13:39

【新手初学】SQL注入之二次注入、中转注入、伪静态注入

二次注入 一、概念 二次注入可以理解为&#xff0c;攻击者构造的恶意数据存储在数据库后&#xff0c;恶意数据被读取并进入到SQL查询语句所导致的注入。 二、原理 防御者可能在用户输入恶意数据时对其中的特殊字符进行了转义处理&#xff0c;但在恶意数据插入到数据库时被处…...

编程日记 2026/4/8 10:18:31

Deepseek存算分离安全部署手册

Deepseek大火后&#xff0c;很多文章教大家部署Dfiy和ollamadeepseek&#xff0c;但是大部分都忽略了数据安全问题&#xff0c;本文重点介绍Deepseek存算分裂安全架设&#xff0c;GPU云主机只负责计算、CPU本地主机负责数据存储&#xff0c;确保数据不上云&#xff0c;保证私有…...

编程日记 2026/4/8 14:57:35

单页图床HTML源码+本地API接口图床系统修复版源码

源码介绍 图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件&#xff0c;并生成相应的图片链接&#xff0c;从而方便用户在网页、社交媒体或其他平台上分享图片。 PS:源码压缩包分为两个版本&#xff0c;一个是调用360第三方api接口&#xff0c;另外一…...

编程日记 2026/4/8 10:40:21

XML DOM4J 三、XPath

1　什么是XPath XPath即为XML路径语言&#xff08;XML Path Language&#xff09;&#xff0c;它是一种用来确定XML文档中某部分位置的语言。XPath基于XML的树状结构&#xff0c;提供在数据结构树中找寻节点的能力。起初 XPath 的提出的初衷是将其作为一个通用的、介于XPointe…...

编程日记 2026/4/4 2:58:30

IDEA使用Maven方式构建SpringBoot项目

1、环境准备 确保你已经安装了以下工具&#xff1a; Java JDK&#xff08;推荐 JDK 8 或更高版本&#xff09; IntelliJ IDEA&#xff08;推荐使用最新版本&#xff09; 2、创建 Spring Boot 项目 &#xff08;1&#xff09; 打开 IntelliJ IDEA。 &#xff08;2&#xff09…...

编程日记 2026/4/3 2:26:32

【SPIE出版，见刊快速，EI检索稳定，浙江水利水电学院主办】2025年物理学与量子计算国际学术会议（ICPQC 2025）

2025年物理学与量子计算国际学术会议&#xff08;ICPQC 2025&#xff09;将于2025年4月18-20日在中国杭州举行。本次会议旨在汇聚全球的研究人员、学者和业界专家&#xff0c;共同探讨物理学与量子计算领域的最新进展与前沿挑战。随着量子技术的快速发展&#xff0c;其在信息处…...

编程日记 2026/4/9 6:18:33

EMC Isilon存储节点挂掉--Journal故障问题处理

EMC isilon 的集群存储系统经常会遇到有些节点关机后无法启动&#xff0c;使用串口或者接上显示器去看&#xff0c;会看到node节点启动到下面的位置就不正常启动了。典型的console输出如下&#xff1a; 老的版本&#xff0c;OneFS 7.0版本以前的&#xff1a; Checking Isilon…...

编程日记 2026/4/2 1:18:10

掌握 ElasticSearch 组合查询：Bool Query 详解与实践

掌握 ElasticSearch 组合查询&#xff1a;Bool Query 详解与实践 一、引言 (Introduction)二、Bool 查询基础2.1 什么是 Bool 查询&#xff1f;2.2 Bool 查询的四种子句2.3 语法结构 三、Bool 查询的四种子句详解与示例3.1 must 子句3.2 filter 子句3.3 should 子句3.4 must_no…...

编程日记 2026/4/1 22:38:25

Spring Boot 3 集成 RabbitMQ 实践指南

Spring Boot 3 集成 RabbitMQ 实践指南 1. RabbitMQ 核心原理 1.1 什么是RabbitMQ RabbitMQ是一个开源的消息代理和队列服务器&#xff0c;使用Erlang语言开发&#xff0c;基于AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议实现。它支持多种消息传递模…...

编程日记 2025/11/15 21:18:03

查看cmd下python的安装路径 + Windows 命令行添加环境变量和不重启刷新环境变量

1、查看cmd下python的安装路径 cmd ----》输入“python” 命令 ---》输入 import sys; print(sys.executable) 即可看到当前系统python的安装路径&#xff1a; 注&#xff1a;系统所使用的python实际上就是在系统环境变量下配置的python目录。 2、刷新path命令&#xff1a;在c…...

编程日记 2026/4/9 1:06:32

C/C++跳动的爱心

系列文章 序号直达链接1C/C李峋同款跳动的爱心2C/C跳动的爱心3C/C经典爱心4C/C满屏飘字5C/C大雪纷飞6C/C炫酷烟花7C/C黑客帝国同款字母雨8C/C樱花树9C/C奥特曼10C/C精美圣诞树11C/C俄罗斯方块小游戏12C/C贪吃蛇小游戏13C/C孤单又灿烂的神14C/C闪烁的爱心15C/C哆啦A梦16C/C简单…...

编程日记 2026/4/8 17:04:17

Linux 命令大全完整版（10）

4. 压缩与解压缩命令 gzip(gnu zip) 功能说明&#xff1a;压缩文件。语　　法&#xff1a;gzip [-acdfhlLnNqrtvV][-S <压缩字尾字符串>][-<压缩效率>][–best/fast][文件…] 或 gzip [-acdfhlLnNqrtvV][-S <压缩字尾字符串>][-<压缩效率>][–best/f…...

编程日记 2026/2/15 20:44:22

Cannot deserialize instance of java.lang.String out of START_ARRAY token

这个错误 Cannot deserialize instance of java.lang.String out of START_ARRAY token 表示 Jackson 正在尝试将一个 JSON 数组反序列化成一个 String 类型的字段&#xff0c;但是 JSON 中传递的是一个数组而不是单一的字符串。 具体来说&#xff0c;这段堆栈信息&#xff1a…...

编程日记 2026/4/4 13:30:17

一、初始爬虫

1.爬虫的相关概念 1.1 什么是爬虫 网络爬虫&#xff08;又被称为网页蜘蛛&#xff0c;网络机器人&#xff09;就是模拟浏览器发送网络请求&#xff0c;接收请求响应&#xff0c;一种按照一定的规则&#xff0c;自动地爬取互联网信息的程序。 原则上&#xff0c;只要是浏览器…...

编程日记 2026/4/7 23:09:02

在低功耗MCU上实现人工智能和机器学习

作者&#xff1a;Silicon Labs 人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;技术不仅正在快速发展&#xff0c;还逐渐被创新性地应用于低功耗的微控制器&#xff08;MCU&#xff09;中&#xff0c;从而实现边缘AI/ML解决方案。这些MCU是许多嵌入式…...

编程日记 2026/4/6 15:47:25

Elasticsearch除了用作查找以外，还能可以做什么？

前言 Elasticsearch用于实时数据分析、日志存储、业务智能等。还有日志与监控、多租户和安全性。以及应用场景包括日志分析、公共数据采集、全文搜索、事件数据、数据可视化。处理错误拼写和支持变体&#xff0c;不过这些可能还是属于搜索优化。企业搜索、日志管理、应用监控、…...

编程日记 2026/3/21 12:20:00

QQ登录测试用例报告

QQ登录测试用例思维导图 一、安全性测试用例 1. 加密传输与存储验证 测试场景&#xff1a;输入账号密码并提交登录请求。预期结果&#xff1a;账号密码通过加密传输&#xff08;如HTTPS&#xff09;与存储&#xff08;如哈希加盐&#xff09;&#xff0c;无明文暴露。 2. 二…...

编程日记 2026/4/4 10:46:54

《算法基础入门：最常用的算法详解与应用（持续更新实战与面试题）》

1. 排序算法 排序算法是将一组数据按特定的顺序排列起来的算法&#xff0c;常见的有&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09;选择排序&#xff08;Selection Sort&#xff09;插入排序&#xff08;Insertion Sort&#xff09;归并排序&#xff08;Merge So…...

编程日记 2026/2/27 20:16:09

单臂路由

单臂路由&#xff08;Router on a Stick&#xff09;是一种网络配置方式&#xff0c;主要用于在单个物理接口上实现多个VLAN之间的路由。它通常用于交换机与路由器之间的连接&#xff0c;适用于VLAN间通信需求较小的情况。 工作原理 VLAN划分&#xff1a;交换机上配置多个VLAN…...

编程日记 2026/2/23 5:55:46

细说STM32F407单片机2个ADC使用DMA同步采集各自的1个输入通道的方法

目录 一、示例说明 二、工程配置 1、RCC、DEBUG、CodeGenerator 2、USART6 3、TIM3 &#xff08;1&#xff09;Mode &#xff08;2&#xff09;参数设置 &#xff08;3&#xff09; TRGO &#xff08;4&#xff09;ADC1_IN0 1&#xff09;ADCs_Common_Settings 2&a…...

编程日记 2026/4/5 5:14:38