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

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

news 2025/6/16 3:36:21

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

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/6/15 15:46:47

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/6/15 1:37:57

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/6/15 14:49:27

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

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

编程新知 2025/6/15 14:42:46

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/6/14 13:24:35

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/6/15 1:15:52

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/6/14 22:47:29

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/6/12 10:12:13

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

编程新知 2025/6/15 16:29:58

Linux安全加固：从攻防视角构建系统免疫

Linux安全加固：从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言：攻防对抗的新纪元 在日益复杂的网络威胁环境中，Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示，高级持续性威胁（APT）攻击同比增长65%，平均入侵停留时间缩短至48小时。本章将从…...

编程新知 2025/6/13 18:21:13