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.总结

在这里插入图片描述

六.网页布局总结

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

『Linux从入门到精通』第 ㉒ 期 - 动静态库

文章目录 💐专栏导读💐文章导读🐧什么是库?🐧为什么要有库?🐧写一个自己的库🐦方法一🐦方法二 静态库🐦标准化🐦方法三 动态库🐦配置动…

Python根据3个点确定两个向量之间的夹角-180度到180方向进行矫正

import cv2 import numpy as np # 读取图片 image cv2.imread(rD:\dmp\cat.jpg) height, width image.shape[:2] # 定义三个定位点(这里假设是图片上的坐标),分别表示原点,向量1终点,向量2终点,下…

动画原理:表面形变算法的思考与总结

前言: 之前我的文章 Mesh形变算法_mesh算法-CSDN博客就有大致的讨论过,介绍的也比较粗略!现在主要是想在Triangulated Surface Mesh Deformation方向上更深入的讨论一下!结合今年我对这一块的学习谈谈我的理解~ 下面要介绍大致几…

学校机房Dev c++解决中文乱码问题

工具->编译选项->勾选 编译时加入以下命令 -fexec-charsetGBK -finput-charsetUTF-8 显示中文:工具->编辑器选项->去掉第一个的勾勾。

WebFlux的探索与实战 - r2dbc的分页查询

自从上次立下这系列的FLAG之后就再也不想碰了。今天难得早起出门面试,回家之后突发奇想打算再写点儿什么敷衍一下,于是便有了这篇文章。 前言 虽然响应式API更加适合流式列表的查询,但是分页这东西可是很常见的。 也没什么前言可说&#xf…

opencv中的rgb转gray的计算方法

转换原理 在opencv中,可以使用cv2.cvtColor函数将rgb图像转换为gray图像。示例代码如下, import cv2img_path "image.jpg" image cv2.imread(img_path) gray_image cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) mean gray_image.mean() pri…

在实训云平台上配置云主机

文章目录 零、学习目标一、实训云升级二、实训云登录(一)登录实训云(二)切换界面语言(三)规划云主机实例 三、创建网络三、创建路由器2024-2-29更新到此四、添加接口五、创建端口六、添加安全组规则七、创建…

公网IP怎么获取?

公网IP是网络中设备的唯一标识符,用于在Internet上进行通信和定位。对于普通用户来说,了解如何获取自己的公网IP是很有必要的,本文将介绍几种获取公网IP的方法。 方法一:通过路由器查询 大多数家庭和办公室使用的路由器都会有一个…

生成式AI设计模式:综合指南

原文地址:Generative AI Design Patterns: A Comprehensive Guide 使用大型语言模型 (LLM) 的参考架构模式和心理模型 2024 年 2 月 14 日 对人工智能模式的需求 我们在构建新事物时,都会依赖一些经过验证的方法、途径和模式。对于软件工程师来说&am…

Maven【3】( 依赖的范围,传递性和依赖的排除)(命令行操作)

文章目录 【1】依赖的范围结论验证①验证 compile 范围对 main 目录有效②验证test范围对main目录无效③验证test和provided范围不参与服务器部署 【2】依赖的传递性①compile 范围:可以传递②test 或 provided 范围:不能传递 【3】依赖的排除 【1】依赖…

apollo cyber RT初学

一 初识 ROS无法调度协调,且通信开销大,耗资源。百度自动驾驶团队开发了Cyber RT。 CyberRT从下到上依次为: 基础库:高性能,无锁队列; 通信层:Publish/Subscribe机制,Service/Cli…

h5移动端开发,android常见面试题及答案

1、Android系统的架构 Android系统架构之应用程序 Android会同一系列核心应用程序包一起发布,该应用程序包包括email客户端,SMS短消息程序,日历,地图,浏览器,联系人管理程序等。所有的应用程序都是使用JAV…

【进阶C语言】内存函数(详解)

前言 上一期讲的函数都是和字符串相关的,但是我们在操作数据的时候,不仅仅是操作字符串的数据,还得需要内存函数的应用 内存函数的应用 1. memcpy1.1 memcpy的介绍1.2 memcpy的使用1.3 模拟实现memcpy库函数1.4 我想在1,2后面打印…

day05_用户管理minIO角色分配(页面制作,查询用户,添加用户,修改用户,删除用户,用户头像,查询所有角色,保存角色数据)

文章目录 1 用户管理1.1 页面制作1.2 查询用户1.2.1 需求说明1.2.2 后端接口需求分析SysUserSysUserDtoSysUserControllerSysUserServiceSysUserMapperSysUserMapper.xml 1.2.3 前端对接实现思路sysUser.jssysRole.vue 1.3 添加用户1.3.1 需求说明1.3.2 页面制作1.3.3 后端接口…

C语言题目:指针

1. 下面代码的结果是&#xff1a; #include <stdio.h> int i; int main() {i--;if (i > sizeof(i)){printf(">\n");}else{printf("<\n");}return 0; }答案&#xff1a;> 解析&#xff1a; i作为全局变量且在未赋值的情况下初始值为1&…

每日一练:LeeCode-701、二叉搜索树中的插入操作【二叉搜索树+DFS+全搜】

本文是力扣 每日一练&#xff1a;LeeCode-701、二叉搜索树中的插入操作【二叉搜索树DFS全搜】学习与理解过程&#xff0c;本文仅做学习之用&#xff0c;对本题感兴趣的小伙伴可以出门左拐LeeCode。 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和要插入树中的值 …

看视频,学习使用MindOpt APL 建模语言编码数学规划问题,练习语法,实战拿奖品

活动介绍 活动名称&#xff1a;看视频&#xff0c;补充代码&#xff0c;拿精美礼品 活动规则&#xff1a; 浏览视频学习MAPL&#xff0c;完善“例题”。需要完善的内容&#xff1a;补充约束条件、读取csv表格数据&#xff0c;将决策变量的取值输出为csv表格&#xff0c;验证一…

pyuic生成py文件到指定文件夹

pyuic生成py文件到指定文件夹 关于如何在pycharm配置外部工具的方法这里不做赘述&#xff0c;本文主要说明&#xff0c;如何利用pyuic将ui文件生成到指定的项目目录中。 前提条件&#xff1a;已配置的pyuic工具可以正常使用生成文件到目录中。 一、打开外部工具配置页面 打开…

Java注解之@PathVariable,一文掌握@PathVariable注解知识(2)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

Office/WPS 好用的PPT插件-智能选择布局

软件介绍 PPT大珩助手是一款全新设计的Office PPT插件&#xff0c;它是一款功能强大且实用的PPT辅助工具&#xff0c;能够轻松帮助您修改、优化和管理幻灯片。凭借丰富的功能和用户友好的界面&#xff0c;PPT大珩助手能够助力您打造出精美而专业的演示文稿。我们致力于为用户提…