CSS-1_0 CSS和文档流
文章目录
- CSS和文档流
- 如何证明这个流的存在呢?
- 流和display
- 番外:inline-block
- 碎碎念
CSS和文档流
首先什么叫流呢?
通常来说,我们最终看到的网页是HTML文档中定义的各个元素挨个输出的结果,这种一个接一个输出的方式,就是HTML的默认文档流
如何证明这个流的存在呢?
其实当你第一次使用 float 这个属性的时候,你就已经接触到这个东西了,来看这个例子:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="A" class="float-container"><div id="C" class="box" style="background: red"></div><div id="D" class="box" style="background: green"></div>
</div>
<div id="B">我是B
</div>
</body>
</html><style>.float-container > * {float: left;}.box {padding: 2em;}
</style>
我们给作为A子元素的C和D赋予padding和颜色,让我们看到他,接着输出了B
看似很正常,其实很诡异
B是一个块状元素啊,为什么看起来他跟A处在同一行呢?他为什么不换行?
我不打算卖关子,其实B已经换行了,只不过A的高度此时=0
那你会说不对啊,明明A的内部有C和D,高度怎么可能等于0?
这就是流在起作用,A和B都属于HTML的文档流;而C和D由于float的作用,他们已经不属于文档流了,他们属于浮动流(这也是我们把元素设定成float的时候他会无视原有的元素的display值横向展示的原理)。所以在我们计算A的高度时他会=0。这一点你用F12可以证明,也可以通过消除浮动让这个例子恢复正常,你只需要加上这段代码就可以:
#A::after{display: block;content: "";clear: both;
}
这是清除元素浮动对元素的宽高值影响的标准写法
流和display
如果上面的例子改成这样,又会发生神奇的事情:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="A" class="float-container">我是A<div id="C" class="box" style="background: red">我是C</div><div id="D" class="box" style="background: green">我是D</div>
</div>
<div id="B"><span>我是B</span>
</div>
</body>
</html><style>.float-container > * {float: left;}.box {padding: 2em;}#A, #B {display: inline-block;vertical-align: bottom; /*如果不加这句你会发现A跟B对不齐*/}
</style>
这下B是真不换行了
先解释一下为什么会先输出C和D,然后才输出 我是A 这句话
你知道float这个属性本来是用来干嘛的吗?
这个属性最开始不是用来布局的,他是用来实现那种类似报纸杂志上那种图片放在一侧,旁边围绕文字的效果的。只不过他用来做布局太合适了,所以才会被大量使用于布局。而且在那个没有流式布局、网格布局的年代,浮动布局还真就是你最好的解决方案
但不是唯一的解决方案,还有一些做法可以把元素用表格的方式显示。你可以说是网格布局的雏形,但他其实是一种取巧的做法。在网格布局已经成熟的今天,请抛弃这种写法
如果考虑到这个,那就好理解了。我们float C和D,那么他们肯定会被优先输出到文档流的最左侧,然后输出A中的文档流,也就是 我是A 这句话
接着,B没有换行,直接在后面输出了
没错,这就是 display:inline-block 在起作用,而不同的display是如何影响元素的,那就要从CSS的盒模型说起了
番外:inline-block
其实设定 float:left 跟 display:inlin-block 是一样的,都是把元素从正常的文档流中写入到浮动流中。而且我们知道块状元素和行内元素他们是通过display这个属性来区分和获取对应的样式的(display:block/inline)。设定 display:inline-block 后,相当于你无法使用这两种元素的样式,所以最后你会得到一个 宽度由元素决定,且不换行的块状元素,而且他是处于浮动流的
碎碎念
- HTML页面在输出元素的时候,遵循一种被称之为 标准流 的顺序,你可以修改display这个属性的值,把元素从标准流中取出来
- 设定float属性的时候,其实他也是把display属性给修改了。所以设定了float的元素,已经不在标准流中了,因此标准流的元素在计算尺寸时不会考虑浮动子元素
- 你可以通过 clear 属性来强制清除浮动流带来的影响
- inline-block 可以手动把元素写入浮动流,最后你会得到一个宽度由元素决定,且不换行的块状元素
万分感谢您看完这篇文章,如果您喜欢这篇文章,欢迎点赞、收藏。还可以通过专栏,查看更多与【CSS笔记】有关的内容
相关文章:

CSS-1_0 CSS和文档流
文章目录 CSS和文档流如何证明这个流的存在呢?流和display番外:inline-block 碎碎念 CSS和文档流 首先什么叫流呢? 通常来说,我们最终看到的网页是HTML文档中定义的各个元素挨个输出的结果,这种一个接一个输出的方式…...

小程序图片下载保存方法,图片源文件保存!
引言 现在很多时候我们在观看到小程序中的图片的时候,想保存图片的原文件格式的话,很多小程序是禁止保存的,即使是让保存的话,很多小程序也会限制不让保存原文件,只让保存一些分辨率很低的,非常模糊的图片…...

新书速览|深入理解Hive:从基础到高阶:视频教学版
《深入理解Hive:从基础到高阶:视频教学版》 本书内容 《深入理解Hive:从基础到高阶:视频教学版》采用“理论实战”的形式编写,通过大量的实例,结合作者多年一线开发实战经验,全面地介绍Hive的使用方法。《深入理解Hiv…...

钡铼Profinet、EtherCAT、Modbus、MQTT、Ethernet/IP、OPC UA分布式IO系统BL20X系列耦合器
BL20X系列耦合器是钡铼技术开发的一款用于分布式I/O系统的设备,专为工业环境下的高速数据传输和远程设备控制而设计,支持多种工业以太网协议,包括Profinet、EtherCAT、Modbus、MQTT、Ethernet/IP和OPC UA等。如果您正在考虑部署BL20X系列耦合…...

Git分支合并以及分支部分合并 提交记录合并
Git分支合并,以及分支部分合并,提交记录合并 最近工作中用到git分支合并的场景,记录一下. 分支整体合并,合并所有记录 仅合并分支部分代码...

IDEA关联数据库
《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试(Debug) 第七章 …...
【Leetcode】14. 最长公共前缀
leetcode原地址:https://leetcode.cn/problems/longest-common-prefix 描述 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 “”。 示例 1: 输入:strs [“flower”,“flow”,“flight”…...

【BUG】已解决:zipfile.BadZipFile: File is not a zip file
已解决:zipfile.BadZipFile: File is not a zip file 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰,211科班出身,就职于医疗科技公司,热衷分享知识,武汉城市开发…...

小白新手搭建个人网盘
小白新手搭建个人网盘 序云服务器ECS重置密码远程连接ECS实例 安装OwnCloud安装Apache服务PHP运行环境NAS挂载挂载验证操作体验 序 阿里云文件存储NAS(Apsara File Storage NAS)是一个可大规模共享访问,弹性扩展的分布式文件系统。本文主要是…...

NineData全面支持PostgreSQL可视化表结构设计
“PostgreSQL 是最像 Oracle 的开源关系型数据库“,也正因为如此,很多企业都青睐 PostgreSQL,拿它当成 Oracle 的替代品。所以毫无疑问,目前 PostgreSQL 在企业中非常常见。 对于直接接触 PostgreSQL 的开发人员而言,…...

从系统层面认识Linux及mysql中的多表查询
为什么计算机起始时间是1970年1月1日 为什么计算机起始时间是1970年1月1日-CSDN博客https://blog.csdn.net/csdn_kou/article/details/81535452 date "%Y-%m-%d %H:%M:%S" 查看日期 sudo ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 在数据层面 CPU不…...

PCB(印制电路板)制造涉及的常规设备
印制电路板(PCB)的制造涉及多种设备和工艺。从设计、制作原型到批量生产,每个阶段都需要不同的专业设备。以下是一些在PCB制造过程中常见的设备: 1. 计算机辅助设计(CAD)软件: - 用于设计PC…...

《Windows API每日一练》10.3 公用对话框
Windows最初发行时的主要目标之一就是提倡一种标准化的用户界面。对于公用菜单 项来说,这一目标实现得很快。几乎所有的软件制造商都采用了Alt-File-Open组合来打开 文件。但是,真正用来打开文件的对话框却经常很不一样。 从Windows 3.1开始,…...

C++中的引用
在C中,我们要学习一个新的概念,叫做引用。引用不是对象,它只是给变量取一个别名。就好比,我们每个人总会右一下外号,或者是小名。当朋友或者家长不管是直接叫你的名字,还是叫你的小名,你都会答应…...

【自学安全防御】三、企业双机热备和带宽管理的综合实验
实验拓扑: 实验任务: 12,对现有网络进行改造升级,将当个防火墙组网改成双机热备的组网形式,做负载分担模式,游客区和DMZ区走FW3,生产区和办公区的流量走FW1 13,办公区上网用户限制流…...
无极与有极电容的区别
无极性电容与有极性电容:差异与应用探索 在电子元件的广阔世界里,电容器无疑是不可或缺的一部分。它们以储存电荷和调节电路中的电压与电流而闻名。然而,电容器并非一概而论,其中最为显著的区别之一就是无极性电容与有极性电容。…...

入坑树莓派(2)——树莓派4B与手机蓝牙通信
入坑树莓派(2)——树莓派4B与手机蓝牙通信 1、引言 在入坑树莓派(1)中已经搞掂了可视化问题。现在继续开展下一步,尝试与手机通信,一开始是想弄wifi连接的,但发现基于wifi的APP比较难弄,为了降低开发的难度,又因为树莓派板子自带蓝牙模块,所以直接选用蓝牙连接手机…...

RocketMQ单结点安装/Dashboard安装
目录 1.安装NameServer 2.安装Broker 3.使用自带工具测试数据发送 4.使用DashBoard进行查看 5.关闭相关设备 前置条件:两台虚拟机CentOS Linux release 7.5.1804(ps:当然也可以都部署在一台机器上) RocketMq属于天生集群。需要同时启动nameServer和Broker进行…...

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第二篇 Linux系统编程篇-第三十四章 进程基础
i.MX8MM处理器采用了先进的14LPCFinFET工艺,提供更快的速度和更高的电源效率;四核Cortex-A53,单核Cortex-M4,多达五个内核 ,主频高达1.8GHz,2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...

使用LVS+NGinx+Netty实现数据接入
数据接入 链接参考文档 LVSKeepalived项目 车辆数据上收,TBox通过TCP协议连接到TSP平台 建立连接后进行数据上传。也可借由该连接实现远程控制等操作。 通过搭建 LV—NGinx—Netty实现高并发数据接入 LVS:四层负载均衡(位于内核层&#x…...

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

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...

UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...