CSS | 文档流 | Box盒模型 | FC BFC、IFC、FFC、GFC

文档流

“在一个块格式区域中,盒子会从包含块的顶部开始,按序垂直排列(受书写模式影响)。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。在一个块格式区域中,每个盒子的左外边缘会与包含块左边缘重合(如果是从右到左的排版顺序,则盒子的右外边缘与包含块右边缘重合)。”

“在内联格式区域中,盒子会从包含块的顶部开始,按序水平排列(受书写模式影响)。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐:可以底部对齐或顶部对其,或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。”

脱离文档流

float 或者 position:absolute / fixed 可以让元素脱离文档流

脱离常规流的元素会创建一个新的块级格式化上下文(Block Formatting Context: BFC)环境

注:float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围(可以说是部分无视)

溢出

overflow
text-overflow

Box 盒模型

MDN 盒模型

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

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

相关文章

《微信小程序开发从入门到实战》学习四十九

4.5 实现投票小程序服务端功能 4.5.1 完成获取投票信息功能 修改pages/vote/vote.js文件中getVoteDataFromServer函数,代码如下: getVoteDataFromServer(voteID) { const db wx.cloud.database() db.collection(votes).doc(voteID).get().then(res &…

【启扬方案】启扬储能管理平板助力储能电站实现智能且高效化运行

在储能领域,储能电站扮演着重要角色,储能电站技术的应用贯穿于电力系统发电、输电、配电、用电的各个环节。实现电力系统削峰填谷、可再生能源发电波动平滑与跟踪计划处理、高效系统调频,增加供电的可靠性。 但随着储能电⼒系统建设发展得越来…

Java网络编程,使用UDP实现TCP(三), 基本实现四次挥手

简介 四次挥手示意图 在四次挥手过程中,第一次挥手中的Seq为本次挥手的ISN, ACK为 上一次挥手的 Seq1,即最后一次数据传输的Seq1。挥手信息由客户端首先发起。 实现步骤: 下面是TCP四次挥手的步骤: 第一次挥手&…

记录一下如何使用python生成二维码 并简单练习命令行参数供初学者参考

主代码main.py 后面是演示效果图: import argparse import sysimport qrcode import os qr qrcode.QRCode(version1,error_correctionqrcode.constants.ERROR_CORRECT_L,box_size10,border4, ) fileList[] fileName[]parserargparse.ArgumentParser(description生…

Ubuntu20.04降低linux版本到5.4.0-26-generic

前言 试用ubuntu20.04安装昇腾的驱动和cann的时,出现如下问题: (base) rootubuntu:/home/work# ./Ascend-hdk-910-npu-driver_23.0.rc3_linux-aarch64.run --full Verifying archive integrity... 100% SHA256 checksums are OK. All good. Uncompr…

基于Python+WaveNet+MFCC+Tensorflow智能方言分类—深度学习算法应用(含全部工程源码)(三)

目录 前言引言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据预处理2. 模型构建1)定义模型结构2)优化损失函数 3. 模型训练及保存1)模型训练2)模型保存3)映射保存 相关其它博客工程源代码下载其它资料下载…

“百里挑一”AI原生应用亮相,百度智能云千帆AI加速器首个Demo Day来了!

作者简介: 辭七七,目前大二,正在学习C/C,Java,Python等 作者主页: 七七的个人主页 文章收录专栏: 七七的闲谈 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖&#x1f…

亚马逊云科技:向量数据存储在生成式人工智能应用程序中的作用

生成式人工智能深受大众喜爱,并且由于具备回答问题、写故事、创作艺术品甚至生成代码的功能,推动了行业的转变,那么如何才能在自己的企业中充分地利用生成式人工智能等应运而生问题。许多客户已经积累了大量特定领域的数据(财务记…

深入理解Disruptor - 无锁并发框架的革命

1. Disruptor框架简介 概述: Disruptor是一种高性能的内存队列,最初由LMAX开发,目的是在低延迟交易系统中替代传统的阻塞队列。它通过使用环形数组和无锁的发布/订阅模式,显著降低了线程间通信的延迟。这种设计使得它在多生产者-…

【1day】​万户协同办公平台 iWebPDF/DocumentEdit.jsp文件 SQL注入漏洞学习

注:该文章来自作者日常学习笔记,请勿利用文章内的相关技术从事非法测试,如因此产生的一切不良后果与作者无关。 目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现

如何构建和安装Go程序

引言 到目前为止,在我们的[如何在Go中编码]系列中,您已经使用命令[go run]自动编译源代码并运行生成的可执行文件。尽管这个命令对于在命令行中测试你的代码很有用,但发布或部署你的应用程序需要你将代码构建为可共享的二进制可执行文件,或包含可以运行你的应用程序的机器…

LangChain学习二:提示-实战(下半部分)

文章目录 上一节内容:LangChain学习二:提示-实战(上半部分)学习目标:提示词中的示例选择器和输出解释器学习内容一:示例选择器1.1 LangChain自定义示例选择器1.2 实现自定义示例选择器1.2.1实战&#xff1a…

静态路由的原理和配置

一.路由器的工作原理 首先我们知道路由器是工作在网络层的,那就是三层设备。网络层的功能主要为:不同网段之间通信、最佳路径选择也就是逻辑地址(ip地址)寻址、转发数据。 1.路由器是什么 路由器是能将数据包转发到正确的目的地…

【QT 5 调试软件+(Linux下验证>>>>串口相关初试串口)+Windows下qt代码在Linux下运行+参考win下历程+基础样例】

【QT 5 调试软件Linux下验证>>>>串口相关初试串口参考win下历程基础样例】 1、前言2、实验环境3、先行了解4、自我总结-win下工程切到Linux下1、平台无关的代码:2、依赖的库:3、文件路径和换行符:4、编译器差异:5、构…

什么是防抖与节流?应用场景举例

防抖节流如何处理防抖与节流 防抖节流防抖例子节流例子Vue Axios全局接口防抖、节流封装实现 小结 防抖 防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 应用场景: 提交按钮、用户注册…

QEMU源码全解析 —— virtio(2)

接前一篇文章: 本文内容参考: 《趣谈Linux操作系统》 —— 刘超,极客时间 《QEMU/KVM》源码解析与应用 —— 李强,机械工业出版社 特此致谢! 上一回对于virtio进行了简介,并说明了其基本原理以及框架。对…

【JVM入门到实战】(三) 查看字节码文件的工具

一、 javap -v命令 javap是JDK自带的反编译工具,可以通过控制台查看字节码文件的内容。适合在服务器上查看字节码文件内容。直接输入javap查看所有参数。输入javap -v 字节码文件名称 查看具体的字节码信息。(如果jar包需要先使用 jar –xvf 命令解压&a…

mmyolo的bbox_loss和检测bbox都是空

最近用mmyolo训练自己的数据集的时候发现训练的时候loss_bbox0,测试和eval的时候结果也全是空的,排除了数据集读取的问题,最后发现是config中自定义了自己的类别但是没有传给dataset。。。 简而言之,在自定义了数据集里的metainf…

深入理解Java虚拟机---内存分配

深入理解Java虚拟机---内存分配 GC日志内存分配与回收策略对象优先在Eden分配大对象直接进入老年代长期存活的对象将进入老年代动态对象年龄判定空间分配担保 GC日志 以下两段典型的GC日志: 33.125: [GC [DefNew: 3324K->152K(3712K), 0.0025925 secs] 3324K-&…

【C语言】一个RDMACM、Verbs API与epoll一起使用的例子

一、epoll介绍 epoll是Linux内核为处理大批量文件描述符而作了改进的poll,是Linux下多路复用IO接口select/poll的增强版本,它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率。 以下是epoll的主要使用方法和优点: epo…