当前位置: 首页 > 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…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...