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://xiahunao.cn/news/2821804.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

内网搭建mysql8.0并搭建主从复制详细教程!!!

一、安装mysql 1.1 mysql下载链接: https://downloads.mysql.com/archives/community/ 1.2 解压包并创建相应的数据目录 tar -xvf mysql-8.2.0-linux-glibc2.28-x86_64.tar.xz -C /usr/local cd /usr/local/ mv mysql-8.2.0-linux-glibc2.28-x86_64/ mysql mkdir…

模型选择与评估

🚩 机器学习的一般流程包括:数据集的准备与预处理、搭建模型、模型训练、模型评估与应用。 在现实任务中,我们往往有多种学习算法可供选择,甚至对同一个学习算法,当使用不同的参数配置时,也会产生不同的模型…

IPD MM流程之业务策略工具:安索夫矩阵

IPD市场管理流程,华为内部称为“MM流程”(Market Management,MM)。华为市场管理是通过对市场和细分市场的分析,制定细分市场的策略,形成商业计划,把商业计划落实在日常工作当中。MM流程其中一个…

bvh文件,人体骨骼重定向

关于两个bvh文件,人体骨骼重定向,小白记录 1、打开 Motionbuilder ,选择 打开特定路径下的bvh文件。 绑定骨骼(在绑定骨骼过程中,如果骨骼角度,大小之类的不方便,可以shift键加鼠标拖拽界面&…

Fabric V2.5 通用溯源系统——应用后端GIN框架部分设计

本节对Fabric V2.5 通用溯源系统的应用后端部分做一个简单的介绍,包括目录结构、文件作用、用户注册登录与农产品信息上链过程介绍。此节内容免费发布在TrueTechLabs Fabric学习交流QQ群。 购买专栏前请认真阅读:《Fabric项目学习笔记》专栏介绍 TrueTechLabs Fabric学习交流…

仿牛客网项目---显示评论和添加评论功能的实现

这篇文章,我来介绍一下我的项目中的另外一个功能:显示评论和添加评论。 其实这两个功能都不怎么重要,我感觉最重要的应该是用户注册登录功能,这个也了解一下,知道这么一回事儿就好。 首先设计DAO层。 Mapper public …

【一】【算法分析与设计】基础测试

排列式 题目描述 7254是一个不寻常的数,因为它可以表示为7254 39 x 186,这个式子中1~9每个数字正好出现一次 输出所有这样的不同的式子(乘数交换被认为是相同的式子) 结果小的先输出;结果相同的,较小的乘…

Hgame题解(第二星期)

Hgame题解(第二星期) Web Select More Courses 打开靶机发现是一个登陆页面,根据题目提示下载弱密码字典,通过BP爆破获得用户密码为qwert123 登陆后进入下一个页面,由于学分已满无法选课,所以需要先进行…

AI也来打掼蛋,难道人工智能也能当领导?

引言:探索AI在复杂卡牌游戏中的决策能力 在人工智能(AI)的研究领域中,游戏被视为现实世界的简化模型,常常是研究的首选平台。这些研究主要关注游戏代理的决策过程。例如,中国的传统卡牌游戏“掼蛋”&#…

MySql安全加固:无关或匿名帐号是否更改root用户避免空口令用户是否加密数据库密码

MySql安全加固:无关或匿名帐号&是否更改root用户&避免空口令用户 1.1 检查是否删除无关或匿名帐号1.2 检查是否更改root用户1.3 避免空口令用户1.4 检查是否加密数据库密码 💖The Begin💖点点关注,收藏不迷路&#x1f496…

buuctf_misc_荷兰宽带数据泄露+被偷走的文件

荷兰宽带数据泄露 题目: 没啥,工具给大家放这了,这个(相对来说)比较安全 https://routerpassview.en.lo4d.com/windows 打开后,.bin文件直接托进去 只是我想不到的是,flag这算是username&…

Java多线程算法总结

1. 标题三个线程同时运行,依次打印ABC,一共打印10次 算法代码如下: public class ThreadTest {private Object oa new Object();private Object ob new Object();private Object oc new Object();private static final String TAG &quo…

探索数据结构:解锁计算世界的密码

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯,先赞后看哦~🎈🎈 所属专栏:数据结构与算法 贝蒂的主页:Betty‘s blog 前言 随着应用程序变得越来越复杂和数据越来越丰富,几百万、…

SpringBoot项目连接Redis报错:Connection refused: no further information

今天在使用SpringBoot连接Redis时发生了报错 明明Jedis能够连接成功为什么StringRedisTemplate就不行? 然后在网上找了一下说是关闭防火墙或者修改配置文件但是都不管用 最后发现是Redis在SpringBoot3之后yml的配置方式发生了改变 相较于之前多了一个前缀, 由于我刚开始没有…

配置artifactory的反向代理和域名访问

一、概述 在许多情况下,组织会通过反向代理来提供对 Artifactory 的访问。在某些情况下,例如使用 Artifactory 作为 Docker 注册表,这种设置甚至是强制性的。为了简化反向代理的配置,Artifactory 提供了生成反向代理的功能&#x…

机器视觉中的图像传感器:CCD与CMOS的比较与应用

在机器视觉领域,图像传感器的作用至关重要,它们负责将捕获的光信号转换成电信号,进而被计算机系统分析和处理。目前市场上主要有两种类型的图像传感器:电荷耦合器件(CCD)和互补金属氧化物半导体&#xff08…

计算机操作系统(慕课版)第七章学习笔记

第七章 输入/输出系统 7.1 I/O系统的功能、模型和接口 I/O系统管理的主要对象 I/O设备和相应的设备控制器。 其最主要的任务 完成用户提出的I/O请求 提高I/O速率 提高设备的利用率 为更高层的进程方便地使用这些设备提供手段 7.1.1 I/O系统的基本功能 1、能够隐藏物理设备的细…

【C语言】linux内核xmit_one函数

一、中文注释 static int xmit_one(struct sk_buff *skb, struct net_device *dev,struct netdev_queue *txq, bool more) {unsigned int len;int rc;// 如果全局ptype列表或者设备特定的ptype列表不为空,则执行网络接口层网络层的NIT(Network Tap&…

模型练习史

文章目录 肌肉光头vikingtorso死侍蓝毒液卡通girlwalletdog headman anatomy总结 肌肉光头 viking torso 死侍 蓝毒液 卡通girl wallet dog head man anatomy 总结 zbrush 与 blender 结合使用, 善 !

3D城市模型可视化:开启智慧都市探索之旅

随着科技的飞速发展,我们对城市的认知已经不再局限于平面的地图和照片。今天,让我们领略一种全新的城市体验——3D城市模型可视化。这项技术将带领我们走进一个立体、生动的城市世界,感受前所未有的智慧都市魅力。 3D城市模型通过先进的计算机…