css样式元素的相对定位，绝对定位，固定定位等元素定位运用技巧详解

文章目录

  • 1.相对定位 relative
  • 2.绝对定位 absolute
  • 3.固定定位
  • 4.display 转换元素
  • 5.float浮动
  • 6.float产生内容塌陷问题
  • 7.overflow

CSS样式学习宝典，关注点赞加收藏，防止迷路哦

在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。

1.相对定位 relative

定位的种类，默认是static
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位:相对定位 relative</title><style>.gg{width:200px;height:200px;border:solid 1px red;}.c1{background:violet;}.c2{background:tan;position:relative;top:10px;left:100px;z-index:2;}.c3{background:blue;}.c4{background:green;}</style>
</head>
<body><!-- 相对定位: 参考点是他自己本身,相对于原始的位置进行定位，本身原始位置指的是盒子设置好后，默认在浏览器的位置;如果添加了定位:无论是添加(相对,绝对,固定)属性,添加之后会增加额外的其他属性:z-index 控制层叠关系: 值越大越在上层,值越小越在下层同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。 不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。 lefttoprightbottom z-indexz-index 控制层叠关系: 值越大越在上层,值越小越在下层，默认是0

在这里插入图片描述

        --><div class="c1 gg"></div><div class="c2 gg"></div><div class="c3 gg"></div><div class="c4 gg"></div></body>
</html>

2.绝对定位 absolute

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位:绝对定位 absolute</title><style>.gg{width:200px;height:200px;border:solid 1px red;}.big{width:1000px;height:1000px;border:solid 1px red;margin:100px 220px;}.c1{background:violet;/* 无效 */position: relative; }.c2{background:tan;position: absolute;top:0px;left:0px;/* bottom:0px;right:0px; *//* z-index:-1; */}.c3{background:blue;}.c4{background:green;}</style>
</head>
<body><!-- 绝对定位:参考点默认参考的是body 效果:脱离文档流,后面的内容自动补位使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位;(1)把想要的父级元素变成relative(2)把要定位的元素变成 absolute--><div class="big"><div class="c1 gg"></div><div class="c2 gg"></div><div class="c3 gg"></div><div class="c4 gg"></div></div></body>
</html>

父级没有relative，设置了absolute的元素会相对body进行定位
在这里插入图片描述
在这里插入图片描述

3.固定定位

fixed固定页面，滑动页面该位置不动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位:固定定位 fixed</title><style>/* *号代表通配选择符,代表所有标签,默认标签中含有默认的间距,要在一开始的时候全部去掉; */
默认标签离左边栏有间距

在这里插入图片描述

    *{margin:0px;padding:0px;}

加上* 所有通配符设置间距为0，离左边栏不再有间距
在这里插入图片描述

body
{height:2000px;}
.c1
{width:500px;height: 600px;border:solid 1px red;background-color: green;position: fixed;/* 相对于左上角定点进行定位 */left:50%;margin-left:-250px;top:50%;margin-top:-300px;
}

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

把多移动的移回来
在这里插入图片描述

然后才能居中
在这里插入图片描述

      过度属性/* <' transition-property '>： 检索或设置对象中的参与过渡的属性 <' transition-duration '>： 检索或设置对象过渡的持续时间 <' transition-timing-function '>： 检索或设置对象中过渡的动画类型 <' transition-delay '>： 检索或设置对象延迟过渡的时间  */img{position:fixed;bottom:20px;left:-100px; transition: all 1s ease 0.1s;           }img:hover{left:0px;background-color: red;}</style>
</head>
<body><img src="images/xiao.jpg"/><div class="c1">我没动</div><p>1111222333444</p></body>
</html>

4.display 转换元素

行内，块状，行内块状元素之间的转换
使用语法：
display : 要转换的元素类型（block inline inline-block）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>display 转换元素</title><style>div/* display:inline; 转换成行内元素 */{display:inline;border:solid 1px red;width:1000px;height:20px;}
将块状元素设置成行内元素后，设置的高和宽已失效

在这里插入图片描述

        span/* display:block; 转换成块状元素 */{display:block;width:100px;height:50px;border:solid 1px red;}
行内元素转换成块状元素后，可以设置高和宽，并且独占一行

在这里插入图片描述

        a/* display:inline-block; 转换成行内块状元素 */{display:inline-block;width:500px;height:30px;border:solid 1px red;}     
行内元素转换成行内块状元素，可以设置高和宽

在这里插入图片描述

        p/* display:none 隐藏元素 */{display:none;}
p元素隐藏了

在这里插入图片描述

    </style></head>
<body><!-- 元素的分类:块状元素 : block行内元素 : inline行内块状元素  : inline-block--><div>第一个div</div><div>第二个div</div><span>我是span1</span><span>我是span2</span><a href="#">我是链接1</a><a href="#">我是链接2</a><p>12345</p>
</body>
</html>

5.float浮动

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>float 浮动</title><style>.content{width:700px;clear:both;}.content .c1{background: red;width:100px;height:100px;float:left;}.content .c2{background: tan;width:100px;height:100px;float:left;}.content .c3{background:blue;width:100px;height:100px;float:left;}.content .c4{background:green;width:100px;height:100px;float:left;}div默认是从上到下，垂直排列，使用float之后，从左向右横向排列
是设置了float下面的元素脱离文档流，压在了设置float元素的下面

在这里插入图片描述

.content2
{width:700px;height:500px;border:solid 1px red;clear:both;}#a1
{float:left;width:100px;height:100px;border:solid 1px red;}
#a2
{display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;}

不加clear:both，a2设置的属性没显示出来
在这里插入图片描述
在这里插入图片描述

加了clear:both。显示正常
在这里插入图片描述

    </style>
</head>
<body><!-- # ###块状元素浮动:float:left  向左浮动  ,元素脱离原始文档流,后面的内容自动补齐;float:right 向右浮动  ,元素脱离原始文档流,后面的内容自动补齐;目的: 让块状元素在一排显示 clear:both; 清除两边的浮动  在不需要浮动的地方加--><div class="content"><div class="c1"></div><div class="c2"></div><div class="c3"></div><div class="c4"></div></div><!-- # ###行内元素浮动:如果对行内元素进行浮动:默认会把行内元素升级成行内块状元素,可以设置宽和高 消除浮动产生的影响:clear:both;--><div class="content2"><a href="#" id="a1">点击我跳转1</a><a href="#" id="a2">点击我跳转2</a></div>
</body>
</html>

6.float产生内容塌陷问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>float 会产生内容塌陷问题</title><style>.content{border:solid 1px red;}.gg{width:150px;height:150px;border:solid 1px red;float:left;}.c1{background: thistle;}.c2{background: yellowgreen;}.c3{background: blue;}.c4{background: green;}

大div里面几个小div浮动，导致大盒子没撑开
在这里插入图片描述
在这里插入图片描述

解决办法一：在html里面解决
在小div里面增加一个div 只设置style clear:both
在这里插入图片描述
在这里插入图片描述

.content2
{border:solid 1px red;}
.content2::after
{content:"";display:block;clear:both;
}

解决方法二：在CSS里面通过伪对象来解决
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    </style>
</head>
<body><!-- 解决方法一 --><div class="content"><div class="c1 gg"></div><div class="c2 gg"></div><div class="c3 gg"></div><div class="c4 gg"></div><div style="clear:both;"></div></div><!-- 解决方法二 --><div class="content2"><div class="c1 gg"></div><div class="c2 gg"></div><div class="c3 gg"></div><div class="c4 gg"></div></div>
</body>
</html>

7.overflow

对超出部分内容的处理
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.test {overflow: hidden;width: 200px;height: 100px;background: #eee;}</style></head><body><!-- overflow:hidden 对超出部分内容进行隐藏 --><div class="test"><p>苏打速度</p><p>苏打速度</p><p>苏打速度</p><p>苏打速度</p><p>苏打速度</p></div></body>
</html>

对于超过边界的内容，默认是visible 对超出边框的内容不做处理，显示出来。这样很不美观
在这里插入图片描述
在这里插入图片描述

对超出的内容可以设置隐藏，或者滚动条显示auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
在这里插入图片描述
在这里插入图片描述

hidden:隐藏溢出的内容
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Java进阶-测试方法

Java进阶-测试方法

来学习一下软件测试相关的方法&#xff0c;了解一下黑盒测试和白盒测试&#xff0c;以及后面要用到的JUnit单元测试。JUnit单元测试也属于白盒测试&#xff0c;这次内容较少且相对简单。 一、软件测试方法 1、黑盒测试 不需要写代码&#xff0c;给输入值&#xff0c;看程序…
阅读更多...
【Tomcat】The CATALINA_HOME environment variable is not defined correctly

【Tomcat】The CATALINA_HOME environment variable is not defined correctly

文章目录 一、问题二、解决办法三、优化 一、问题 运行绿色版Tomcat时&#xff0c;单击apache-tomcat-9.0.27\bin\startup.bat时窗口一闪而过。 检查JAVA_HOME环境变量&#xff0c;可以发现并没有问题。 为了检查错误&#xff0c;将startup.bat程序使用文本编辑器打开&#x…
阅读更多...
单片机独立按键控制LED状态

单片机独立按键控制LED状态

一、前言 这幅图是按键的抖动与时间的联系 按键抖动&#xff1a;对于机械开关&#xff0c;当机械鮑点断开、闭合时&#xff0c;由于机械触点的弹性作用&#xff0c;一个开关在闭合时不会马上稳定地接通&#xff0c;在断开时也不会一下子断开&#xff0c;所以在开关闭合及断开的…
阅读更多...
《JAVA与模式》之调停者模式

《JAVA与模式》之调停者模式

系列文章目录 文章目录 系列文章目录前言一、为什么需要调停者二、调停者模式的结构三、使用电脑来看电影 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通…
阅读更多...
【二分查找】【C++算法】378. 有序矩阵中第 K 小的元素

【二分查找】【C++算法】378. 有序矩阵中第 K 小的元素

作者推荐 视频算法专题 本文涉及的基础知识点 二分查找算法合集 LeetCode378. 有序矩阵中第 K 小的元素 给你一个 n x n 矩阵 matrix &#xff0c;其中每行和每列元素均按升序排序&#xff0c;找到矩阵中第 k 小的元素。 请注意&#xff0c;它是 排序后 的第 k 小元素&…
阅读更多...
深度学习_15_过拟合欠拟合

深度学习_15_过拟合欠拟合

过拟合和欠拟合 过拟合和欠拟合是训练模型中常会发生的事&#xff0c;如所要识别手势过于复杂&#xff0c;如五角星手势&#xff0c;那就需要更改高级更复杂的模型去训练&#xff0c;若用比较简单模型去训练&#xff0c;就会导致模型未能抓住手势的全部特征&#xff0c;那简单…
阅读更多...
了解游戏中的数据同步

了解游戏中的数据同步

目录 数据同步 通过比较来看状态同步和帧同步 状态同步 帧同步 帧同步实现需要的条件 两者相比较 数据同步 在联机游戏中&#xff0c;我的操作和数据要同步给同一局游戏中其他所有玩家&#xff0c;其他玩家的操作和数据也会同步给我。这叫做数据同步&#xff0c;目前数据…
阅读更多...
《TCP/IP详解 卷一》第10章 UDP 和 IP 分片

《TCP/IP详解 卷一》第10章 UDP 和 IP 分片

目录 10.1 引言 10.2 UDP 头部 10.3 UDP校验和 10.4 例子 10.5 UDP 和 IPv6 10.6 UDP-Lite 10.7 IP分片 10.7.1 例子&#xff1a;IPV4 UDP分片 10.7.2 重组超时 10.8 采用UDP的路径MTU发现 10.9 IP分片和ARP/ND之间的交互 10.10 最大UDP数据报长度 10.11 UDP服务器…
阅读更多...
代码随想录Day66 | 图的DFS与BFS

代码随想录Day66 | 图的DFS与BFS

代码随想录Day66 | 图的DFS与BFS DFS797.所有可能的路径无向图和有向图的处理 BFS200.岛屿数量 DFS 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a; 状态 本质上就是回溯算法。 void dfs(参数) {if (终止条件) {存放结果;return;}for (选择&#xff1a;本节点所连接的…
阅读更多...
猴子吃桃问题（python版）

猴子吃桃问题（python版）

文章预览&#xff1a; 题目python解法一&#xff1a;运行结果 python解法二&#xff1a;运行结果 python解法三&#xff1a;运行结果 题目 猴子吃桃问题&#xff1a;猴子第一天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不过瘾&#xff0c;又多吃了一个。 第二天早…
阅读更多...
超全面！Linux学习资料大合集，21套从入门到进阶，看这篇就够了

超全面！Linux学习资料大合集，21套从入门到进阶，看这篇就够了

本文将为那些渴望学习Linux&#xff0c;但又缺乏相应资料和方向的朋友&#xff0c;提供21套Linux优质资料&#xff0c;包含入门到进阶&#xff0c;希望能对大家有所帮助。 此合集内容及其丰富&#xff0c;涉及方面颇多&#xff0c;不仅适合Linux入门学习的朋友&#xff0c;运维…
阅读更多...
水电站数字孪生：水力发电在可视化领域的应用

水电站数字孪生：水力发电在可视化领域的应用

自水轮机的早期发明被用于农业灌溉&#xff0c;到 18 世纪末期的工业革命促使水轮机技术的改良&#xff0c;再到 19 世纪末水利发电的崛起&#xff0c;直至今日&#xff0c;智慧水电站数字孪生技术正处于蓬勃发展之中。通过整合物联网、大数据、云计算等现代信息技术&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023