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.rhkb.cn/news/268490.html

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

相关文章

uniapp聊天记录本地存储(详细易懂)

uniapp聊天记录本地存储(详细易懂)

目录 目录 1、通过websocket拿取数据 2、获取聊天数据 3、聊天信息存储 、更新 4、读取聊天记录 5、发送信息&#xff0c;信息获取 6、最终效果 1.聊天信息的存储格式 2、样式效果 写聊天项目&#xff0c;使用到了本地存储。需要把聊天信息保存在本地&#xff0c;实时获…
阅读更多...
第105讲：Mycat垂直分表实战：从规划到解决问题的完整指南

第105讲：Mycat垂直分表实战：从规划到解决问题的完整指南

文章目录 1.垂直分表的背景2.垂直分表案例实战2.1.垂直分表规划2.2.配置Mycat实现垂直分表2.3.重启Mycat2.4.在Mycat命令行中导入数据结构2.5.查看由Mycat分表后每个分片上存储的表2.6.Mycat垂直分表后可能遇到的问题2.7.垂直分表完成 1.垂直分表的背景 我们的商城系统数据库&…
阅读更多...
软件测试项目实战，某购物车/测试点分析实战（详细步骤）

软件测试项目实战，某购物车/测试点分析实战（详细步骤）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 第一步&#xff1…
阅读更多...
winform 输出运行设备的mac地址

winform 输出运行设备的mac地址

winform定制一个代码段 输出运行设备的mac码此方法获取的是运行设备上的物理网卡的MAC地址&#xff0c;并不包括虚拟网卡或无线网卡的MAC地址。当设备具有多个网卡时&#xff0c;它只返回第一个正常运行的网卡的MAC地址。如果未找到任何网卡&#xff0c;则返回"未找到MAC地…
阅读更多...
贪心（基础算法）--- 区间选点

贪心（基础算法）--- 区间选点

905. 区间选点 思路 &#xff08;贪心&#xff09;O(nlogn) 根据右端点排序 将区间按右端点排序 遍历区间&#xff0c;如果当前区间左端点不包含在前一个区间中&#xff0c;则选取新区间&#xff0c;所选点个数加1&#xff0c;更新当前区间右端点。如果包含&#xff0c;则跳…
阅读更多...
雅特力AT32L021首款低功耗MCU震撼登场

雅特力AT32L021首款低功耗MCU震撼登场

雅特力于2月28日正式发布AT32L021首款入门级低功耗MCU&#xff0c;搭配不同容量Flash、SRAM&#xff0c;提供7种封装类型共21个型号选择&#xff0c;最小封装面积仅3x3mm。为降低能耗&#xff0c;延长设备运作时间&#xff0c;AT32L021系列支持多种能耗模式和休眠模式&#xff…
阅读更多...
韦东山嵌入式Liunx入门驱动开发五

韦东山嵌入式Liunx入门驱动开发五

文章目录 一、驱动程序基石1-1 休眠与唤醒1-2 POLL机制1-3 异步通知(1) 异步通知程序解析(2) 异步通知机制内核代码详解 1-4 阻塞与非阻塞1-5 定时器(1) 内核函数(2) 定时器时间单位 1-6 中断下半部 tasklet 本人学习完韦老师的视频&#xff0c;因此来复习巩固&#xff0c;写以…
阅读更多...
【活动】前端世界的“祖传代码”探秘：从古老魔法到现代重构

【活动】前端世界的“祖传代码”探秘：从古老魔法到现代重构

作为一名前端工程师&#xff0c;我时常在项目中邂逅那些被岁月打磨过的“祖传代码”。它们就像古老的魔法书页&#xff0c;用HTML标签堆砌起的城堡、CSS样式表中的炼金术&#xff0c;以及JavaScript早期版本中舞动的符咒。这些代码承载着先驱们的探索精神和独特智慧&#xff0c…
阅读更多...
#FPGA（基础知识）

#FPGA（基础知识）

1.IDE:Quartus II 2.设备&#xff1a;Cyclone II EP2C8Q208C8N 3.实验&#xff1a;正点原子-verilog基础知识 4.时序图&#xff1a; 5.步骤 6.代码&#xff1a;
阅读更多...
专业145+总分410+西工大西北工业大学827信号与系统考研经验电子信息与通信工程，海航，真题，大纲，参考书。

专业145+总分410+西工大西北工业大学827信号与系统考研经验电子信息与通信工程，海航，真题，大纲，参考书。

经过一年的努力&#xff0c;分数终于出来。今年专业课827信号与系统145&#xff08;很遗憾差了一点点满分&#xff0c;没有达到Jenny老师的最高要求&#xff09;&#xff0c;数一130&#xff0c;英语和政治也都比较平衡&#xff0c;总分410分&#xff0c;当然和信息通信考研Jen…
阅读更多...
【Git】深入理解 Git 分支合并操作：git merge dev 命令详解

【Git】深入理解 Git 分支合并操作：git merge dev 命令详解

深入理解 Git 合并操作&#xff1a;git merge dev 命令详解 摘要&#xff1a;本文将深入探讨 Git 中的合并操作&#xff0c;以及如何使用 git merge dev 命令将dev 分支的修改合并到当前分支&#xff08;假设当前分支为main 分支&#xff09;中。通过详细的解释和示意图&#x…
阅读更多...
linux安全--DNS欺骗，钓鱼网站搭建

linux安全--DNS欺骗，钓鱼网站搭建

目录 一&#xff0c;实验准备 首先让client能上网 1&#xff09;实现全网互通&#xff0c;实现全网互通过程请看 2&#xff09;SNAT源地址转换 3&#xff09;部署DHCP服务 4)配置DHCP服务 5&#xff09;启动服务 6&#xff09;安装DNS服务 7&#xff09;DNS配置 8)启动DNS…
阅读更多...
HOOPS Communicator对3D大模型轻量化加载与渲染的4种解决方案

HOOPS Communicator对3D大模型轻量化加载与渲染的4种解决方案

今天给大家介绍一些关于3D Web轻量化引擎HOOPS Commuicator的关键概念&#xff0c;这些概念可以帮您在HOOPS Communicator流缓存服务器之上更好地构建您自己的模型流服务器。如果您是有大型数据集&#xff0c;那么&#xff0c;使用流缓存服务器可以极大地帮助您最大限度地减少内…
阅读更多...
Unity 预制体与变体

Unity 预制体与变体

预制体作用&#xff1a; 更改预制体&#xff0c;则更改全部的以预制体复制出的模型。 生成预制体&#xff1a; 当你建立好了一个模型&#xff0c;从层级拖动到项目中即可生成预制体。 预制体复制模型&#xff1a; 将项目中的预制体拖动到层级中即可复制。或者选择物体复制粘贴。…
阅读更多...
Java基础 - 6 - 面向对象（二）

Java基础 - 6 - 面向对象（二）

Java基础 - 6 - 面向对象&#xff08;一&#xff09;-CSDN博客 二. 面向对象高级 2.1 static static叫做静态&#xff0c;可以修饰成员变量、成员方法 2.1.1 static修饰成员变量 成员变量按照有无static修饰&#xff0c;分为两种&#xff1a;类变量、实例变量&#xff08;对象…
阅读更多...
VL53L8CX驱动开发(1)----驱动TOF进行区域检测

VL53L8CX驱动开发(1)----驱动TOF进行区域检测

VL53L8CX驱动开发----1.驱动TOF进行区域检测 概述视频教学样品申请源码下载主要特点硬件准备技术规格系统框图应用示意图区域映射生成STM32CUBEMX选择MCU 串口配置IIC配置LPn 设置X-CUBE-TOF1串口重定向代码配置Tera Term配置演示结果 概述 VL53L8CX是一款8x8多区域ToF测距传感…
阅读更多...
[晓理紫]每日论文分享(有中文摘要，源码或项目地址)--强化学习

[晓理紫]每日论文分享(有中文摘要，源码或项目地址)--强化学习

专属领域论文订阅 关注{晓理紫|小李子}&#xff0c;每日更新论文&#xff0c;如感兴趣&#xff0c;请转发给有需要的同学&#xff0c;谢谢支持 如果你感觉对你有所帮助&#xff0c;请关注我&#xff0c;每日准时为你推送最新论文。 分类: 大语言模型LLM视觉模型VLM扩散模型视觉…
阅读更多...
Git分布式版本控制系统——git学习准备工作

Git分布式版本控制系统——git学习准备工作

一、Git仓库介绍 开发者可以通过Git仓库来存储和管理文件代码&#xff0c;Git仓库分为两种&#xff1a; 本地仓库&#xff1a;开发人员自己电脑上的Git仓库 远程仓库&#xff1a;远程服务器上的Git仓库 仓库之间的运转如下图&#xff1a; commit&#xff1a;提交&#xff…
阅读更多...
linux 搭建web网站

linux 搭建web网站

综合练习&#xff1a;请给openlab搭建web网站 网站需求&#xff1a; 1.基于域名[www.openlab.com](http://www.openlab.com)可以访问网站内容为 welcome to openlab!!! 2.给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料和缴费网站&#xff0c;基于[www.openlab.…
阅读更多...
从零开始，使用C语言实现扫雷小游戏

从零开始，使用C语言实现扫雷小游戏

扫雷 1. 前言2. 准备工作3. 设计思路4. 定义数组5. 初始化6. 打印7. 布置雷8. 排查雷9. 完整代码 1. 前言 大家好&#xff0c;我是努力学习游泳的鱼。今天我们会用C语言实现一个经典的windows小游戏&#xff1a;扫雷。扫雷是一款单机小游戏&#xff0c;我上中学时特喜欢在电脑…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023