css基础之定位、元素的显示与隐藏

定位

一、定位position组成

定义=定位模式+边偏移,

1.定位模式用于指定一个元素在文档中的定位方式

通过css的positon属性设置,其值分为四个:
静态定位:static
相对定位:relative
绝对定位:absolute
固定定位:fixed

2.边偏移决定了该元素的最终位置

top:距离父元素上边线的距离
bottom:距离父元素下边线的距离
left:距离父元素左边线的距离
right:距离父元素右边线的距离

二、相对定位

1.它是相对于自己原来的位置移动
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待
一般给绝对定位当爹

三、绝对定位

1.以自己的祖先元素对齐,当没有祖先元素或祖先元素没有定位时,以浏览器对齐
2.当祖先元素有定位时,以最近一级有定位的父级元素为准
3.不再占有原先的定位

子绝父相:

1.子级绝对定位,不会占有位置,可放到父级任意位置,并且不影响其他兄弟盒子
2.父级需要加相对定位限制子级在父盒子内显示

四、固定定位

1.以浏览器的可视窗口作为参照移动定位,跟父元素没有关系,不随滚动条滚动
2.不再占有原先的定位,与绝对定位类似

小技巧:固定在版心右侧

先让固定定位的盒子left:50%,再margin-left: 版心宽度的一半

五、粘性定位sticky

1.以浏览器的可视窗口作为参照移动定位
2.占有原先位置
3.必须添加top,bottom,left.right其中一个才有效

六、定位叠放次序z-index

1.数值可以是正负或0,默认auto,数值越大,盒子越靠上
2.如果属性值相同,后来者居上
3.数字上面上面不能用单位
4.只有定位的盒子才有次序

七、拓展

1.绝对定位的盒子不能用margin: 0 auto水平居中

解决方法:left: 50%,margin-left: 向左(负号)移动盒子自身宽度一半
垂直居中原理相同

2.定位的特殊特性

行内元素加了绝对或固定定位后,可以直接设置高宽,块级元素添加绝对或固定定位,如果不给宽度或高度,默认大小是内容的大小

3.浮动,绝对固定定位不会触发塌陷问题

4.浮动不会压住盒子,定位会压住

元素的显示与隐藏

一、display

1.display: none;隐藏元素,隐藏后不再占有原来位置(常用)
2.display: block;显示元素

二、visibility

1.visibility: visible;元素可视,继续占有原来位置
2.visibility: hidden;元素隐藏

三、overflow

1.overflow: hidden;将溢出的部分隐藏
2.overflow: visible;溢出的部分显示
3.overflow: auto;只有溢出的部分显示滚动条
4.overflow: scroll;溢出不溢出都显示滚动条

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

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

相关文章

读书笔记——《高质量C++/C编程指南》(5)

目录 前言 类的构造函数、析构函数与赋值函数 构造函数与析构函数的起源 构造函数的初始化表 构造和析构的次序 示例:类String 的构造函数与析构函数 不要轻视拷贝构造函数与赋值函数 示例:类String 的拷贝构造函数与赋值函数 偷懒的办法处理拷贝…

vscode怎么设置背景图片?

vscode背景图片是可以自己设置的,软件安装后默认背景的颜色是黑色的,这是默认的设计,如果要修改背景为指定的图片,那么我们需要安装插件,然后再通过代码来设置背景图片的样式,下面我们就来看看详细的教程。…

代数结构:5、格与布尔代数

16.1 偏序与格 偏序集:设P是集合,P上的二元关系“≤”满足以下三个条件,则称“≤”是P上的偏序关系(或部分序关系) (1)自反性:a≤a,∀a∈P; (2…

旅游推荐管理系统(小组项目)

文章目录 前言 一、项目介绍 1. 项目目的 2. 项目意义 2.1 提升旅游体验 2.2 促进旅游业发展 2.3 数据积累与分析 2.4 提升服务品质 2.5 优化资源配置 二、项目结构 1. 主要使用的技术 1.1 若依(Ruoyi)框架 1.2 Vue.js框架 1.3 Ajax 1.4 …

OpenCV 阈值法

1.概述 在深度学习出现之前&#xff0c;图像中的阈值法处理主要有二值阈值法、自适应阈值法、Ostu阈值法。 2.理论对比 3.代码实现 #include <iostream> #include <opencv2/opencv.hpp>int main(int argc, char** argv) {if(argc ! 2) {std::cerr << "…

【进程通信】了解信号以及信号的产生

文章目录 0.前言1.信号的基本概念1.1中断1.1.1 软中断1.1.2硬中断 1.2异步1.2.1异步和同步的比较 2.信号的主要用途3.信号的特点4.查看信号4.1Core和Term的区别4.2生成Core文件 5.初识捕捉信号5.1signal函数 6.产生信号的方式6.1.通过终端按键产生信号6.2.调用系统函数向进程发…

隆重庆贺中华人民共和国成立七十五周年,中国科学技术大学全体师生祝福祖国强盛

隆重庆贺中华人民共和国成立七十五周年中国科学技术大学全体师生祝福祖国强盛卡西莫多 华夏曾经炮声隆 亿万黎民饥寒重 列强瓜分举杯庆 条约割肉斟血贺 饕餮盛宴沃野中 地大物博多浮华 曾多膏脂送肉人 我辈悲苦先祖民 曾经如此患难共 皆因内乱又失和 才致如此覆巢国 领袖聚沙垒…

使用 TensorFlow.js 和 OffscreenCanvas 实现实时防挡脸弹幕

首先&#xff0c;要理解我们的目标&#xff0c;我们将实时获取视频中的面部区域并将其周围的内容转为不透明以制造出弹幕的“遮挡效应”。 步骤一&#xff1a;环境准备 我们将使用 TensorFlow.js 的 Body-segmentation 库来完成面部识别部分&#xff0c;并使用 OffscreenCanv…

tvm.frontend.from_pytorch详细介绍(1)

文章目录 一、pytorch前端整体转化流程&#xff08;部分&#xff09;1.脚本化的pytorch模型2.内联优化(_run_jit_passes)2.1、内联优化2.2 什么是内联函数 3.graph中的所有op(get_all_op_names)3.1 各个变量的值1 .graph2 .nodes3 .p nodes4、返回结果 二、from_pytorch完整代码…

国内智能搜索工具实战教程

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

3、Qt--配置文件的使用

开发平台&#xff1a;Win10 64位 开发环境&#xff1a;Qt Creator 13.0.0 构建环境&#xff1a;Qt 5.15.2 MSVC2019 64位 一、需求及方案 实际开发过程中&#xff0c;我们需要根据本地的配置文件&#xff0c;去配置我们的程序&#xff0c;比如数据库地址、网络地址等信息&…

分享10类正规的网上赚钱平台,让你摆脱单一收入

在这个互联网飞速发展的时代&#xff0c;你是否还在为单一的收入来源而焦虑&#xff1f;别担心&#xff0c;今天带你解锁10种网上赚钱的新姿势&#xff0c;让你的收入不再单一&#xff0c;甚至可能翻倍&#xff01; 1. 文库类&#xff1a;知识的变现 你知道吗&#xff1f;你的…

k8s 数据流向 与 核心概念详细介绍

目录 一 k8s 数据流向 1&#xff0c;超级详细版 2&#xff0c;核心主键及含义 3&#xff0c;K8S 创建Pod 流程 4&#xff0c;用户访问流程 二 Kubernetes 核心概念 1&#xff0c;Pod 1.1 Pod 是什么 1.2 pod 与容器的关系 1.3 pod中容器 的通信 2&#xff0c; …

imx91的uboot编译

一、准备操作 下载半导体厂家的uboot源码 如这里我要下载的是imx91的恩智浦linux芯片bootloader 进入半导体厂家官网 下载源码&#xff0c;略 更新linux源&#xff0c;这里我是替换成清华源 vi /etc/apt/sources.list deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ fo…

【江科大STM32学习笔记】新建工程

1.建立工程文件夹&#xff0c;Keil中新建工程&#xff0c;选择型号 2.工程文件夹里建立Start、Library、User等文件夹&#xff0c;复制固件库里面的文件到工程文件夹 为添加工程文件准备&#xff0c;建文件夹是因为文件比较多需要分类管理&#xff0c;需要用到的文件一定要复…

Web UI自动化测试--PO模式

没有PO实现的测试用例的问题: 重用性低:登录功能重复可维护性差:数据和代码混合可读性差:元素定位方法杂乱(id、xpath、css混杂)可读性差:不易识别操作的含义(特别是css和xpath语法)可维护性差:如果某个元素的属性改了,你要更改多次PO(Page Object Model)页面对象模型…

完全背包问题(c++)

完全背包问题 当前有 N 种物品&#xff0c;第 i 种物品的体积是 ci​&#xff0c;价值是 wi​。 每种物品的数量都是无限的&#xff0c;可以选择任意数量放入背包。 现有容量为 V 的背包&#xff0c;请你放入若干物品&#xff0c;使总体积不超过 V&#xff0c;并且总价值尽可…

el-table被点击行添加背景颜色

在 Element UI 的 el-table 组件中&#xff0c;你可以通过使用行样式 row-style 属性来为被点击的行添加颜色。首先&#xff0c;你需要在数据中定义一个对象来存储被点击行的索引&#xff0c;然后在 row-style 函数中根据这个索引来返回不同的样式。 以下是一个示例&#xff1…

YOLOv8+CLIP实现图文特征匹配

本文通过结合YOLOv8s的高效物体检测能力与CLIP的先进图像-文本匹配技术&#xff0c;展示了深度学习在处理和分析复杂多模态数据中的潜力。这种技术的应用不仅限于学术研究&#xff0c;还能广泛应用于工业、商业和日常技术产品中&#xff0c;以实现更智能的人机交互和信息处理。…

新年首站 | 宝兰德教育行业信创新动力发展研讨会顺利召开

近日&#xff0c;宝兰德携手慧点数码、安超云共同举办了教育行业信创新动力发展研讨会。会议邀请了中国人民公安大学、中国戏曲学院、北京航空航天大学、北京理工大学、华北电力大学、中国矿业大学、北京服装学院、北京城市学院等数十所高校信息中心负责人、专家出席了本次会议…