【10.HTML入门知识-CSS元素定位】

news2024/10/6 10:35:06

1 标准流(Normal Flow)

默认情况下,元素都是按照normal flow(标准流、常规流、正常流、文档流【document flow】)进行排布
从左到右、从上到下按顺序摆放好
 默认情况下,互相之间不存在层叠现象

1.1 margin-padding位置调整

在这里插入图片描述

1.1 画布 和 视口

在这里插入图片描述

2 认识position属性

除了static,其他定位属性都会脱标(自定义位置)
在这里插入图片描述

position值对比

在这里插入图片描述

2.1 静态定位 - static

会占据标准布局空间

在这里插入图片描述

2.2 相对定位 - relative

会占据标准布局空间
在这里插入图片描述

2.3 固定定位 - fixed

不会占据标准布局空间
在这里插入图片描述

2.4 绝对定位 - absolute

不会占据标准布局空间
在这里插入图片描述

2.5 子绝父相

在这里插入图片描述

2.6 将position设置为absolute/fixed元素的特点

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

2.7.粘性定位 - sticky

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

3 层叠 CSS属性 - z-index

在这里插入图片描述

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

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

相关文章

【13.HTML-动画】

1 CSS属性 - transform 1.1 位移 - translate translate的百分比可以完成一个元素的水平和垂直居中: 1.2 缩放 - scale 1.3 旋转 - rotate 1.4 transform-origin 形变的原点 1.5 倾斜 - skew 1.6 transform设置多个值 2 transition动画 2.1 认识transition动画 2…

Java反射(原理剖析与使用)

一、反射机制是什么 1、Java反射机制的核心是在程序运行时动态加载类并获取类的详细信息,从而操作类或对象的属性和方法。本质是JVM得到class对象之后,再通过class对象进行反编译,从而获取对象的各种信息。 2、Java属于先编译再运行的语言&a…

2023年第二十届五一数学建模竞赛C题:“双碳”目标下低碳建筑研究-思路详解与代码答案

该题对于模型的考察难度较低,难度在于数据的搜集以及选取与处理。 这里推荐数据查询的网站:中国碳核算数据库(CEADs) https://www.ceads.net.cn/ 国家数据 国家数据​data.stats.gov.cn/easyquery.htm?cnC01 以及各省市《统…

第四届“长城杯”信息安全铁人三项赛决赛RE-obfuscating

这里主要是加了混淆 这里要用到IDA的一个插件D810和去混淆脚本deflat.py。值得注意的是deflat.py无法在主逻辑去混淆,这里可以参考这篇文章的脚本利用angr符号执行去除控制流平坦化 - 0x401RevTrain-Tools (bluesadi.github.io)。在使用deflat.py和这文章中的脚本轮…

【AI折腾录】stable web ui基础【sd安装、lora vae embedding hyperwork等基础概念】

目录 一 sd安装二 目标三 sd基础3.1 模型3.2 vae(Variational autoencoder,变分自编码器)3.3 embedding3.3.1 安装方式3.3.2 使用方式 3.4 Lora3.4.1 lora组成3.4.2 使用:3.4.3 效果3.4.4 测试不同CFG效果 3.5 hypernetworks 超网…

LeetCode_BFS_DFS_中等_1376.通知所有员工所需的时间

目录 1.题目2.思路3.代码实现(Java) 1.题目 公司里有 n 名员工,每个员工的 ID 都是独一无二的,编号从 0 到 n - 1。公司的总负责人通过 headID 进行标识。 在 manager 数组中,每个员工都有一个直属负责人&#xff0c…

UE5实现距离测量功能

文章目录 1.实现目标2.实现过程2.1 Widget2.2 蓝图实现3.参考资料1.实现目标 UE5在Runtime环境下测量两个空间点位之间的绝对距离,并支持多段线的距离测量,GIF动图如下所示: 2.实现过程 实现原理比较简单,首先是基于PDI绘制线,有关绘制点和绘制线的可以看本专栏之前的文章…

css弹性布局

目录 1、实现弹性布局的前提:给父元素设置display:flex; 2、flex-direction:确定主轴方向 3、flex-wrap:是否换行 4、justify-content:主轴对齐方式 5、align-items:交叉轴对齐方式 6、align-content&#xff1a…

AWSFireLens轻松实现容器日志处理

applog应用程序和fluent-bit共享磁盘,日志内容是json格式数据,输出到S3也是JSON格式 applog应用部分在applog目录: Dockerfile文件内容 FROM alpine RUN mkdir -p /data/logs/ COPY testlog.sh /bin/ RUN chmod 777 /bin/testlog.sh ENTRYP…

人工智能技术在建筑能源管理中的应用场景

人工智能技术在建筑能源管理中的应用场景(龙惟定),2021 摘 要 本文简要介绍了建筑能源管理(building energy management, BEM) 的概念。并从5个方面阐述了 BEM 对人工智能(AI) 技术的需求,即楼宇控制需要由从顶到底的基于物理模…

03-Vue技术栈之生命周期

目录 1、什么是生命周期2、分析生命周期2.1 生命周期钩子函数2.2 生命周期钩子函数的作用2.3 生命周期钩子函数图例2.4 生命周期钩子函数的应用 3、生命周期总结 1、什么是生命周期 又名:生命周期回调函数、生命周期函数、生命周期钩子。是什么:Vue在关…

ChatGPT实现编程语言转换

编程语言转换 对于程序员来说,往往有一类工作,是需要将一部分业务逻辑实现从服务端转移到客户端,或者从客户端转移到服务端。这类工作,通常需要将一种编程语言的代码转换成另一种编程语言的代码,这就需要承担这项工作…

Java多线程深入探讨

1. 线程与进程2. 创建和管理线程2.1. 继承Thread类2.2. 实现Runnable接口2.3 利用Callable、FutureTask接口实现。2.4 Thread的常用方法 3. 线程同步3.1. synchronized关键字3.1.1同步代码块:3.1.2 同步方法: 3.2. Lock接口 4. 线程间通信5. 线程池5.1 使…

vue - pc端实现对div的拖动功能

实现对div的拖动功能,需要先要知道以下的一些原生事件和方法; 1,事件: 方法描述onmousedown鼠标按钮被按下onmousemove鼠标被移动onmouseup鼠标按键被松开 2,方法: 方法描述event.clientX返回当事件被触发时鼠标指针相对于浏览…

【BIM+GIS】Supermap加载实景三维倾斜摄影模型

OSGB是常见的倾斜模型格式,本文讲述如何在Supermap中加载实景三维倾斜摄影模型OSGB。 文章目录 一、生成配置文件二、加载倾斜模型1. 新建场景2. 添加模型3. 高程调整一、生成配置文件 点击【三维数据】→【数据管理】→【生成配置文件】。 参数设置如下: 源路径:选择倾斜模…

【12.HTML入门知识-flexbox布局】

flexbox布局 1 认识flexbox2 flex布局的重要概念3 flex布局的模型4 flex container/items相关的属性4.1 flex-direction:主轴的方向决定布局方向4.2 flex-wrap 单行或者多行排列4.3 flex-flow 简写4.4 justify-content 主轴对齐方式4.5 align-item 交叉轴单行对齐方式4.6 align…

【数据结构】JDK HashMap源码解析

目录 🌟HashMap源码解析 🌈类的属性 🌈构造方法 🌈put方法 🌟对比常用Map的子类实现: 🌟HashMap源码解析 JDK8之前,HashMap就是数组链表; JDK8之后,变成了数组链表红…

基于C++/CLI实现C#与C++互调过程中的注意事项

目录 一、基于C/CLI 的调用原理二、注意事项如何基于VS2010完成C#调用C开发过程1、生成C应用程序(非托管代码)2、基于C/CLI生成托管代码3、C#调用 如何基于VS2010完成C调用C#开发过程 三、C/CLI与COM组件对比 一、基于C/CLI 的调用原理 C/CLI &#xff…

数据结构---队列的实现

文章目录 前言一、什么是队列?二、队列接口的实现 1.队列结构的定义2.接口实现总结 前言 队列是一种特殊的线性表。 特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作&a…

【Vue.js】1668- 初中级前端必须掌握的 10 个 Vue 优化技巧

优化 Vue.js 应用性能是每个前端开发人员都需要关注的问题。本文我将分享 10 个初中级前端必须掌握的 Vue.js 优化技巧,无论您是正在学习 Vue.js,还是已经在应用开发中使用它,希望这些技巧都会对你的工作有所帮助。 1. 优雅的设置 v-for 中的…