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

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

news 2026/2/8 21:31:59

一、基本概念：标准+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

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/8 5:22:04

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2026/1/8 0:40:27

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2026/1/31 9:25:11

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/11/13 2:37:01

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2026/2/1 12:04:40