CSS 盒模型
盒模型
CSS盒模型是网页布局的核心概念之一,它描述了网页元素的物理结构和元素内容与周围元素之间的关系。根据W3C规范,每个HTML元素都被视为一个矩形盒子,这个盒子由以下四个部分组成:
-
内容区(Content area):
-
这个区域包含了元素的实际内容,比如文本、图片等。
-
它是由
width
和height
属性定义的。
-
-
内边距(Padding):
-
内边距位于内容区的四周,用来在内容和其他部分之间创建空间。
-
它可以通过设置
padding
属性来调整,包括padding-top
,padding-right
,padding-bottom
, 和padding-left
。
-
-
边框(Border):
-
边框围绕着内边距和内容区,用来划分和装饰元素。
-
可以通过
border
属性设置边框的样式、宽度和颜色。
-
-
外边距(Margin):
-
外边距位于边框之外,用于分隔相邻的元素。
-
可以通过
margin
属性控制,包括margin-top
,margin-right
,margin-bottom
, 和margin-left
。
-
默认情况下,块级元素的宽度为父元素的100%,而高度则根据内容自动调整。但是,当设置了width
和height
时,这些尺寸只适用于内容区。如果需要考虑内边距、边框和外边距,则可以使用box-sizing
属性。例如:
-
box-sizing: content-box;
(默认值):width
和height
仅适用于内容区。 -
box-sizing: border-box;
:width
和height
包括内边距和边框。
理解盒模型对于正确地设计和调试网页布局至关重要。通过合理设置这四个部分,开发者可以精确地控制网页上各个元素的位置和外观。
什么是“盒子”
初学 CSS 的朋友,一开始学 CSS 基础知识的时候一定学过 padding
border
和margin
,即内边距、边框和外边距。它们三者就构成了一个“盒子”。就像我们收到的快递,本来买了一部小小的手机,收到的却是那么大一个盒子。因为手机白色的包装盒和手机机器之间有间隔层(内边距),手机白色盒子有厚度,虽然很薄(边框),盒子和快递箱子之间还有一层泡沫板(外边距)。这就是一个典型的盒子。
如上图,真正的内容就是这些文字,文字外围有 10px 的内边距,5px 的边框,10px 的外边距。看到盒子了吧?
盒子模型的宽度如何计算
固定宽度的盒子
<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》,文章言简意赅的介绍的浏览器的工作过程,web前端
</div>
如上图,得到网页效果之后,我们可以用截图工具来量一下文字内容的宽度。发现,文字内容的宽度刚好是 300px,也就是我们设置的宽度。
因此,在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:(内容宽度 + border
宽度 + padding
宽度 + margin
宽度)之和。这样我们改四个中的其中一个,都会导致盒子宽度的改变。这对我们来说不友好。
没关系,这个东西不友好早就有人发现了,而且已经解决,下文再说。
充满父容器的盒子
默认情况下,div
是display:block
,宽度会充满整个父容器。如下图:
<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》,文章言简意赅的介绍的浏览器的工作过程,web前端之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》,文章言简意赅的介绍的浏览器的工作过程,web前端
</div>
但是别忘记,这个 div 是个盒子模型,它的整个宽度包括(内容宽度 + border
宽度 + padding
宽度 + margin
宽度),整个的宽度充满父容器。
问题就在这里。如果父容器宽度不变,我们手动增大margin
、border
或padding
其中一项的宽度值,都会导致内容宽度的减少。极端情况下,如果内容的宽度压缩到不能再压缩了(例如一个字的宽度),那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。
包裹内容的盒子
这种情况下比较简单,内容的宽度按照内容计算,盒子的宽度将在内容宽度的基础上再增加(padding
宽度 + border
宽度 + margin
宽度)之和。
<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》
</div>
box-sizing:border-box
前面提到,为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题?答案就是为盒子指定样式:**box-sizing:border-box
**。
<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px; box-sizing:border-box;">之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》
</div>
上图中,为div
设置了box-sizing:border-box
之后,300px 的宽度是内容 + padding
+ 边框的宽度(不包括margin
),这样就比较符合我们的实际要求了。建议大家在为系统写 CSS 时候,第一个样式是:
* {box-sizing:border-box;
}
大名鼎鼎的 Bootstrap 也把box-sizing:border-box
加入到它的*
选择器中,我们为什么不这样做呢?
纵向 margin 重叠
这里提到 margin,就不得不提一下 margin 的这一特性——纵向重叠。如<p>
的纵向 margin 是 16px,那么两个<p>
之间纵向的距离是多少?—— 按常理来说应该是 16 + 16 = 32px,但是答案仍然是 16px。因为纵向的 margin 是会重叠的,如果两者不一样大的话,大的会把小的“吃掉”。
相关文章:

CSS 盒模型
盒模型 CSS盒模型是网页布局的核心概念之一,它描述了网页元素的物理结构和元素内容与周围元素之间的关系。根据W3C规范,每个HTML元素都被视为一个矩形盒子,这个盒子由以下四个部分组成: 内容区(Content areaÿ…...

[0405].第05节:搭建Redis主从架构
Redis学习大纲 一、3主3从的集群配置: 1.1.集群规划 1.分片集群需要的节点数量较多,这里我们搭建一个最小的分片集群,包含3个master节点,每个master包含一个slave节点,结构如下: 2.每组是一主一从&#x…...

6 分布式限流框架
限流的作用 在API对外互联网开放的情况下,是无法控制调用方的行为的。当遇到请求激增或者黑客攻击的情况下,会导致接口占用大量的服务器资源,使得接口响应效率的降低或者超时,更或者导致服务器宕机。 限流是指对应用服务进行限制…...

sosadmin相关命令
sosadmin命令 以下是本人翻译的官方文档,如有不对,还请指出,引用请标明出处。 原本有个对应表可以跳转的,但是CSDN的这个[](#)跳转好像不太一样,必须得用html标签,就懒得改了。 sosadmin help 用法 sosadm…...

关于大数据的基础知识(四)——大数据的意义与趋势
成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于大数据的基础知识(四&a…...

【EI,Scopus检索 | 往届均已检索见刊】第四届智能系统、通信与计算机网络国际学术会议(ISCCN 2025)
重要信息: 大会官网:更多详情【论文投稿】 截稿时间:以官网信息为准 大会时间:2025年2月21-23日 接受/拒稿通知:投稿后3-5个工作日内 收录检索:EI,Scopus 出版信息: 本会议所有…...
smplx blender插件笔记
目录 liunx安装: liunx安装: pip install smplx 这个创建模型报错 SMPL_blender_addon...

【算法】移除元素
今天讲的是力扣题目的题解: 力扣题目: 72.移除元素 题目描述: 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。 假设 nums 中不…...
【后端面试总结】设计一个分布式锁需要考虑哪些东西
分布式锁是我们在分布式场景中经常用到的一种技术,在后端面试中也是出镜率很高,那么我们设计分布式锁的时候应该从那几方面去考虑呢 实现分布式锁需要考虑的点 设置超时时间 设置超时时间的目的是为了避免这个场景:进程A拿了锁,…...
awr报告无法生成:常见案例与解决办法
awr报告无法生成:常见案例与解决办法 STATISTICS_LEVEL设置过低数据库打开状态不对主库隐含参数设置错误MMON子进程被SuspendSYS模式统计信息过期WRH$_SQL_PLAN表数据量太大AWR绑定变量信息收集超时撞上数据库Bug 9040676STATISTICS_LEVEL设置过低 STATISTICS_LEVEL设置为BAS…...
Hadoop 生态之 kerberos
参考链接 https://winway.github.io/2022/04/02/kerberos-ranger/ https://ieevee.com/tech/2016/06/22/ranger-2.html kerberos解决”who are you“的问题 ranger解决”what you can do“的问题 LDAP 轻型目录访问协议(英文:Lightweight Director…...
【文件I/O】文件持久化
这篇文章详细讲解的是 理解在Linux操作系统中输入/输出(I/O)编程与文件操作的关系。 在计算机编程中,输入/输出编程(I/O 编程) 是一个重要的概念,指的是通过程序与外部世界(如用户输入、文件、…...

USB学习——基本概念
文章目录 USB(Universal Serial Bus)概述USB系统的描述USB总线传输方式USB的拓扑结构 USB的连接模型USB控制器及分类USB描述符USB 端点USB枚举过程USB 四种传输类型USB 事务批量传输(Bulk)中断传输(Interrupt)等时传输(Isochronous)控制传输(Control)端点…...

python-leetcode-三数之和
15. 三数之和 - 力扣(LeetCode) class Solution:def threeSum(self, nums: List[int]) -> List[List[int]]:nums.sort() # 排序n len(nums)res []for i in range(n):# 剪枝:如果当前数 > 0,三数之和不可能为 0if nums[i]…...
springboot整合拦截器
1.首先创建拦截器类: package com.example.interceptor;import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Component; import org.sp…...

B树与B+树:数据库索引的秘密武器
想象一下,你正在构建一个超级大的图书馆,里面摆满了各种各样的书籍。B树和B树就像是两种不同的图书分类和摆放方式,它们都能帮助你快速找到想要的书籍,但各有特点。 B树就像是一个传统的图书馆摆放方式: 1. 书籍摆放&…...
Lua语言中常用的字符串操作函数
string.sub(s, i, j) 功能: 截取字符串 s 中从位置 i 到位置 j 的子字符串。 local s "Hello, Lua!" print(string.sub(s, 1, 5)) -- 输出 "Hello" print(string.sub(s, 8, 11)) -- 输出 "Lua!" string.len(s) 功能:将字符串长度…...
HOW - Form 表单确认校验两种模式(以 Modal 场景为例)
目录 一、背景二、具体1. 模式一:点击确认进行校验提示2. 模式二:确认按钮依赖于表单内容实现说明 一、背景 基于react、antd form分别实现如下两种模式: 1、一个 Modal,点击确认进行校验提示2、一个 Modal,确认按钮…...

LabVIEW部署Web服务
目录 LabVIEW部署Web服务1、创建项目2、创建Web服务3、新建WebVI3.1、使用GET方法3.2、使用POST方法 4、 部署和对应URL4.1、应用程序:80804.2、本地调试:80094.3、NI Web服务器:9090(禁用) 5、测试5.1、测试GET方法5.2、测试POST方法 6、实际…...

进程件通信——网络通信——TCP
网络抓包工具:wireshark 抓取经过设备网卡的数据。 操作: 1. sudo wireshark 2. 选择要抓取的网卡----》any 3. 设置抓取的过滤条件 4. 进行网络通信 5. 分析数据 UDP: 用户数据报协议 UDP: 用户数据报协议 特点ÿ…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...

IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...