css5定位

css

  • 一.定位
    • 1.概念(定位=定位模式+边位移)
    • 2.静态位移static(不常用)
    • 3.相对定位relative(不脱标)(占位置)
    • 4.绝对定位absolute(脱标)(不占位置)
    • 5.固定定位fixed(脱标)(不占位置)(一个小算法)
    • 6.粘性定位sticky(不脱标)(占位置)
    • 7.总结
  • 二.子绝父相
  • 三.叠放次序(z-index)(定位的盒子才用)
  • 四.定位拓展
    • 1.绝对定位盒子居中
    • 2.定位的特殊性
    • 3.脱标的盒子不会触动外边距塌陷
    • 4.绝对(固定)定位会压住盒子
  • 五.元素的显示与隐藏
    • 1.display
    • 2.visibility
    • 3.overflow
    • 4.总结
  • 六.网页布局总结

一.定位

1.概念(定位=定位模式+边位移)

why
在这里插入图片描述
定位模式
在这里插入图片描述
边位移
在这里插入图片描述

2.静态位移static(不常用)

相当于标准流,无边位移
在这里插入图片描述

3.相对定位relative(不脱标)(占位置)

在这里插入图片描述

4.绝对定位absolute(脱标)(不占位置)

在这里插入图片描述

5.固定定位fixed(脱标)(不占位置)(一个小算法)

在这里插入图片描述
eg:
在这里插入图片描述
在这里插入图片描述

6.粘性定位sticky(不脱标)(占位置)

在这里插入图片描述

7.总结

在这里插入图片描述

二.子绝父相

在这里插入图片描述

三.叠放次序(z-index)(定位的盒子才用)

在这里插入图片描述

四.定位拓展

1.绝对定位盒子居中

eg:在这里插入图片描述

在这里插入图片描述

2.定位的特殊性

绝对定位和固定定位和浮动类似
不需要display即可有行内块属性

在这里插入图片描述

3.脱标的盒子不会触动外边距塌陷

浮动的盒子也不会
只有标准流会

在这里插入图片描述

4.绝对(固定)定位会压住盒子

but
浮动不会
在这里插入图片描述

五.元素的显示与隐藏

1.display

在这里插入图片描述

2.visibility

在这里插入图片描述

3.overflow

在这里插入图片描述

4.总结

在这里插入图片描述

六.网页布局总结

在这里插入图片描述

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

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

相关文章

VScode 单步断点调试Nodejs方法总结

目录 方法一 方法二 方法三 方法一 使用vscode开发nodejs程序,能够启动单步调试模式,在指定代码处添加断点,像chrome、firefox浏览器上一样进行JavaScript的调试。 新建一个nodejs的工程,编写代码后,配置代码调试的步骤: 1、切换到代码调试界面 2、界面提示,新建一…

mybatis-plus中service层的CRUD使用示例

mybatis-plus service层的CRUD使用示例 MyBatis-Plus 是 MyBatis 的增强工具,在 MyBatis 的基础上提供了更便捷的 CRUD 操作、分页查询、代码生成等功能。在 Service 层使用 MyBatis-Plus 进行 CRUD 操作,通常需要创建一个 Service 类来调用 MyBatis-Pl…

基于springboot实现在线考试系统项目【项目源码+论文说明】

基于springboot实现在线考试系统演示 摘要 时代在变化,科技技术以无法预测的速度在达到新的高度,并且被应用于社会生活的各个领域,随着生活的加快,也使很多潜在的点逐渐突显出来,社会对于人才的要总是非常迫切的&…

VScode保存自动格式化

要在Visual Studio Code(VS Code)中关闭保存自动格式化功能,您可以按照以下步骤操作: 1.打开VS Code编辑器。 2.点击左上角的“文件”菜单,然后选择“首选项”。 3.在弹出的菜单中,选择“设置”选项。…

IDEA-DeBug理论与实践

文章目录 01_Debug简介和意义02_IDEA中的Debug步骤03_跳转到当前代码执行的行04_步过调试的使用05_步入调试的使用06_强制步入调试的使用07_步出调试的使用08_回退断点调试的使用09_运行到光标处10_计算表达式11_条件断点12_多线程调试 在软件开发中,IDEA&#xff0…

THINKPHP 跨域报错解决方案

报错:has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the requested resource. 环境:thinkphp6 nginx 今天和VUE配合调用接口的时候发现跨…

果园预售系统|基于Springboot的果园预售系统设计与实现(源码+数据库+文档)

果园预售系统目录 目录 基于Springboot的果园预售系统设计与实现 一、前言 二、系统功能设计 三、系统功能设计 1 、果园管理 2、水果管理 3、果树管理 4、公告管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获…

常见的4种Bug 出现原因和解决方案

某项目定期进行线上Bug分析大会,主要针对近期出现的Bug和事故进行分析其出现的原因。经过一段时间的数据分析和汇总,找到了在开发过程中,较为常见的Bug以及其出现的原因。 通过分析原因,进一步找到解决方案,从而有利于…

2024.02.29作业

1. TCP模型 server #include "test.h"#define SER_IP "192.168.191.128" #define SER_PORT 9999int main(int argc, char const *argv[]) {int sfd -1;sfd socket(AF_INET, SOCK_STREAM, 0);if (-1 sfd){perror("socket error");return -1;…

Java底层自学大纲_数据结构和算法篇

数据结构和算法专题_自学大纲所属类别学习主题建议课时(h) A 数据结构和算法001 数据结构和算法基础,时间复杂度Ot和空间复杂度Os2.5 A 数据结构和算法002 数学知识回顾-指数、对数、级数、模运算、复杂度2.5 A 数据结构和算法003 高数知识…

算法沉淀——动态规划之两个数组的 dp(上)(leetcode真题剖析)

算法沉淀——动态规划之两个数组的 dp 01.最长公共子序列02.不相交的线03.不同的子序列04.通配符匹配 01.最长公共子序列 题目链接:https://leetcode.cn/problems/longest-common-subsequence/ 给定两个字符串 text1 和 text2,返回这两个字符串的最长 …

0201sherlock(福尔摩斯)-通过名称寻找媒体账号(地址)-github-开源项目学习

文章目录 一 项目简介二 项目安装和演示1 安装2 演示 三 源码分析1 项目结构2 主程序源代码分析 四 添加自定义网址结语 一 项目简介 二 项目安装和演示 1 安装 # clone the repo $ git clone https://github.com/sherlock-project/sherlock.git# change the working direct…

前端访问线上的html 怎么给html 的js中传递 访问路径

1.需求 我想在项目中访问一个html 文件 这个html 文件中 跳转的又是另一个地址 。这个需求是为了让实现公众号H5 的重定向登录 主要是 一个oem 系统 他有多个公众号 但是每个公众号 都有对应不用的域名 2.动态域名 <!DOCTYPE html> <html lang"zh">&…

opencv--使用直方图找谷底进行确定分割阈值

直方图原理就不说了&#xff0c;大家自行百度 直方图可以帮助分析图像中的灰度变化&#xff0c;进而帮助确定最优二值化的灰度阈值&#xff08;threshold level&#xff09;。如果物体与背景的灰度值对比明显&#xff0c;此时灰度直方图就会包含双峰&#xff08;bimodal histo…

Python web框架fastapi数据库操作ORM(一)

文章目录 Fastapi ORM操作1、创建模型2、创建数据库连接配置文件3、启动项目4、根据模型类创建数据库表1. 初始化配置&#xff0c;只需要使用一次2. 初始化数据库&#xff0c;一般情况下只用一次3. 更新模型并进行迁移4. 重新执行迁移&#xff0c;写入数据库5. 回到上一个版本6…

Oracle 11g升级19c 后部分查询功能很慢

*Oracle 11g升级19c 后部分查询功能很慢 今天生产突然有个查询非常慢&#xff0c;日志显示执行了50秒左右&#xff0c;但是从日志中拿出SQL在PLSQL执行&#xff0c;发现用时不到1秒&#xff0c;查看SQL,怀疑是下面几种原因导致 1、使用函数不当 UNIT.UNIT_CODE LIKE CONCAT(‘…

状态码转文字!!!(表格数字转文字)

1、应用场景&#xff1a;在我们的数据库表中经常会有status这个字段&#xff0c;这个字段经常表示此类商品的状态&#xff0c;例如&#xff1a;0->删除&#xff0c;1->上架&#xff0c;0->下架&#xff0c;等等。 2、我们返回给前端数据时&#xff0c;如果在页面显示0…

python 线程、进程区别与事例

线程&#xff1a;简单来说&#xff0c;一个进程中包含多个线程&#xff0c;比如打开一个 QQ&#xff08;进程&#xff09;&#xff0c;然后你一边聊 QQ&#xff08;一个线程&#xff09;&#xff0c;一边用 QQ 传送文件&#xff08;一个线程&#xff09;&#xff0c;等等。在一…

Linux中如何执行脚本

要执行一个保存在文件中的脚本&#xff0c;可以按照以下步骤进行&#xff1a; 1. 创建脚本文件&#xff1a; 首先&#xff0c;使用文本编辑器&#xff08;如 ​vi​、​nano​等&#xff09;创建一个新的脚本文件&#xff0c;并将需要执行的命令写入到文件中。例如&#xff0…

【Unity】在Unity中导出WebGL并读取Excel数据的实现方法

在游戏开发中&#xff0c;数据的处理和导出是至关重要的环节之一。Unity作为一款强大的游戏开发引擎&#xff0c;提供了丰富的工具和功能来处理和导出数据&#xff0c;包括将游戏导出为WebGL应用&#xff0c;并读取外部数据文件&#xff0c;比如Excel表格。本文将介绍如何在Uni…