CSS学习(3)-浮动和定位

一、浮动

1. 元素浮动后的特点

  1. 脱离文档流。
  2. 不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),而且可以设置宽
    高。
  3. 不会独占一行,可以与其他元素共用一行。
  4. 不会 margin 合并,也不会 margin 塌陷,能够完美的设置四个方向的 margin 和 padding 。
  5. 不会像行内块一样被当做文本处理(没有行内块的空白问题)。

2. 浮动案例

盒子1右浮动,效果如下
在这里插入图片描述
盒子1左浮动,效果如下
在这里插入图片描述
所有盒子都浮动,效果如下
在这里插入图片描述

所有盒子浮动后,盒子3落下来,效果如下
在这里插入图片描述

3. 解决浮动产生的影响

3.1 元素浮动后会有哪些影响

对兄弟元素的影响: 后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟无影响。
对父元素的影响: 不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。

3.2 解决浮动产生的影响(清除浮动)

解决方案:

  1. 方案一: 给父元素指定高度。
  2. 方案二: 给父元素也设置浮动,带来其他影响。
  3. 方案三: 给父元素设置 overflow:hidden 。
  4. 方案四: 在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置 clear:both 。
  5. 方案五: 给浮动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同。===> 推荐使用。
.parent::after {content: "";display: block;clear:both;
}

布局中的一个原则:设置浮动的时候,兄弟元素要么全都浮动,要么全都不浮动。

3.3 浮动相关属性

在这里插入图片描述

二、定位

1. 相对定位

如何设置相对定位?

  • 给元素设置 position:relative 即可实现相对定位。
  • 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

相对定位的参考点在哪里?

  • 相对自己原来的位置。

相对定位的特点:

  1. 不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
  2. 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
    默认规则是:
    • 定位的元素会盖在普通元素之上。
    • 都发生定位的两个元素,后写的元素会盖在先写的元素之上。
  3. left 不能和 right 一起设置, top 和 bottom 不能一起设置。
  4. 相对定位的元素,也能继续浮动,但不推荐这样做。
  5. 相对行为的元素,也能通过 margin 调整位置,但不推荐这样做。

注意:绝大多数情况下,相对定位,会与绝对定位配合使用。

2. 绝对定位

2.1 如何设置绝对定位?

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

2.2 绝对定位的参考点在哪里?

参考它的包含块。

什么是包含块?

  1. 对于没有脱离文档流的元素:包含块就是父元素;
  2. 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都 没定位,那包含块就是整个页面)。
2.3 绝对定位元素的特点
  1. 脱离文档流,会对后面的兄弟元素、父元素有影响。
  2. left 不能和 right 一起设置, top 和 bottom 不能一起设置。
  3. 绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
  4. 绝对定位的元素,也能通过 margin 调整位置,但不推荐这样做。
  5. 无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。

何为定位元素? —— 默认宽、高都被内容所撑开,且能自由设置宽高。

3. 固定定位

3.1 如何设置为固定定位?

给元素设置 position: fixed 即可实现固定定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

3.2 固定定位的参考点在哪里?

参考它的视口

什么是视口?—— 对于 PC 浏览器来说,视口就是我们看网页的那扇“窗户”。

3.3 固定定位元素的特点
  1. 脱离文档流,会对后面的兄弟元素、父元素有影响。
  2. left 不能和 right 一起设置, top 和 bottom 不能一起设置。
  3. 固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
  4. 固定定位的元素,也能通过 margin 调整位置,但不推荐这样做。
  5. 无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。

4. 粘性定位

4.1 如何设置为粘性定位?

给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置,不过最常用的是 top 值。

4.2 粘性定位的参考点在哪里?

离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。

4.3 粘性定位元素的特点
  1. 不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
  2. 最常用的值是 top 值。
  3. 粘性定位和浮动可以同时设置,但不推荐这样做。
  4. 粘性定位的元素,也能通过 margin 调整位置,但不推荐这样做。

粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。

5. 定位层级

  1. 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
  2. 如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上。
  3. 可以通过 css 属性 z-index 调整元素的显示层级。
  4. z-index 的属性值是数字,没有单位,值越大显示层级越高。
  5. 只有定位的元素设置 z-index 才有效。
  6. 如果 z-index 值大的元素,依然没有覆盖掉 z-index 值小的元素,那么请检查其包含块的层级。

6. 定位的特殊应用

注意:

  1. 发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设
    置宽高。
  2. 发生相对定位后,元素依然是之前的显示模式。
  3. 以下所说的特殊应用,只针对 绝对定位 和 固定定位 的元素,不包括相对定位的元素。

让定位元素的宽充满包含块

  1. 块宽想与包含块一致,可以给定位元素同时设置 left 和 right 为 0 。
  2. 高度想与包含块一致, top 和 bottom 设置为 0 。

让定位元素在包含块中居中

方案一:

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案二:

left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意:该定位的元素必须设置宽高!!!

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

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

相关文章

护眼大路灯好不好用?中国路灯排行榜

护眼大路灯好不好用?关于这个问题一直有争议,一部分人觉得大路灯不好用,而且会增加支出,绝大多数人则认为大路灯特别好用,之所以会有不同的看法,小编觉得,还是大家使用的大路灯不同,…

[C语言]——函数递归

目录 一.什么是递归 1.递归的思想: 二.递归的限制条件 三.递归举例 1.举例1:求n的阶乘 1.1分析和代码实现 1.2画图推演 2.举例2:顺序打印⼀个整数的每⼀位 2.1分析和代码实现 2.2画图推演 四.递归与迭代 1.举例3:求第…

分页多线程处理大批量数据

1.业务场景 因为需要从一个返利明细表中获取大量的数据,生成返利报告,耗时相对较久,作为后台任务执行。但是后台任务如果不用多线程处理,也会要很长时间才能处理完。 另外考虑到数据量大,不能一次查询所有数据在内存…

ROS建模:从零手写机械臂的URDF模型

上一篇博客为【ROS建模:一起从零手写URDF模型】: https://blog.csdn.net/qq_54900679/article/details/135726348?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22135726348%22%2C%22source%22%3A%22qq_5…

异常的学习

异常就是代表程序出现的问题 父类:Exception 编译时异常:没有继承RuntimeException的异常,直接继承于Exception。编译阶段就会错误提示。 运行时异常:RuntimeException本身和子类。编译阶段没有错误提示,运行时出现…

EMCC 13.5 完整安装详细版

参考文档: Cloud Control Basic Installation Guide 13.5Overview of the Enterprise Manager Proactive Patch Program (Doc ID 822485.1)Enterprise Manager Cloud Control Management Agent 13.5 Release Update (RU) 19 Bug List (Doc ID 2996590.1)13.5: How …

记录对NSIS的一些微调 实现Electron安装包美化

利洽科技-nsNiuniuSkinUI - NSIS 实现了electron 的安装包美化,免费,便捷。 下面我整理了一些关于它的微调,使其安装卸载更加简单快捷。 1. 默认展示安装路径部分 (1)将moreconfiginfo标签visible 设置为 true&#…

GEE遥感云大数据林业应用典型案例及GPT模型应用

近年来遥感技术得到了突飞猛进的发展,航天、航空、临近空间等多遥感平台不断增加,数据的空间、时间、光谱分辨率不断提高,数据量猛增,遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…

进击的PostgreSQL

目录 前言 一、什么是PostgreSQL 1.PostgreSQL的定义 2.PostgreSQL功能和特性 2.1数据类型 2.2数据完整性 2.3并发性、性能 2.4可靠性、灾难恢复 2.5安全 2.6扩展 2.7国际化、文本搜索 二、部署PostgreSQL 1.下载与安装 2.配置数据库 3.配置远程访问 4.修改配置…

MySQL的日志:undo log、redo log、binlog有什么作用

目录 从一个update语句说起 undo log 为什么需要undo log undo log 版本链 undo log 是如何持久化到磁盘? redo log 为什么需要redo log redo的组成 redo Log的刷盘策略 redo Log循环写 crash-safe能力 binlog 为什么需要 binlog ? binlog与redo lo…

cmake 报错: could not open ‘kernel32.lib‘: no such file or directory

首次用hello world想配置cmake。powershell下执行cmake .. -G "MinGW Makefiles"报的这个错。 因为查到这个库是windows下的,于是想着换成Unix试下。 执行:cmake .. -G "Unix Makefiles" 成功 cmake 版本: cmake ver…

视频可回溯系统技术方案vue3+ts+tegg+mysql+redis+oss

highlight: a11y-dark theme: yu 一、 项目背景 保险、基金、银行等众多行业在做技术平台时都会需要一种能够准确了解用户操作行为的方式方法。诸如通过埋点、平台监控、视频可回溯等,通过技术手段,保存用户操作轨迹,以此规范安全销售、平台健康检查、出现纠纷时可追溯、问…

vue3使用jsx渲染以及注意点

安装对应的babel npm install vue-plugin-jsx -Dbabel配置: 在文件.babelrc 或者 babel.config.js中添加 {"plugins": ["vue/babel-plugin-jsx"] }写法: // 在App.tsx文件中编写 import { definedComponent, reactive } from "vue"…

设计模式 门面模式

01.先看写信的过程接口,定义了写信的四个步骤: public interface LetterProcess {//首先要写信的内容public void writeContext(String context); //其次写信封public void fillEnvelope(String address); //把信放到信封里public void letterInotoEnve…

java算法第23天 | ● 669. 修剪二叉搜索树 ● 108.将有序数组转换为二叉搜索树 ● 538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 思路: 这道题和删除节点异曲同工。不过要注意避坑:当遍历到不在范围内的节点时,不要直接返回null或直接返回其左或右孩子,而是继续对其左或右孩子做递归。 /*** Definition for a binary tree node.* public…

搭建EMQX MQTT服务器(超详细)

MQTT(Message Queuing Telemetry Transport)服务器是一种实现 MQTT 协议的服务器软件。MQTT 是一种轻量级的、发布/订阅模式的消息传输协议,通常用于物联网(IoT)应用中的设备通信。MQTT 服务器负责接收来自客户端的消息…

虚拟化技术在企业中的价值

在当前快速演变的商业环境中,企业面临的市场竞争压力正不断加剧。为了在这场竞争中保持自身的优势,公司急需寻找那些能够提升效率、削减成本以及加快创新步伐的解决方案。在这样的背景下,虚拟化技术作为一种强有力的工具,正助力众…

【SpringCloud】使用Seata实现分布式事务

目录 一、Seata 框架的需求背景二、Seata 事务模式与架构2.1 Seata 组成2.2 Seata 事务模式 三、Seata 实战演示3.1 部署 Seata Server3.1.1 下载 Seata Server3.1.2 更改 Seata Server 配置3.1.3 创建 Seata Server 所需的数据库、数据库表3.1.4 启动 Seata Server 3.2 Seata …

php作为服务器端语言,处理网页没有问题,但是gui就差了点。先看一下主流的gui框架有哪些

其他php桌面应用程序 1 PHP 程序打包为桌面应用-PHPDesktop 的 Linux 版本介绍 2 nativephp 3 借助 js 还可以用electron 还是tauri 除了wxWidgets和Qt,还有许多其他的GUI框架可供选择,每个框架都有其独特的优势和缺点。以下是一些常见的GUI框架及其特…

C++ 变量类型

C 变量类型 变量其实只不过是程序可操作的存储区的名称。C 中每个变量都有指定的类型,类型决定了变量存储的大小和布局,该范围内的值都可以存储在内存中,运算符可应用于变量上。 变量的名称可以由字母、数字和下划线字符组成。它必须以字母…