HTML5浮动
1.标准文档流组成
块级元素(block)
内联元素(inline)
2.display属性
作用:指定HTML标签的显示方式
常用属性
| 值 | 说明 |
| block | 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符 |
| inline | 内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符 |
| inline-block | 行内块元素,元素既具有内联元素的特性,也具有块元素的特性 |
| none | 设置元素不会被显示 |
3.display使用技巧
1、块级元素与行级元素的转变(block,inline)
2、控制块元素排成一行(inline-block)
3、控制元素的隐藏(none)
4.浮动属性
| 属性值 | 说明 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值。元素不浮动,并会显示在其文本中出现的位置 |
5.clear属性
| 值 | 说明 |
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
6.解决父级边框塌陷
1、clear属性可以清除浮动对其他元素造成的影响,可是依然解决不了父级边框塌陷问题,怎么办?
浮动元素后面加空div
设置父元素的高度
父级添加overflow属性
父级添加伪类after
2、浮动元素后加空div
3、设置父元素的高度
4、父级添加 overflow属性
overflow属性:溢出处理
| 属性值 | 说明 |
| visible | 默认值。内容不会被修剪,会呈现在盒子之外 |
| hidden | 内容会被修剪,并且其余内容是不可见的 |
| scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
5、父类添加伪类after
7.清除浮动,防止父级边框塌陷的四种方法
浮动元素后面加空div
简单,空div会造成HTML代码冗余
设置父元素的高度
简单,元素固定高会降低扩展性
父级添加overflow属性
简单,下拉列表框的场景不能用
父级添加伪类after
写法比上面稍微复杂一点,但是没有副作用,推荐使用
8.display:inline-block与float
display:inline-block
可以让元素排在一行,并且支持宽度和高度,代码实现起来方便
位置方向不可控制,会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度,可以决定排列方向
float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式
相关文章:
HTML5浮动
1.标准文档流组成 块级元素(block) 内联元素(inline) 2.display属性 作用:指定HTML标签的显示方式 常用属性 值 说明 block 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行…...
Unity 向量计算、欧拉角与四元数转换、输出文本、告警、错误、修改时间、定时器、路径、
using System.Collections; using System.Collections.Generic; using UnityEngine;public class c2 : MonoBehaviour {// 定时器float t1 0;void Start(){// 向量Vector3 v1 new Vector3(0, 0, 2);Vector3 v2 new Vector3(0, 0, 3);// 计算两个向量的夹角Debug.Log(Vector3…...
前端实现浏览器打印
浏览器的print方法直接调用会打印当前页面的所有元素,使用iframe可以实现局部打印所需要的模块。 组件printView,将传入的信息放入iframe中,调用浏览器的打印功能 <template><div class"print"><iframeid"if…...
iOS卡顿原因与优化
iOS卡顿原因与优化 1. 卡顿简介 卡顿: 指用户在使用过程中出现了一段时间的阻塞,使得用户在这一段时间内无法进行操作,屏幕上的内容也没有任何的变化。 卡顿作为App的重要性能指标,不仅影响着用户体验,更关系到用户留…...
关于synchronized介绍
synchronized的特性 1. 乐观锁/悲观锁自适应,开始时是乐观锁,如果锁冲突频繁,就转换为悲观锁 2.轻量级/重量级锁自适应 开始是轻量级锁实现,如果锁被持有的时间较长,就转换成重量级锁 3.自旋/挂起等待锁自适应 4.不是读写锁 5.非公平锁 6,可重入锁 synchronized的使用 1&#…...
NCDA设计大赛获奖作品剖析:UI设计如何脱颖而出?
第十二届大赛简介 - 未来设计师全国高校数字艺术设计大赛(NCDA)开始啦!视觉传达设计命题之一: ui 设计,你想知道的都在这里。为了让大家更好的参加这次比赛,本文特别为大家整理了以往NCDA大赛 UI 设计的优秀获奖作品&a…...
软考中级 软件设计师备考经验
考试介绍 软考中级的软件设计师需要考两个部分,选择题和大题,每科满分75,需要在同一次考试中两科同时大于等于45分才算通过。考试的内容包括计算机组成原理、数据结构、数据库、专业英语、信息安全、计算机网络等,范围比较广但考…...
Python猜数字小游戏
下面这段代码是一个简单的数字猜测游戏,其中计算机已经提前计算出了414 // 23的结果并存储在变量num中。然后,程序会提示用户来猜测这个结果。 以下是代码的主要步骤和功能: 初始化: num 414 // 23:计算414除以23的整…...
SQL面试题(2)
第一题 创建trade_orders表: create table `trade_orders`( `trade_id` varchar(255) NULL DEFAULT NULL, `uers_id` varchar(255), `trade_fee` int(20), `product_id` varchar(255), `time` varchar(255) )ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_…...
python常用pandas函数nlargest 和 nsmallest及其手动实现
pandas是Python数据分析的重要工具之一,提供了大量便捷的数据操作方法。nlargest和nsmallest是pandas中两个非常实用的函数,它们可以帮助我们快速找出Series或DataFrame中最大或最小的n个值。 ### pandas中的nlargest和nsmallest函数 - nlargest(n, colu…...
第六课:NIO简介
一、传统BIO的缺点 BIO属于同步阻塞行IO,在服务器的实现模型为,每一个连接都要对应一个线程。当客户端有连接请求的时候,服务器端需要启动一个新的线程与之对应处理,这个模型有很多缺陷。当客户端不做出进一步IO请求的时候,服务器…...
在vue2中使用饼状图
1.引入vue2和echarts <script src"https://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js"></script> <script src"https://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js"></script> 2.1 补充基本的body内容 <div id…...
面经(五)南京 软通动力 一面
注:已经有了接近一年的工作经验 总体评价 不完全是技术面,面试经过还行,但可能是期望岗位和对方需求不太一致,感觉不太好过 面试经过 HR找你,发简历入库,然后商量面试时间,发腾讯会议链接腾…...
线段树模型及例题整理
线段树的应用范围非常广,可以处理很多与区间有关的题目。 将区间抽象成一个节点,在这个节点中储存这个区间的一些值,那么如果看成节点的话,这就很像一棵满二叉树,所以我们可以用一维数组来储存节点。那么就要考虑父子节…...
揭秘Java性能调优的层次 | 综合多方向提升应用程序性能与系统高可用的关键(架构层次规划)
揭秘性能调优的层次 | 综合多方向提升应用程序性能与系统的高可用 前言介绍调优层次调优 — 设计案例说明 - 操作轮询控制事件驱动 调优 — 代码案例说明 - ArrayList和LinkedList性能对比案例说明 - 文件读写实现方式的性能对比 调优 — JVMJVM架构分布JVM调优方向**JVM垃圾回…...
事件循环解析
浏览器的进程模型 何为进程? 程序运行需要有它自己专属的内存空间,可以把这块内存空间简单的理解为进程 每个应用至少有一个进程,进程之间相互独立,即使要通信,也需要双方同意。 何为线程? 有了进程后&…...
物联网技术助力智慧城市安全建设:构建全方位、智能化的安全防护体系
一、引言 随着城市化进程的加速和信息技术的迅猛发展,智慧城市已成为现代城市发展的重要方向。在智慧城市建设中,安全是不可或缺的一环。物联网技术的快速发展为智慧城市安全建设提供了有力支持,通过构建全方位、智能化的安全防护体系&#…...
mac打不开xxx软件, 因为apple 无法检查其是否包含恶意
1. 安全性与隐私下面的允许来源列表,有些版本中的‘任何来源’选项被隐藏了,有些从浏览器下载的软件需要勾选这个选项才能安装 打开‘任何来源’选项 sudo spctl --master-disable 关闭‘任何来源’选项 sudo spctl --master-enable...
《深入浅出红黑树:一起动手实现自平衡的二叉搜索树》
一、分析 1. 红黑树的性质 红黑树是一种自平衡的二叉搜索树,它具有以下五个性质: (1)节点是红色或黑色。 (2)根节点是黑色。 (3)所有叶子节点(NIL节点)是…...
C++——模版
前言:哈喽小伙伴们好久不见,这是2024年的第一篇博文,我们将继续C的学习,今天这篇文章,我们来习一下——模版。 目录 一.什么是模版 二.模版分类 1.函数模版 2.类模板 总结 一.什么是模版 说起模版,我们…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西,但是如果把三者放在一起,它们之间到底什么关系?又有什么联系呢?我不是很明白!!! 就比如说: 沙箱&#…...
