前端 CSS 经典:CSS 包含块

前言:CSS 总的来说就两块,样式计算和视觉格式化模型,而包含块就是视觉格式化模型的重要内容,理解包含块的定义,对于 CSS 布局有更好的帮助。

1. 概念

什么叫包含块,指的是一个区域,某一个元素在这个区域的排列,这个元素的宽度,高度,left,top 是相对于这个区域的。而这个区域就叫作这个元素的包含块。

2. 包含块的确定规则

  1. 如果一个元素是浮动元素或常规元素他的包含块是父元素的内容盒。
  2. 如果一个元素是绝对定位元素他的包含块是第一个定位祖先的填充盒。
  3. 如果一个元素是固定定位元素且他的祖先元素里面没有 transform 变形样式,那他的包含块是整个视图窗口。如果祖先元素有 transform 变形样式。那他的包含块就是设置了 transform 变形样式的填充盒子。

3. 面试问题

绝对定位元素和固定定位元素的区别是什么?

答案:包含块不一样。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/13108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华焰天下晋升质量管理三大体系和产品3C认证实力级

华焰天下,作为业界领先的新能源灶具企业,一直以来都致力于追求卓越的质量管理和产品创新。近日,华焰天下成功晋升为质量管理三大体系先进管理,并成功获得了产品3C认证,这标志着我们在质量管理和产品安全方面迈出了坚实…

ThreadLocal,一次到位

一、定义 ThreadLocal是线程私有变量&#xff0c;用于保存每个线程的私有数据。 那么什么情况下需要进行线程隔离 二、源码分析 public class ThreadLocalTest01 {ThreadLocal<Integer> t new ThreadLocal<>();public void test() {t.set(1);Integer integer…

传输层协议——TCP协议

TCP协议又叫传输控制协议&#xff0c;TCP/IP协议是计算机通信网络中目前使用最多的协议&#xff0c;同时也融入了生活的方方面面&#xff0c;不管是浏览网页使用的http/https协议、物联网设备使用的MQTT/MQTTS协议与下载文件使用的ftp协议、工业以太网中使用的Modbus TCP协议等…

JVM学习-虚拟机栈

虚拟机栈 每个线程创建时都会创建一个虚拟机栈&#xff0c;其内部保存一个个栈帧&#xff0c;对应一次次Java方法调用&#xff0c;栈是线程私有的。 生命周期: 与线程相同 作用 主管Java程序的运行&#xff0c;它保存方法的局部变量、部分结果、并参与方法的调用和返回。 …

PyTorch之list、ndarray、tensor数据类型相互转换

温故而知新&#xff0c;可以为师矣&#xff01; 一、参考资料 python中list、numpy、torch.tensor之间的相互转换 二、常用操作 list 转 numpy ndarray np.array(list) import numpy as npa_list [[j for j in range(5)] for i in range(3)] a_ndarray np.array(a_lis…

云服务器配置mysql允许被远程连接从而使用图形化界面

介绍 在云服务器上搭建和配置数据库是进行网站和应用开发的关键步骤之一。本文将介绍如何在云服务器上设置 MySQL 8 和 MySQL 5&#xff0c;以允许远程连接&#xff0c;从而让你的数据库能够被远程用户访问。这样你的本机就可以访问linux服务器上的mysql能&#xff0c;就可以使…

254 基于matlab的钢筋混凝土非线性分析

基于matlab的钢筋混凝土非线性分析&#xff0c;根据梁本构关系&#xff0c;然后进行非线性分析&#xff0c;绘制弯矩-曲率曲线。可设置梁的截面尺寸、混凝土本构&#xff0c;钢筋截面面积等相关参数&#xff0c;程序已调通&#xff0c;可直接运行。 254 钢筋混凝土非线性分析 弯…

利用管道通信(pipe)测量进程间的上下文切换(context switch)开销

利用管道通信(pipe)测量进程间的上下文切换(context switch)开销 《https://pages.cs.wisc.edu/~remzi/OSTEP/cpu-mechanisms.pdf》 Measuring the cost of a context switch is a little trickier. The lmbench benchmark does so by running two processes on a single CPU…

qmake、CMake、make和Makefile

为了跟踪C工程的全部部分&#xff0c;要求有一种机制来精确地指定&#xff1a; 涉及的输入文件&#xff0c;如源代码文件&#xff1a;.cpp&#xff0c;头文件&#xff1a;.h建立程序时所需的工具&#xff0c;如编译器&#xff1a; g.exe&#xff0c;链接器&#xff1a;ld.exe&a…

哈夫曼编码的应用

数据结构与算法课的一个简单实验&#xff0c;记录一下&#xff0c;以供参考。 文章目录 要求测试样例统计字母出现次数建立哈夫曼树对字符编码对原文进行编码译码 要求 输入一段100—200字的英文短文&#xff0c;存入一文件a中。统计短文出现的字母个数n及每个字母的出现次数…

终于搞懂Linux 设备树中的#address-cells,#size-cells 和reg 属性

目录 一、前置知识 1. 处理器平台2. reg 属性的基本格式3. reg 属性的作用 reg 用法 二、#address-cells 和 #size-cells 属性 1. 示例1 2. 示例23. 示例3 一、前置知识 要理解#address-cells和#size-cell 这两个属性&#xff0c;就要先了解 reg属性。 1. 处理器平台 下…

VS2022如何添加现有项

以 想在队列里&#xff0c;使用堆栈的.c&#xff0c;.h文件 为例 目录 1.复制堆栈的.c&#xff0c;.h文件 ​编辑 2.打开队列所在项目的文件夹 3.粘贴堆栈的.c&#xff0c;.h文件 4.在头文件和源文件添加相应的堆栈的.c&#xff0c;.h文件 1.复制堆栈的.c&#xff0c;.h文件…

QML进阶(十七) ECMAScript 语法介绍

文章目录 基本语法变量基本类型类型转换对象函数和循环打印输出内置对象来自QML的基本类型ECMAScript语言的标准是由Netscape、Sun、微软、Borland等公司基于JavaScript和JScript定义出来的脚本语言标准。可以为不同种类的浏览器环境提供核心的脚本编程能力。在QML中我们通过EC…

HCIP【VLAN综合实验】

目录 一、实验拓扑图&#xff1a; 二、实验要求&#xff1a; 三、实验思路&#xff1a; 四、实验步骤&#xff1a; 1、在交换机SW1,SW2,SW3配置VLAN和各个接口对应类型的配置 2、在路由器上面配置DHCP服务 一、实验拓扑图&#xff1a; 二、实验要求&#xff1a; 1、PC1 …

STK12 RPO模块学习(3)

一、Maintain NMC RPO Sequence Maintain Natural Motion Circumnavigation RPO序列在目标星和追踪星经历不同的力的情况下保持NMC。通常这种差异是由于阻力和太阳光压造成的。这些是主要不同力当执行接近任务的时候&#xff0c;因为重力和相对三体摄动力非常小当相对距离在10…

【Docker使用技巧】

Docker使用 命令 //docker 进入容器内部 退出 exit docker exec -it 容器ID /bin/bash //docker 查看容器日志 退出 Ctrlc docker logs [OPTIONS] 容器ID或名称 [OPTIONS] -f : 跟踪日志输出 -t : 显示时间戳 --tail :仅列出最新N条容器日志 --since&#xff1a;显示某个日…

从零开始精通RTSP之传输AAC音频流

概述 AAC&#xff0c;英文全称为Advanced Audio Coding&#xff0c;是一种高效的有损音频压缩格式&#xff0c;由MPEG-4标准定义。相比传统的MP3&#xff0c;AAC在相同比特率下能提供更好的音质&#xff0c;尤其在低比特率场景下优势明显。AAC支持多种采样率、声道数和编码工具…

MySQL远程连接错误解决:“Host is not allowed to connect to this MySQL server”详解

目录 一、异常错误二、原因三、解决方法 一、异常错误 通过远程客户端访问MySQL服务器时会遇到“Host is not allowed to connect to this MySQL server”的错误提示。 二、原因 MySQL服务器当前配置不允许来自特定主机的连接尝试。 三、解决方法 允许远程主机访问MySQL服…

link.click()时浏览器报错The file at ‘data:image/png;base64,iVBORw

代码如下&#xff1a; const dataURL canvas.toDataURL({format: "png",width: 400,height: 400, });const link document.createElement("a"); link.download new Date().getTime();link.href dataURL; document.body.appendChild(link); link.click…

IT行业的现状与未来发展趋势

方向一&#xff1a;技术革新与行业应用 随着科技的日新月异&#xff0c;IT行业已成为全球经济增长和社会进步的重要引擎。从云计算、大数据、人工智能到物联网、5G通信和区块链&#xff0c;这些前沿技术正以前所未有的速度重塑我们的生活和工作方式。以下是我对IT行业现状及未来…