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

CSS 盒模型

盒模型

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

  1. 内容区(Content area)

    • 这个区域包含了元素的实际内容,比如文本、图片等。

    • 它是由widthheight属性定义的。

  2. 内边距(Padding)

    • 内边距位于内容区的四周,用来在内容和其他部分之间创建空间。

    • 它可以通过设置padding属性来调整,包括padding-top, padding-right, padding-bottom, 和 padding-left

  3. 边框(Border)

    • 边框围绕着内边距和内容区,用来划分和装饰元素。

    • 可以通过border属性设置边框的样式、宽度和颜色。

  4. 外边距(Margin)

    • 外边距位于边框之外,用于分隔相邻的元素。

    • 可以通过margin属性控制,包括margin-top, margin-right, margin-bottom, 和 margin-left

默认情况下,块级元素的宽度为父元素的100%,而高度则根据内容自动调整。但是,当设置了widthheight时,这些尺寸只适用于内容区。如果需要考虑内边距、边框和外边距,则可以使用box-sizing属性。例如:

  • box-sizing: content-box;(默认值):widthheight仅适用于内容区。

  • box-sizing: border-box;widthheight包括内边距和边框。

理解盒模型对于正确地设计和调试网页布局至关重要。通过合理设置这四个部分,开发者可以精确地控制网页上各个元素的位置和外观。

什么是“盒子”

初学 CSS 的朋友,一开始学 CSS 基础知识的时候一定学过 padding bordermargin,即内边距、边框和外边距。它们三者就构成了一个“盒子”。就像我们收到的快递,本来买了一部小小的手机,收到的却是那么大一个盒子。因为手机白色的包装盒和手机机器之间有间隔层(内边距),手机白色盒子有厚度,虽然很薄(边框),盒子和快递箱子之间还有一层泡沫板(外边距)。这就是一个典型的盒子。

如上图,真正的内容就是这些文字,文字外围有 10px 的内边距,5px 的边框,10px 的外边距。看到盒子了吧?

盒子模型的宽度如何计算

固定宽度的盒子

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》,文章言简意赅的介绍的浏览器的工作过程,web前端
</div>

fileOf7298.png

如上图,得到网页效果之后,我们可以用截图工具来量一下文字内容的宽度。发现,文字内容的宽度刚好是 300px,也就是我们设置的宽度。

因此,在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:(内容宽度 + border宽度 + padding宽度 + margin宽度)之和。这样我们改四个中的其中一个,都会导致盒子宽度的改变。这对我们来说不友好。

没关系,这个东西不友好早就有人发现了,而且已经解决,下文再说。

充满父容器的盒子

默认情况下,divdisplay:block,宽度会充满整个父容器。如下图:

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》,文章言简意赅的介绍的浏览器的工作过程,web前端之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》,文章言简意赅的介绍的浏览器的工作过程,web前端
</div>

fileOf7298.png

但是别忘记,这个 div 是个盒子模型,它的整个宽度包括(内容宽度 + border宽度 + padding宽度 + margin宽度),整个的宽度充满父容器。

问题就在这里。如果父容器宽度不变,我们手动增大marginborderpadding其中一项的宽度值,都会导致内容宽度的减少。极端情况下,如果内容的宽度压缩到不能再压缩了(例如一个字的宽度),那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。

包裹内容的盒子

这种情况下比较简单,内容的宽度按照内容计算,盒子的宽度将在内容宽度的基础上再增加(padding宽度 + border宽度 + margin宽度)之和。

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》
</div>

fileOf7298.png

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>

fileOf7298.png

上图中,为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盒模型是网页布局的核心概念之一&#xff0c;它描述了网页元素的物理结构和元素内容与周围元素之间的关系。根据W3C规范&#xff0c;每个HTML元素都被视为一个矩形盒子&#xff0c;这个盒子由以下四个部分组成&#xff1a; 内容区&#xff08;Content area&#xff…...

[0405].第05节:搭建Redis主从架构

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

6 分布式限流框架

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

sosadmin相关命令

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

关于大数据的基础知识(四)——大数据的意义与趋势

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于大数据的基础知识&#xff08;四&a…...

【EI,Scopus检索 | 往届均已检索见刊】第四届智能系统、通信与计算机网络国际学术会议(ISCCN 2025)

重要信息&#xff1a; 大会官网&#xff1a;更多详情【论文投稿】 截稿时间&#xff1a;以官网信息为准 大会时间&#xff1a;2025年2月21-23日 接受/拒稿通知&#xff1a;投稿后3-5个工作日内 收录检索&#xff1a;EI&#xff0c;Scopus 出版信息&#xff1a; 本会议所有…...

smplx blender插件笔记

目录 liunx安装&#xff1a; liunx安装&#xff1a; pip install smplx 这个创建模型报错 SMPL_blender_addon...

【算法】移除元素

今天讲的是力扣题目的题解&#xff1a; 力扣题目&#xff1a; 72.移除元素 题目描述&#xff1a; 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。 假设 nums 中不…...

【后端面试总结】设计一个分布式锁需要考虑哪些东西

分布式锁是我们在分布式场景中经常用到的一种技术&#xff0c;在后端面试中也是出镜率很高&#xff0c;那么我们设计分布式锁的时候应该从那几方面去考虑呢 实现分布式锁需要考虑的点 设置超时时间 设置超时时间的目的是为了避免这个场景&#xff1a;进程A拿了锁&#xff0c…...

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 轻型目录访问协议&#xff08;英文&#xff1a;Lightweight Director…...

【文件I/O】文件持久化

这篇文章详细讲解的是 理解在Linux操作系统中输入/输出&#xff08;I/O&#xff09;编程与文件操作的关系。 在计算机编程中&#xff0c;输入/输出编程&#xff08;I/O 编程&#xff09; 是一个重要的概念&#xff0c;指的是通过程序与外部世界&#xff08;如用户输入、文件、…...

USB学习——基本概念

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

python-leetcode-三数之和

15. 三数之和 - 力扣&#xff08;LeetCode&#xff09; class Solution:def threeSum(self, nums: List[int]) -> List[List[int]]:nums.sort() # 排序n len(nums)res []for i in range(n):# 剪枝&#xff1a;如果当前数 > 0&#xff0c;三数之和不可能为 0if nums[i]…...

springboot整合拦截器

1.首先创建拦截器类&#xff1a; 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+树:数据库索引的秘密武器

想象一下&#xff0c;你正在构建一个超级大的图书馆&#xff0c;里面摆满了各种各样的书籍。B树和B树就像是两种不同的图书分类和摆放方式&#xff0c;它们都能帮助你快速找到想要的书籍&#xff0c;但各有特点。 B树就像是一个传统的图书馆摆放方式&#xff1a; 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) 功能&#xff1a;将字符串长度…...

HOW - Form 表单确认校验两种模式(以 Modal 场景为例)

目录 一、背景二、具体1. 模式一&#xff1a;点击确认进行校验提示2. 模式二&#xff1a;确认按钮依赖于表单内容实现说明 一、背景 基于react、antd form分别实现如下两种模式&#xff1a; 1、一个 Modal&#xff0c;点击确认进行校验提示2、一个 Modal&#xff0c;确认按钮…...

LabVIEW部署Web服务

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

进程件通信——网络通信——TCP

网络抓包工具&#xff1a;wireshark 抓取经过设备网卡的数据。 操作&#xff1a; 1. sudo wireshark 2. 选择要抓取的网卡----》any 3. 设置抓取的过滤条件 4. 进行网络通信 5. 分析数据 UDP&#xff1a; 用户数据报协议 UDP&#xff1a; 用户数据报协议 特点&#xff…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

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

IT供电系统绝缘监测及故障定位解决方案

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

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

深度学习水论文:mamba+图像增强

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

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

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