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: 用户数据报协议 特点ÿ…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

