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.mzph.cn/news/718500.shtml

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

相关文章

Unreal触屏和鼠标控制旋转冲突问题

Unreal触屏和鼠标控制旋转冲突问题

Unreal触屏和鼠标控制旋转冲突问题 鼠标控制摄像机旋转添加Input轴计算旋转角度通过轴事件控制旋转 问题和原因问题原因 解决办法增加触摸控制旋转代码触屏操作下屏蔽鼠标轴响应事件 鼠标控制摄像机旋转 通过Mouse X和Mouse Y控制摄像机旋转。 添加Input轴 计算旋转角度 通过…
阅读更多...
SpringBootWeb快速入门

SpringBootWeb快速入门

1.创建springboot工程&#xff0c;新建module 2.勾选web开发相关依赖 3.删除多余文件 4.新建类 5.启动类中运行main方法 6.启动 默认端口号8080 7.打开浏览器&#xff0c;地址栏输入 8.报错 9.原因&#xff0c;控制层位置放错&#xff0c;剪切controller层放进com.example …
阅读更多...
[vue error] TypeError: Components is not a function

[vue error] TypeError: Components is not a function

问题详情 问题描述: element plus按需导入后&#xff0c;启动项目报错&#xff1a; 问题原因 unplugin-vue-components插件版本问题 查看 unplugin-vue-components插件可以发现版本太高了 问题解决 unplugin-vue-components 版本高了&#xff0c;我用的0.26.0&#xff0c…
阅读更多...
【STM32+HAL】姿态传感器陀螺仪MPU6050模块

【STM32+HAL】姿态传感器陀螺仪MPU6050模块

一、准备工作 有关OLED屏初始化的问题&#xff0c;详见【STM32HAL】OLED显示初始化配置 二、所用工具 1、芯片&#xff1a;STM32F10C8T6 2、CUBEMX配置软件 3、 6 轴运动处理组件MPU6050 三、实现功能 OLED屏显示姿态角 四、HAL配置步骤 1、开启I2C1进行MPU6050通信 2、开…
阅读更多...
供应链管理（SCM）：界面设计全面扫盲，得供应链者得天下

供应链管理（SCM）：界面设计全面扫盲，得供应链者得天下

大家伙&#xff0c;我是大千UI工场&#xff0c;专注UI分享和项目接单&#xff0c;本期带来供应链系统的设计分享&#xff0c;欢迎大家关注、互动交流。 一、什么是SCM SCM系统是供应链管理&#xff08;Supply Chain Management&#xff09;系统的缩写。供应链管理是指协调和管…
阅读更多...
【笔记版】edgecore.yaml分析总结

【笔记版】edgecore.yaml分析总结

1. 文件路径 /etc/kubeedge/config edgecore.yaml是该目录下唯一的文件 附上链接&#xff1a;edgecore.yaml 2. 文件生成方式 2.1 方式一 使用keadm安装部署的方式&#xff0c;执行完keadm join --cloudcore-ipportcloudcore监听的IP地址:端口&#xff08;默认为10002&…
阅读更多...
(十)SpringCloud系列——openfeign的高级特性实战内容介绍

(十)SpringCloud系列——openfeign的高级特性实战内容介绍

前言 本节内容主要介绍一下SpringCloud组件中微服务调用组件openfeign的一些高级特性的用法以及一些常用的开发配置&#xff0c;如openfeign的超时控制配置、openfeign的重试机制配置、openfeign集成高级的http客户端、openfeign的请求与响应压缩功能&#xff0c;以及如何开启…
阅读更多...
论文阅读-高效构建检查点

论文阅读-高效构建检查点

论文标题&#xff1a;On Efficient Constructions of Checkpoints 摘要 高效构建检查点/快照是训练和诊断深度学习模型的关键工具。在本文中&#xff0c;我们提出了一种适用于检查点构建的有损压缩方案&#xff08;称为LC-Checkpoint&#xff09;。LC-Checkpoint同时最大化了…
阅读更多...
uniapp开发android原生插件

uniapp开发android原生插件

一、下载原生开发SDK Android 离线SDK - 正式版 | uni小程序SDK (dcloud.net.cn)、 https://nativesupport.dcloud.net.cn/AppDocs/download/android.html 将开发uniappa原生android的插件解压到ben本地目录&#xff0c;目录结构如下&#xff1a; 接下就可以使用 UniPlugin-Hel…
阅读更多...
【本科组冠名奖】2023年第八届数维杯数学建模挑战赛获奖感言

【本科组冠名奖】2023年第八届数维杯数学建模挑战赛获奖感言

美国大学生数学建模竞赛已结束过半&#xff0c;现在又迎来了2024年第九届数维杯国赛&#xff0c;准备参加今年数维杯国赛的同学&#xff0c;今天我们一起看看去年优秀的选手都有什么获奖感言吧~希望能帮到更多热爱数学建模的同学。据说文末在看点赞的大佬都会直冲国奖呢&#x…
阅读更多...
少儿编程 中国电子学会C++等级考试一级历年真题答案解析【持续更新 已更新82题】

少儿编程 中国电子学会C++等级考试一级历年真题答案解析【持续更新 已更新82题】

C 等级考试一级考纲说明 一、能力目标 通过本级考核的学生&#xff0c;能对 C 语言有基本的了解&#xff0c;会使用顺序结构、选择结构、循环结构编写程序&#xff0c;具体用计算思维的方式解决简单的问题。 二、考核目标 考核内容是根据软件开发所需要的技能和知识&#x…
阅读更多...
单词规律00

单词规律00

题目链接 单词规律 题目描述 注意点 pattern只包含小写英文字母s只包含小写英文字母和 ’ ’s不包含任何前导或尾随对空格s中每个单词都被 单个空格 分隔 解答思路 本题与上一次同构字符串类似&#xff0c;思路可以参照同构字符串 代码 class Solution {public boolean …
阅读更多...
企业财务规划的未来：自动化智能化如何推动全面预算管理

企业财务规划的未来：自动化智能化如何推动全面预算管理

随着自动化和智能化对企业的影响日益明显&#xff0c;了解和接受那些有可能改变企业财务规划的技术变得愈发重要。新兴技术是推动企业增长和业务生产的中坚力量。作为企业财务专业人员&#xff0c;熟悉技术能够帮助他们了解企业的未来价值&#xff0c;从而更好的领导团队。数智…
阅读更多...
springboot支持的常用日志框架介绍

springboot支持的常用日志框架介绍

日志系统是计算机系统中用于记录和跟踪事件、错误和信息的软件组件。在软件开发和维护过程中&#xff0c;日志系统起着至关重要的作用。它可以帮助开发人员了解软件的运行情况&#xff0c;快速定位和解决问题。本文将从以下几个方面介绍日志系统&#xff1a;日志系统概述、Spri…
阅读更多...
vscode——远端配置及一些问题解决

vscode——远端配置及一些问题解决

vscode——远端配置 安装Remote -SSH插件配置config本地变化一些问题缺失核心关闭vscode自动更新 尝试写入管道不存在hostname -I 查出来的ip连不上 我们之前大概了解了vscode的本地设置&#xff0c;我们之前提过&#xff0c;vscode是一款编辑器&#xff0c;在文本编辑方面有着…
阅读更多...
程序员的金三银四求职宝典：如何在关键时期脱颖而出？

程序员的金三银四求职宝典：如何在关键时期脱颖而出？

个人主页&#xff1a;17_Kevin-CSDN博客 随着春天的脚步渐近&#xff0c;程序员们的求职热潮也随之而来。在这个被称为“金三银四”的招聘季&#xff0c;如何从众多求职者中脱颖而出&#xff0c;成为了许多程序员关注的焦点。本文将为你提供一份全面的求职宝典&#xff0c;助你…
阅读更多...
彻底剖析激光-视觉-IMU-GPS融合SLAM算法：理论推导、代码讲解和实战

彻底剖析激光-视觉-IMU-GPS融合SLAM算法：理论推导、代码讲解和实战

自主导航是机器人与自动驾驶的核心功能&#xff0c;而SLAM技术是实现自主导航的前提与关键。现有的机器人与自动驾驶车辆往往会安装激光雷达&#xff0c;相机&#xff0c;IMU&#xff0c;GPS等多种模态的传感器&#xff0c;而且已有许多优秀的激光SLAM与视觉SLAM算法。但是每种…
阅读更多...
曲线生成 | 图解Dubins曲线生成原理(附ROS C++/Python/Matlab仿真)

曲线生成 | 图解Dubins曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 什么是Dubins曲线&#xff1f;2 Dubins曲线原理2.1 坐标变换2.2 单步运动公式2.3 曲线模式 3 Dubins曲线生成算法4 仿真实现4.1 ROS C实现4.2 Python实现4.3 Matlab实现 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、…
阅读更多...
Foxmail快捷键设置问题

Foxmail快捷键设置问题

当快捷键设置错误时不会生效&#xff0c;原来的快捷键仍有效&#xff0c;即使禁用快捷键功能&#xff0c;原先快捷键仍有效。正确的快捷键&#xff1a; 1. 不能是空&#xff08;NULL&#xff09; 2. 应该设置按键值只有一个的键盘按钮。
阅读更多...
【动态规划专栏】

【动态规划专栏】

动态规划基础知识 概念 动态规划&#xff08;Dynamic Programming&#xff0c;DP&#xff09;&#xff1a;用来解决最优化问题的算法思想。 动态规划是分治思想的延伸&#xff0c;通俗一点来说就是大事化小&#xff0c;小事化无的艺术。 一般来说&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023