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

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

news 2026/2/9 1:24:29

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/8 4:37:22

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/2/8 10:51:42

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

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;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2026/1/20 12:53:30

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/12/27 19:12:09

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

编程新知 2025/11/12 9:47:25