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…
阅读更多...
AI写的wordpress网站首页模板 你觉得怎么样？

AI写的wordpress网站首页模板 你觉得怎么样？

以下是一个AI写的基本的首页模板示例&#xff0c;包含您提到的各个模块。请注意&#xff0c;这只是一个基本框架&#xff0c;您可能需要根据您的具体需求进行进一步的定制和调整。 <!DOCTYPE html> <html <?php language_attributes(); ?>> <head>&…
阅读更多...
【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;系统的缩写。供应链管理是指协调和管…
阅读更多...
计算机视觉 了解OpenCV、COLMAP、PyTorch3D 和 OpenGL 中坐标系3D转换的简要指南

计算机视觉 了解OpenCV、COLMAP、PyTorch3D 和 OpenGL 中坐标系3D转换的简要指南

一、简述 由于坐标系不同，在OpenCV、COLMAP、PyTorch3D和OpenGL等 3D 框架的世界中进行转换可能会令人觉得头疼。这里比较它们的坐标系并提供它们之间转换的示例。核心还是找到在这些不同的 3D 环境中无缝工作所需的知识，让我们以清晰直接的方式探索和理解这些坐标系。 2D 成…
阅读更多...
【笔记版】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&…
阅读更多...
题目 1431: 蓝桥杯第五届真题-分糖果

题目 1431: 蓝桥杯第五届真题-分糖果

题目描述: 有n个小朋友围坐成一圈。老师给每个小朋友随机发偶数个糖果&#xff0c;然后进行下面的游戏&#xff1a; 每个小朋友都把自己的糖果分一半给左手边的孩子。 一轮分糖后&#xff0c;拥有奇数颗糖的孩子由老师补给1个糖果&#xff0c;从而变成偶数。 反复进行这个游戏…
阅读更多...
设计模式精解：GoF 23种设计模式全解析

设计模式精解：GoF 23种设计模式全解析

在软件工程中&#xff0c;设计模式是为了解决常见的软件设计问题而形成的一套经典解决方案。这些模式不仅能够帮助开发者提高设计的灵活性和代码的重用性&#xff0c;还能使问题的解决方案更加清晰、易于理解。《设计模式精解&#xff0d;GoF 23种设计模式》一书中所列举的23种…
阅读更多...
微信小程序的单位

微信小程序的单位

在小程序开发中&#xff0c;rpx是一种相对长度单位&#xff0c;用于在不同设备上实现自适应布局。它是微信小程序特有的单位&#xff0c;表示屏幕宽度的 1/750。 rpx单位的好处在于可以根据设备的屏幕宽度进行自动换算&#xff0c;使得页面在不同设备上保持一致的显示效果。例…
阅读更多...
学习笔记 前端

学习笔记 前端

学习笔记 前端 学习记录nodejsyarn解决方法 学习记录 nodejs yarn 描述&#xff1a;想体验一下chatgptnextweb在本地部署&#xff0c;但是本地部署需要yarn环境&#xff0c;网上看了yarn在node16以上就自带了&#xff0c;而我的电脑是node18&#xff0c;所以就直接输入了ya…
阅读更多...
(十)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同时最大化了…
阅读更多...
MFC中CString的MakeUpper使用方法

MFC中CString的MakeUpper使用方法

在MFC中&#xff0c;CString类提供了MakeUpper函数来将字符串中的字符全部转换为大写。MakeUpper函数没有参数&#xff0c;它会直接修改原始的CString对象。 下面是一些示例代码&#xff0c;演示了如何使用MakeUpper函数&#xff1a; CString str "Hello, World!"…
阅读更多...
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…
阅读更多...
实用Pycharm插件

实用Pycharm插件

Pycharm的离线安装&#xff1a;https://plugins.jetbrains.com/ 需要根据对应的Pycharm/Goland版本选取所需的 对于实用的插件如下&#xff1a; 实时查看每一行的git blame信息&#xff1a; Gittoolbox 转换IDE的英文为中文&#xff1a;Chinese IDE侧格式化json字符串&#…
阅读更多...
UE5 C++ TPS开发 学习记录(八

UE5 C++ TPS开发 学习记录(八

这一次到了p19 完善了UI和写了创建房间 MultiPlayerSessionSubsystem.h // Fill out your copyright notice in the Description page of Project Settings. #pragma once #include "CoreMinimal.h" #include "Subsystems/GameInstanceSubsystem.h" #in…
阅读更多...
python基础-基本数据类型深入-2.2

python基础-基本数据类型深入-2.2

目录 集合 集合的定义 集合操作 集合的内建函数 集合与内置函数 集合练习-1 集合练习-2 集合练习-3 集合 集合的定义 学习关于 Python 集的所有内容&#xff1b;如何创建它们、添加或删除其中的元素&#xff0c;以及在 Python 中对集合执行的所有操作。 Python 中的集…
阅读更多...
最新文章

Copyright @ 2022~2023