第七讲_css浮动
css浮动
- 1. 设置浮动
- 2. 浮动的特点
- 3. 浮动的影响
- 4. 解决浮动的影响
- 4.1 解决父元素高度塌陷的问题
- 4.2 解决对兄弟元素影响问题
1. 设置浮动
浮动是通过float属性设置,float取值范围:
- none:不浮动,默认值。
- left:向左浮动。
- right:向右浮动。
2. 浮动的特点
- 浮动的元素会脱离标准流,不再保留原来的位置。
<style>.first {height: 100px;width: 100px;background-color: red;float: left;}.second {height: 200px;width: 200px;background-color: blue;}</style><div class="first"></div>
<div class="second"></div>
- 浮动元素会在一行内排列显示并且元素顶部对齐。
<style>.first {height: 100px;width: 100px;background-color: red;float: left;}.second {height: 200px;width: 200px;background-color: blue;float: left;}
</style><div class="first"></div>
<div class="second"></div>
- 任何元素都可以添加浮动,添加浮动的元素就具有行内块元素的特性。
<style>.first {height: 200px;width: 200px;background-color: red;float: left;}</style><span class="first">我是一个行内元素加了浮动</span>
<span>是一个行内元素,无法设置宽高。当给它设置浮动后,就变成了一个行内块元素,可以设置宽高了。
3. 浮动的影响
- 元素浮动后,会脱离标准流,后面的兄弟元素会占据浮动元素之前的位置;前面的兄弟元素无影响。
- 元素浮动后,不能撑起父元素的高度,导致父元素高度塌陷;父元素的宽度依然束缚浮动的元素。
<style>.parent {width: 100px;background-color: red;}.child {height: 100px;float: left;}</style><div class="parent"><div class="child">我是一个浮动的子元素</div>
</div>
ps:执行上面代码,你会发现一:父元素没有红色的背景,因为子元素浮动后,父元素没有高度;你会发现二:子元素的内容换行了,因为父元素的宽度依然束缚着浮动的子元素。
4. 解决浮动的影响
4.1 解决父元素高度塌陷的问题
方式一:给父元素设置高度。
<style>.parent {width: 100px;height: 100px;background-color: red;}.child {height: 100px;float: left;}</style><div class="parent"><div class="child">我是一个浮动的子元素</div>
</div>
方式二:给父元素设置一个overflow: hidden
<style>.parent {width: 100px;background-color: red;overflow: hidden;}.child {height: 100px;float: left;}
</style><div class="parent"><div class="child">我是一个浮动的子元素</div>
</div>
4.2 解决对兄弟元素影响问题
方式一:在最后一个浮动元素后面,添加一个块元素,并给块元素添加clear: both。
<style>.first {height: 100px;width: 100px;background-color: aqua;float: left;}.second {height: 100px;width: 100px;background-color: blueviolet;float: left;}.test {height: 100px;width: 100px;background-color: blue;}.tmp {clear: both;}
</style><div class="parent"><div class="first"></div><div class="second"></div><div class="tmp"></div>
</div>
<div class="test"></div>
ps:执行上面代码,你会发现class=test的div,并没有占据浮动元素的位置。因为在它前面添加了一个空div,并且清空的浮动。
方式二:原理与方式一相同,只是实现的方式更加优雅,在实际开发中应用更多。通过伪元素的方式实现。
<style>
.first {height: 100px;width: 100px;background-color: aqua;float: left;
}
.second {height: 100px;width: 100px;background-color: blueviolet;float: left;
}
.test {height: 100px;width: 100px;background-color: blue;
}
.parent::after {content: "";display: block;clear: both;
}
</style><div class="parent"><div class="first"></div><div class="second"></div>
</div>
<div class="test"></div>
如果对伪类选择器不太熟悉,可以查看css选择器介绍。
相关文章:
第七讲_css浮动
css浮动 1. 设置浮动2. 浮动的特点3. 浮动的影响4. 解决浮动的影响4.1 解决父元素高度塌陷的问题4.2 解决对兄弟元素影响问题 1. 设置浮动 浮动是通过float属性设置,float取值范围: none:不浮动,默认值。left:向左浮…...
2024秋招,顺丰科技测试开发工程师一面
前言 今天回顾一下,一个被捞的全流程面试经历 时间线 9月21日测评 10月26日技术一面,本来是11点半开始,我正做另一个笔试呢,突然给我打电话开面 20分钟结束,一开始以为KPI,结果给过了 10月31日技术二…...
基于apache的http文件服务配置
背景: 公司的产品使用的第三方模组可以OTA,厂家提供的是window开启软件,这样就可以在本机做http下载服务器,然后使用端口映射的方式,公开到外网,这样就可以进行4G网络访问内网服务器了。但这个有个弊端&am…...
连铸工艺和模铸工艺有什么区别。
问题描述:连铸工艺和模铸工艺有什么区别。 问题解答: 连铸工艺和模铸工艺在多个方面存在显著差异: 指代不同: 模铸是成批大量生产锻件的锻造方法。连铸即为连续铸钢的锻造方法。 工艺不同: 模铸在锻压机械的作用…...
pyqt treeWidget树生成
生成treeWidget树与获取treeWidget树节点的数据 # encodingUTF-8 import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QApplication, QTreeWidgetItem, QLineEdit, QSpinBox, QComboBox from PyQt5.QtWidgets import QWidget from release_test import Ui_F…...
DataFunSummit:2023年云原生大数据峰会:核心内容与学习收获(附大会核心PPT下载)
随着数字化转型的深入推进,大数据技术已经成为企业获取竞争优势的关键因素之一。本次峰会汇聚了业界顶尖的大数据专家、企业领袖和技术精英,共同探讨云原生大数据领域的最新技术和趋势。本文将深入分析峰会的核心内容,并探讨参会者从中能学到…...
docker 容器添加指定网络地址
docker 容器添加指定网络地址 在搭建halo博客时,准备让 halo、mysql8.1、nginx 三个容器在同一个网段中,并指定IP。 实现docker内部容器之间网络互通。 查看容器网络信息命令 docker inspect 容器名各容器部署成功后网络效果如下: nginx …...
后端怎样防止重复提交订单?
参考文章 通常我们可以在前端通过防抖和节流来解决短时间内请求重复提交的问题, 如果因网络问题、Nginx重试机制、微服务Feign重试机制或者用户故意绕过前端防抖和节流设置,直接频繁发起请求,都会导致系统防重请求失败,甚至导致后…...
数据结构之二叉搜索树
二叉搜索树 满足条件: 1.对于根节点:左子树中所有节点的值小于右子树中所有节点的值 2.任意节点的左右子树也是二叉搜索树,同样满足条件1 二叉搜索树的常用操作 我们将二叉搜索树封装为一个类 BinarySearchTree ,并声明一个成员变…...
《设计模式的艺术》笔记 - 抽象工厂模式
介绍 提供了一个创建一系列相关或相互依赖的对象的接口,而无须指定它们具体的类。抽象工厂模式又称为Kit模式,它是一种对象创建型模式。 在抽象工厂模式中,每个具体工厂都提供了多个工厂方法用于产生多种不同类型的产品,这些产品构…...
7.11、Kali Linux中文版虚拟机安装运行教程
目录 一、资源下载准备工作 二、安装教程 三、kali linux换源 四、apt-get update 报错 一、资源下载准备工作 linux 中文版镜像历史版本下载:http://old.kali.org/kali-images/ 大家可以自行选择版本下载,本人下载的是2021版本 二、安装教程 打开vmvare wokst…...
Go+快速开始详细指南
Go快速开始 Go编程语言是为工程、STEM教育和数据科学设计的。 对于工程:用儿童能掌握的最简单的语言工作。对于STEM教育:学习一门可以在未来工作中使用的工程语言。对于数据科学:用同一种语言与工程师交流。 安装方法 现在,我们建议您从源代码安装Go。 注意:需…...
SQL:一行中存在任一指标就显示出来
当想要统计的两个指标不在一张表中时,需要做关联。但很多情况下,也没有办法保证其中一张表的维度是全的,用left join或right join可能会导致数据丢失。所以借助full join处理。 1)如,将下面的数据处理成表格中的效果&…...
【代码随想录06】454. 四数相加 II 383. 赎金信 15. 三数之和 18. 四数之和
目录 454. 四数相加 II题目描述做题思路参考代码 383. 赎金信题目描述做题思路参考代码 15. 三数之和题目描述参考代码 18. 四数之和题目描述参考代码 454. 四数相加 II 题目描述 给你四个整数数组 nums1、nums2、nums3 和 nums4 ,数组长度都是 n ,请你…...
NodeJs 第十五章 session
Session代表服务器和客户端一次会话的过程。 在计算机科学领域来说,尤其是在网络领域,会话(session)是一种持久网络协议,在用户(或用户代理)端和服务器端之间创建关联,从而起到交换数据包的作用机制,session在网络协议…...
JRTP实时音视频传输(1)-必做的环境搭建与demo测试
1.需求 1)支持协议自动切换。在网络优的情况下使用TCP、网络差的情况下使用UDP,满足实时音视频传输需求, 2)支持RTCP ,流量控制,阻塞控制等。需要能支持RTCP,这样便能在这个基础上,…...
腿部臀部训练
坐式蹬腿器 100kg,是器械的极限了,也差不多是我的极限,深蹲是40kg,应该还可以加点,大腿外扩器55kg,没有尝试能不能做更重的,羡慕健身房里面的好身材的同学,自己得好好练 1.21健身房关…...
windows系统下docker软件中使用ubuntu发行版本的linux系统
1.软件下载 官网下载地址 下载安装之后,再去微软商店下载wsl软件,可以直接用,或者也可以使用命令行拉取(下面会讲) 2.在docker里面创建容器的两种方法 2.1.命令行创建 前言:输入 winr 打开命令行进行下面…...
vue实现小球掉落
首先,将小球儿动画代码封装成组件,创建个文件,例如qiu.js let createBall (left, top,box) > {// 点击事件 const {clientX,clienty} ev createBall(clientX,clienty)const ball document.createElement(div);ball.style.position a…...
k8s的存储卷、数据卷---动态PV创建
当发布PVC之后可以生成PV,还可以在动态服务器上直接生成挂载目录。PVC直接绑定和使用PV。 动态PV需要两个组件 存储卷插件:Provisioner(存储分配器)根据定义的属性创建PV StorageClass:定义属性 存储卷插件 存储卷插件:k8s本…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
