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

【基础类】—CSS盒模型的全面认识

news 2026/4/13 2:45:36

一、基本概念：标准+IE模型

盒模型：margin + border + padding + content
标准模型：将元素的宽度和高度仅计算为内容区域的尺寸（content-box，默认）
在这里插入图片描述
在这里插入图片描述
当CSS盒模型为 标准盒模型 （box-sizing: content-box） 时，
元素的宽度 = 内容区域的宽度(content)
200px = 200px
IE模型：将宽度和高度包括了内边距和边框的尺寸（border-box）
在这里插入图片描述
在这里插入图片描述
当CSS盒模型为 IE盒模型 （box-sizing: border-box） 时，
元素的宽度 = 内容区域的宽度 + 内边距 + 边框 (content + padding + border)
200px = 178 + 10 * 2 + 1 * 2

二、标准和IE的模型区别

计算宽度和高度的方式不同

三、CSS如何设置两种模型

  1. 通过css设置标准模型
box-sizing: content-box;
  1. 通过css设置IE盒模型
box-sizing: border-box;

四、JS如何设置获取盒模型对应宽和高

  1. 通过dom.style属性获取, 只能获取内联样式的宽和高
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
let dom = document.getElementById("title")
console.log('宽度',dom.style.width) // 只能获取内联样式的宽
console.log('高度',dom.style.height) // 无法外部样式表的高
宽度 100px
高度

1-1. 扩展知识：css 三种样式表

// 内联样式：直接在html标签中使用style属性设置的样式
<p style="color: red;">这是内联样式的文本</p>// 内部样式表: 内部样式表是在HTML文件的头部使用style标签定义的样式
<head>
<style>
p {
color: blue;
}
</style>
</head>// 外部样式表：外部样式表是单独的CSS文件，与HTML文件分离
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
  1. 通过dom.currentStyle.width/height, 获取浏览器渲染以后的宽和高，但是这个属性只有IE支持
  2. window.getComputedStyle(dom).width/height , 获取浏览器渲染以后的宽和高，兼容性好
let dom = document.getElementById("title")
console.log('宽度',window.getComputedStyle(dom).width)
console.log('高度',window.getComputedStyle(dom).height)
// 宽度 200px
// 高度 100px
  1. dom.getBoundingClientRect().width/height, 通过计算该元素top、left、bottom、right到浏览器的距离，可以算出元素的宽高
let dom = document.getElementById("title")
console.log('宽度',dom.getBoundingClientRect().width)
console.log('高度',dom.getBoundingClientRect().height)
// 宽度 100
// 高度 100

五、实例题（根据盒模型解释边距重叠）

  1. 父子元素的边距重叠，取两者之间的最大值
<style>
.parent {background-color: aqua;
}
.child {height: 100px;margin-top:20px ;background-color: brown;
}
</style>
<body><div class="parent"><div class="child"></div></div>
<body>

父元素：margin-top: 0 和 子元素margin-top: 20px，取margin-top:20px
在这里插入图片描述
2. 兄弟元素的边距重叠，取两者之间的最大值

<style>
.brother1 {height: 100px;background-color: blueviolet;margin-bottom: 10px;
}
.brother2 {height: 100px;background-color: burlywood;margin-top: 20px;
}
</style>
<body>
<div class="brother1">brother1</div><div class="brother2">brother2</div>
</body>

brother1 margin-bottom: 10px; brother margin-top:20px; 取 margin-top:20px
在这里插入图片描述
3. 空元素的边距重叠，取两者之间的最大值

<style>
.empty {margin-top: 20px;margin-bottom: 40px;
}
</style>
<body>
<div class="empty"></div>
</body>

.empty margin-top: 20px; margin-bottom: 40px; 取margin-bottom: 40px
在这里插入图片描述

六、BFC (边距重叠解决方案)

overflow:hidden;

解决边距重叠的问题，使用BFC

  1. 什么是BFC
    块级格式化上下文

  2. BFC的原理（渲染规则）
    2-1. BFC的子元素垂直方向的边距会发生重叠

<!-- BFC的子元素的垂直方向边距重叠 --><section id="margin"><style>#margin {background-color: pink;overflow: hidden;}#margin > p {margin: 5px auto 25px;background-color: red;}</style><p>1</p><p>2</p><p>3</p></section>

在这里插入图片描述
解决方案：如何消除边距重叠，需要给相邻的元素添加父元素，并创建BFC（overflow: hidden）

<section id="margin"><style>#margin {background-color: pink;overflow: hidden;}#margin > p {margin: 5px auto 25px;background-color: red;}/* 添加父元素，新增样式overflow: hidden; 创建BFC,防止边距重叠 */.bfc{overflow: hidden;}</style><p>1</p><div class="bfc"><p>2</p></div><p>3</p></section>

在这里插入图片描述

2-2. BFC的区域不会与float元素的box重叠，用于清除浮动布局

<!-- BFC的区域不会与float元素的box重叠，用于清除浮动布局 --><section id="layout"><style media="screen">#layout {background-color: red;}#layout .left {float: left;width: 100px;height: 100px;background-color: pink;}#layout .right {height: 110px;background-color: #ccc;}</style><div class="left"></div><div class="right"></div></section>

在这里插入图片描述
2-2-1：为什么左侧会和右侧发生重叠？
因为浏览器会先渲染文档流中的元素
在这里插入图片描述
然后浏览器再文档流的基础上再渲染脱离文档流的元素（浮动元素），所以发生了重叠
在这里插入图片描述
如何防止普通元素和浮动元素重叠（文档流元素和脱离文档流的元素重叠）？
把普通元素变成BFC

<!-- BFC的区域不会与float元素的box重叠，用于清除浮动布局 --><section id="layout"><style media="screen">#layout {background-color: red;}#layout .left {float: left;width: 100px;height: 100px;background-color: pink;}#layout .right {overflow: hidden;height: 110px;background-color: #ccc;}</style><div class="left"></div><div class="right"></div></section>

在这里插入图片描述

2-3. BFC再页面上是一个独立容器，外面的元素和里面元素不会互相影响
2-4. 当元素为BFC高度时，浮动元素也会参与高度计算

<!-- 浮动元素不参与高度计算，所有父元素高度为0，父元素为BFC时，浮动元素参与高度计算，所以父元素高度为40 --><section id="float"><style media="screen">#float {background-color: red;overflow: hidden;}#float .float {float: left;font-size: 30px;}</style><div class="float">浮动元素</div></section>
  1. 如何创建BFC
    3-1 overflow:visible、auto、hidden;
    3-2 float：≠ none
    3-3 position: ≠ static 或 ≠ relative
    3-4 dipslay: inline-table、table-caption、table-cell、table

相关文章：

【基础类】—CSS盒模型的全面认识

一、基本概念&#xff1a;标准IE模型 盒模型&#xff1a;margin border padding content 标准模型&#xff1a;将元素的宽度和高度仅计算为内容区域的尺寸&#xff08;content-box&#xff0c;默认&#xff09; 当CSS盒模型为 标准盒模型 &#xff08;box-sizing: conten…...

编程日记 2023/8/4 18:37:23

ATFX汇评：非农就业报告来袭，汇市或迎剧烈波动

ATFX汇评&#xff1a;美国非农就业报告每月发布一次&#xff0c;其中非农就业人口和失业率两项数据最受关注。7月季调后非农就业人口&#xff0c;将于今日20:30公布&#xff0c;前值为20.9万人&#xff0c;预期值20万人&#xff1b;7月失业率&#xff0c;同一时间公布&#xff…...

编程日记 2023/8/4 18:36:21

SpringBoot的常用注解的服用方式

1. SpringBootApplication 1.1 概述 SpringBootApplication是SpringBoot应用程序的核心注解&#xff0c;通常用于主类上。它包含了以下三个注解&#xff1a; Configuration&#xff1a;表示该类是一个配置类&#xff0c;用于定义Spring的配置信息。EnableAutoConfiguration&…...

编程日记 2023/8/4 18:35:21

[课程][原创]CMakeLists编写实战linux版

课程地址&#xff1a;https://edu.csdn.net/course/detail/38887 课程介绍课程目录讨论留言 你将收获 学会如何编写CMakeLIsts 学会如何调试自己cmake项目 学会如何引用头文件和库 学会如何调用开源库 适用人群 对CMakeLists感兴趣的入门学者 课程介绍 CMake是一个跨…...

编程日记 2023/8/4 18:34:19

静态路由下一跳地址怎么确定(静态路由配置及讲解)

一、用到的所有命令及功能 ①ip route-static 到达网络地址 子网掩码 下一跳 // 配置静态路由下一跳指的是和当前网络直接连接的路由器的接口地址非直连网段必须全部做路由路径是手工指定的&#xff0c;在大规模网络上不能用&#xff0c;效率低&#xff0c;路径是固定的稳定的…...

编程日记 2023/8/4 18:33:18

SPSS‖参数与非参数检验对比课程中的 配对样本T检验

特点&#xff1a;在配对样本T检验中&#xff0c;强调被试一定要同质&#xff08;同一样本&#xff0c;不同变量环境&#xff09;&#xff0c;其目的就为了消除目的是额外变量的影响&#xff0c;更能反映自变量和因变量之间的关系。 •配对样本t检验的过程&#xff0c;是对两个…...

编程日记 2023/8/4 18:31:15

AI赋能转型升级 助力打造“数智辽宁”——首次大模型研讨沙龙在沈成功举行

当前&#xff0c;以“ChatGPT”为代表的大模型正在引领新一轮全球人工智能技术发展浪潮&#xff0c;推动人工智能从以专用小模型定制训练为主的“手工作坊时代”&#xff0c;迈入以通用大模型预训练为主的“工业化时代”&#xff0c;正不断加速实体经济智能化升级&#xff0c;深…...

编程日记 2023/8/4 18:30:14

JVM、Redis、反射

JVM JVM是Java virtual machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;是一种用于计算机的规范&#xff0c;是通过在实际计算机上仿真模拟各种计算机功能来实现的。 主要组件构成&#xff1a; 1.类加载器 子系统负责从文件系统或者网络中加载Class文件&…...

编程日记 2023/8/4 18:29:12

【Spring练习项目】博客系统

目录 1.项目展示2.项目结构设计3.项目功能设计4 数据库准备4.1 建表4.2 DB相关数据 5.项目模块6.添加项目公共模块6.1 common6.2 实现前端界面 7.功能实现7.1实现博客列表约定前后端交互接口实现服务器代码实现客户端代码 7.2实现博客详情约定前后端交互接口实现服务器代码实现…...

编程日记 2023/8/4 18:28:11

神策新一代分析引擎架构演进

近日&#xff0c;神策数据已经推出全新的神策分析 2.5 版本&#xff0c;该版本支持分析模型与外部数据的融合性接入&#xff0c;构建全域数据融合模型&#xff0c;实现从用户到经营的全链路、全场景分析。新版本的神策分析能够为企业提供更全面、更有效的市场信息和经营策略&am…...

编程日记 2023/8/4 18:27:10

Systemui的介绍以及与普通应用的差异

一.SystemUI的介绍 简介 SystemUI是Android操作系统的一个关键组件&#xff0c;主要负责管理和提供用户界面的核心元素&#xff0c;如状态栏、导航栏和锁屏界面等。从下面两点出发了解SystemUI的特性&#xff1a; 一下就是systemui的部分界面&#xff0c;还包括锁屏界面&…...

编程日记 2023/8/4 18:26:08

群狼调研—产业园物业满意度的调研对象

群狼调研**&#xff08;湖南物业满意度调查&#xff09;**受顾客委托开展产业园物业满意度调查&#xff0c;产业园物业满意度调研对象&#xff1a;产业园物业满意度调研的对象主要是产业园内的企业和租户。这包括在产业园内租用场地或办公空间的企业、工厂、工作室等&#xff0…...

编程日记 2023/8/4 18:25:06

想参加华为杯竞赛、高教社杯和数学建模国赛的小伙伴看过来

本文目录 ⭐ 赛事介绍⭐ 辅导比赛 ⭐ 赛事介绍 ⭐ 参赛好处 ⭐ 辅导比赛 ⭐ 写在最后 ⭐ 赛事介绍 华为杯全国研究生数学建模竞赛是由华为公司主办的一项面向全国研究生的数学建模竞赛。该竞赛旨在通过实际问题的建模和解决&#xff0c;培养研究生的创新能力和团队合作精神&a…...

编程日记 2023/8/4 18:24:05

ELK 企业级日志分析系统

目录 ELK 概述 1、ELK 简介 2、为什么要使用 ELK&#xff1a; 3、完整日志系统基本特征 4、ELK 的工作原理&#xff1a; 总结 ELK Elasticsearch 集群部署&#xff08;在Node1、Node2节点上操作&#xff09; 1&#xff0e;环境准备 2&#xff0e;部署 Elasticsearch …...

编程日记 2023/8/4 18:23:04

PyTorch Lightning教程六：优化代码

有时候模型训练很慢&#xff0c;代码写得冗长之后&#xff0c;没法诶个检查到底那块出现了占用了时空间&#xff0c;本节通过利用Lightning的一些方法&#xff0c;检查分析是那块代码出现了问题&#xff0c;从而来进一步指导和优化代码 本节主要基于性能分析方法&#xff0c;通…...

编程日记 2023/8/4 18:22:01

基于linux下的高并发服务器开发（第四章）- 多线程实现并发服务器

>>了解文件描述符 文件描述符分为两类&#xff0c;一类是用于监听的&#xff0c;一类是用于通信的&#xff0c;在服务器端既有监听的&#xff0c;又有通信的。而且在服务器端只有一个用于监听的文件描述符&#xff0c;用于通信的文件描述符是有n个。和多少个客户端建立了…...

编程日记 2023/8/4 18:20:59

YUV 色彩空间中U 和 V 分量的范围

在YUV色彩空间中&#xff0c;U分量和V分量的范围通常是-0.5到0.5。 具体来说&#xff0c;对于标准的YUV色彩空间&#xff08;例如YUV420&#xff09;&#xff0c;取样是按照4:2:0的比例进行的。这意味着在水平和垂直方向上&#xff0c;U和V分量的取样比Y分量少一半。因此&…...

编程日记 2023/8/4 18:19:57

【云原生】K8S二进制搭建一

目录 一、环境部署1.1操作系统初始化 二、部署etcd集群2.1 准备签发证书环境在 master01 节点上操作在 node01与02 节点上操作 三、部署docker引擎四、部署 Master 组件4.1在 master01 节点上操 五、部署Worker Node组件 一、环境部署 集群IP组件k8s集群master01192.168.243.1…...

编程日记 2023/8/4 18:18:56

自动化应用杂志自动化应用杂志社自动化应用编辑部2023年第11期目录

数据处理与人工智能 大数据视域下无轨设备全生命周期健康管理技术的研究 赖凡; 1-3 三维激光扫描结合无人机倾斜摄影在街区改造测绘中的技术应用 张睿; 4-6 井上变电站巡检机器人的设计与应用 刘芳; 7-9 《自动化应用》投稿邮箱&#xff1a;cnqikantg126.com 基于机…...

编程日记 2023/8/4 18:17:55

Tensorflow2-初识

TensorFlow2是一个深度学习框架&#xff0c;可以理解为一个工具&#xff0c;有谷歌的全力支持&#xff0c;具有易用、灵活、可扩展、性能优越、良好的社区资源等优点。 1、环境的搭建 1.1 Anaconda3的安装 https://www.anaconda.com/ Python全家桶&#xff0c;包括Python环境和…...

编程日记 2023/8/4 18:16:53

LumiPixel Canvas Quest多模态初探：结合文本描述生成角色设定图

LumiPixel Canvas Quest多模态初探&#xff1a;结合文本描述生成角色设定图 1. 多模态创作的新可能 最近试用LumiPixel Canvas Quest时&#xff0c;最让我惊喜的是它处理复杂文本描述的能力。不同于简单的文生图工具&#xff0c;这款模型真正展现了多模态理解的潜力——它能将…...

编程新知 2026/4/13 2:29:03

人工智能编程流程技能AI Dev Workflow

AI Dev Workflow&#xff08;SkillHub&#xff09; AI Dev Workflow&#xff08;ClawHub&#xff09; name: AI Dev Workflow author: 王教成 Wang Jiaocheng (波动几何) description: 此技能提供一个标准化、可复现的AI辅助编程工作流&#xff0c;通过三个有序步骤将模糊想法转…...

编程新知 2026/4/13 1:43:29

轻量级旋转编码器驱动库：纯C状态机实现高可靠正交解码

1. 项目概述RotaryEncoder 是一个轻量级、高可靠性的旋转编码器&#xff08;Rotary Encoder&#xff09;底层驱动库&#xff0c;专为嵌入式实时系统设计。它不依赖操作系统抽象层&#xff08;如 FreeRTOS 或 CMSIS-RTOS&#xff09;&#xff0c;亦不绑定特定 HAL 库&#xff08…...

编程新知 2026/4/13 0:50:22

MIMO-UNet：重新思考单图像去模糊中的多尺度融合策略

1. 为什么我们需要重新思考图像去模糊&#xff1f; 每次看到手机里拍糊的照片&#xff0c;我都忍不住想&#xff1a;要是能一键修复该多好。这就是图像去模糊技术要解决的问题。传统方法就像用PS手动修复&#xff0c;费时费力效果还一般。后来深度学习来了&#xff0c;特别是那…...

编程新知 2026/4/13 0:19:44

单片机I/O驱动与隔离电路的优化设计实践

1. 单片机I/O驱动电路设计的关键要点 我第一次接触单片机I/O驱动设计是在一个工业控制项目上&#xff0c;当时因为驱动电路设计不当导致整个系统频繁死机。后来才发现&#xff0c;I/O驱动电路就像单片机的"肌肉"&#xff0c;如果设计不好&#xff0c;再强大的"大…...

编程新知 2026/4/12 23:49:43

从BF到BM：模式匹配算法在网络安全实战中的演进与选型

1. 模式匹配算法&#xff1a;网络安全的第一道防线 想象一下你正在机场安检&#xff0c;工作人员需要快速判断旅客行李中是否藏有违禁品。在网络安全领域&#xff0c;模式匹配算法就是这样的"安检员"&#xff0c;它通过快速扫描海量数据流&#xff0c;识别出潜在的攻…...

编程新知 2026/4/12 23:29:13

Playwright + MCP：AI驱动的浏览器自动化革命，告别脚本编写时代！

1. Playwright与MCP&#xff1a;浏览器自动化的新范式 还记得那些为了调试一个登录按钮的XPath选择器而熬到凌晨的日子吗&#xff1f;传统浏览器自动化就像是用螺丝刀组装汽车——效率低下且容易出错。而Playwright与MCP的结合&#xff0c;就像是给自动化测试装上了自动驾驶系统…...

编程新知 2026/4/12 23:23:11

MiniCPM-o-4.5-nvidia-FlagOS参数详解：bfloat16精度选择依据与推理延迟权衡分析

MiniCPM-o-4.5-nvidia-FlagOS参数详解&#xff1a;bfloat16精度选择依据与推理延迟权衡分析 1. 引言 当你第一次部署一个像MiniCPM-o-4.5这样的大模型时&#xff0c;面对配置选项里那个“bfloat16”精度选项&#xff0c;是不是有点拿不准主意&#xff1f;选它吧&#xff0c;担…...

编程新知 2026/4/12 20:57:05

Windows 查看占用端口的进程，并关闭进程

Windows 查看占用端口的进程&#xff0c;并关闭进程 AI 回答 在 Windows 系统中&#xff0c;当遇到“端口被占用”&#xff08;Address already in use&#xff09;的报错时&#xff0c;通常是因为之前的程序没有正常关闭&#xff0c;或者后台有其他服务正在使用该端口。 你可以…...

编程新知 2026/4/12 20:51:03

Pharma Agent：从文档 QA 到智能监管合规助手

一、起因 去年秋天，我们的 RA（法规事务）团队在准备一个 IND 申请，涉及某小分子靶向药的临床前安全性综述。团队里有个同事叫小林，她需要在 FDA 的 2000 多页 guidance document 里找到关于"杂质阈值"的具体条款，同时对比 ICH Q3A 和 Q3B 的差异。 她给我发消…...

编程新知 2026/4/12 20:42:44