测开:前端基础-css页面布局-定位

news2024/11/24 18:37:55

一 、传统网页布局的三种方式

网页布局的本质–用CSS来摆放盒子,把盒子摆放到相应的位置,css提供了三种传统布局方式,分别是标准流浮动定位三种。

二、 定位 

2.1 啥是定位

我的理解,就是要把这个元素,放在哪个位置,这就是定位。

2.2 实现定位

通过属性 position 实现

2.3 定位的四种方式

前提,页面中有4个box.

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				background-color: aquamarine;
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: aqua;
				width: 120px;
				height: 120px;
			}
			.box2{
				background-color: olive;
				width: 150px;
				height: 150px;
			}
			.box3{
				background-color: olive;
				background-color: chocolate;
				width: 180px;
				height: 180px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			box
		</div>
		<div class="box1">
			box1
		</div>
		<div class="box2">
			box2
		</div>
		<div class="box3">
			box3
		</div>
	</body>
</html>

2.3.1 静态定位

设置方式为position: static;

静态定位的盒子是标准流状态,用于取消定位。

静态定位的盒子处于网页的最底层,并且top、left、bottom、right属性都不起作用。

2.3.2 相对定位

设置方式为position: relative;

相对定位:相对于原来在文档流的位置进行偏移

相对定位的盒子没有脱离标准流,在页面中占据位置,盒子的层级高于标准流和浮动的盒子,top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后,相对定位的盒子是相对自己在标准流中的位置进行偏移,但是盒子在页面中占据的位置是不会改变的。

操作:

设置box1 ,相对定位,进行偏移.

			.box1{
				background-color: aqua;
				width: 120px;
				height: 120px;
				position: relative;
				left: 20px;
				bottom: 2.5rem;
			}

效果:

box1 相对于原来在文档流的位置进行偏移

 

2.3.3 绝对定位

设置方式为position: absolute;

绝对定位的盒子脱离了标准流,在页面中不占位置.

盒子的层级高于标准流和浮动的盒子,top、left、bottom、right属性都会起作用。

注意:

设置了top、left、bottom、right属性后,绝对定位的盒子是相对设置了定位属性(静态定位不算)的最近的父级盒子的位置进行偏移,

如果没有设置了定位的父级盒子,则是相对于body标签进行偏移。

绝对定位的盒子可以通过设置z-index属性改变层级。

举例:

设置绝对属性,的元素,它的最近的父类没有设置定位,则相对于body标签进行偏移。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				background-color: aquamarine;
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: aqua;
				width: 120px;
				height: 120px;
				position: absolute;
				left: 20px;
				bottom: 2.5rem;
			}
			.box2{
				background-color: olive;
				width: 150px;
				height: 150px;
			}
			.box3{
				background-color: olive;
				background-color: chocolate;
				width: 180px;
				height: 180px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			box
		</div>
		<div class="box1">
			box1
		</div>
		<div class="box2">
			box2
		</div>
		<div class="box3">
			box3
		</div>
	</body>
</html>

绝对定位的元素box1,相对于body进行了偏移 

 

 举例:

设置绝对属性,的元素,与它最近的父级盒子的位置进行偏移。

如下图,box6 设置了绝对定位。box6的父类id=app 设置了相对定位。

则box6的位置,是相对于它的app父类进行偏移的。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app{
				background-color: chartreuse;
				position: relative;
				height: 200px;
				
			}
			.box5{
				background-color: aquamarine;
				width: 100px;
				height: 100px;
			}
			.box6{
				background-color: aqua;
				width: 120px;
				height: 120px;
				position: absolute;
				left: 200px;
			}
			.box{
				background-color: aquamarine;
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: aqua;
				width: 120px;
				height: 120px;
			}
			.box2{
				background-color: olive;
				width: 150px;
				height: 150px;
			}
			.box3{
				background-color: olive;
				background-color: chocolate;
				width: 180px;
				height: 180px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			box
		</div>
		<div class="box1">
			box1
		</div>
		<div class="mybigbox" id="app">
			<div class="box5">
				box5
			</div>
			<div class="box6">
				box6
			</div>
			
		</div>

		<div class="box2">
			box2
		</div>
		<div class="box3">
			box3
		</div>
		
	</body>
</html>

案例:

实现banner,两侧的滑动按钮。

父类设置相对定位,子类设置绝对定位。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app{
				background-color: chartreuse;
				position: relative;
				height: 200px;
				
			}
			.box5{
				background-color: aquamarine;
				width: 100px;
				height: 100px;
				position: absolute;
				left: 200px;
				top: 40%;
			}
			.box6{
				background-color: aqua;
				width: 100px;
				height: 100px;
				position: absolute;
				right: 200px;
				top: 40%;
			}
			.box{
				background-color: aquamarine;
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: aqua;
				width: 120px;
				height: 120px;
			}
			.box2{
				background-color: olive;
				width: 150px;
				height: 150px;
			}
			.box3{
				background-color: olive;
				background-color: chocolate;
				width: 180px;
				height: 180px;
			}
		</style>
	</head>
	<body>
		<div class="mybigbox" id="app">
			<div class="box5">
				box5
			</div>
			<div class="box6">
				box6
			</div>
			
		</div>
		
		<div class="box">
			box
		</div>
		<div class="box1">
			box1
		</div>

		<div class="box2">
			box2
		</div>
		<div class="box3">
			box3
		</div>
		
	</body>
</html>

2.3.4 固定定位

设置方式为position: fixed;

固定定位的盒子脱离了标准流,在页面中不占位置,

盒子的层级高于标准流和浮动的盒子,top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后,固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动,固定定位的盒子永远显示在浏览器窗口,不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。

固定定位的盒子可以通过设置z-index属性改变层级。

固定定位的盒子默认的宽高由其内容决定。

			.box{
				background-color: aquamarine;
				position: fixed;
				right: 20px;
				width: 100px;
				height: 100px;
				
			}


 

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

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

相关文章

一文掌握组织项目等级划分维度,标准和实例

当你遇到多项目怎么管&#xff1f;遇到项目之间的冲突怎么解决&#xff1f;很多公司没有项目优先级的划分&#xff0c;会对企业造成很多严重的问题。首先&#xff0c;会造成不合理的资源分配&#xff1a;缺少项目优先级的情况下&#xff0c;很难确定哪些项目是最重要的&#xf…

DAGA项目 代码阅读笔记1——LSTM-LM部分代码

DAGA 代码阅读笔记1——LSTM-LM部分代码 文章目录DAGA 代码阅读笔记1——LSTM-LM部分代码概述main函数逻辑分析设置训练参数fields初始化训练数据读入模型建立优化器概述 ​ 学习人工智能的必经之路——读代码。目前阅读的代码来自于github数据增强项目DAGA&#xff0c;这个项…

socket 编程实战(编写客户端程序 )

编写客户端程序 接着上一篇&#xff1a;实战服务端程序 接下来我们再编写一个简单地客户端应用程序&#xff0c;客户端的功能是连接上小节所实现的服务器&#xff0c;连接成功之后向服务器发送数据&#xff0c;发送的数据由用户输入。示例代码如下所示&#xff1a; #include…

大数据开发治理平台 DataWorks

序言学习下阿里DataWorks的设计理念以及要做的事情cuiyaonan2000163.com参考文档:https://www.aliyun.com/product/bigdata/idehttps://help.aliyun.com/document_detail/73015.htmlhttps://help.aliyun.com/document_detail/324149.html ----数据治理LaunchDataWorks基于阿里云…

ECCV 2022|面向精确的主动相机定位算法

标题&#xff1a;ECCV 2022,山东大学、北大、腾讯AILab、斯坦福和三维家联合提出&#xff0c;面向精确的主动相机定位算法项目地址&#xff1a;https://github.com/qhFang/AccurateACL.文章&#xff1a;Towards Accurate Active Camera Localization&#xff08;ECCV 2022&…

oneblog_justauth_三方登录配置【Gitee】

文章目录oneblog添加第三方平台gitee中创建三方应用完善信息oneblog添加第三方平台 1.oneblog管理端&#xff0c;点击左侧菜单 网站管理——>社会化登录配置管理 ,添加一个社会化登录 2.编辑信息如下&#xff0c;选择gitee平台后复制redirectUri,然后去gitee获取clientId和…

vulnhub five86-2

总结&#xff1a;sudo -l&#xff0c;抓流量包&#xff0c;搜索引擎。。 目录 下载地址 漏洞分析 信息收集 网站渗透 ​编辑 反弹shell提权 下载地址 Five86-2.zip (Size: 1.7 GB)Download (Mirror): https://download.vulnhub.com/five86/Five86-2.zip使用&#xff1a;下…

电子台账:模板制作之一——列过滤(水平过滤)

1 简介列过滤即水平过滤。一般情况下&#xff0c;企业数据源文件中有很多数据列&#xff0c;其中大部分数据列中的数据对电子台账来说是没有用的。列过滤就是确定企业数据文件的哪几列有用&#xff0c;以及有用的列分别对应到台账&#xff08;模板&#xff09;的哪一列。列过滤…

FreeSql使用

目的: 1.方库分表 2.主从分离 3.分布式事务 过程&#xff1a; 官网&#xff1a;指南 | FreeSql 官方文档 1.Startup.cs 添加配置&#xff08;本地数据库MySql&#xff09; ConfigureServices&#xff1a; Func<IServiceProvider, IFreeSql> fsql r >{IFreeSql …

吉利银河L7、长城哈弗B07、比亚迪宋Plus DM-i,自主品牌决战混动

2月23日&#xff0c;吉利推出全新的中高端新能源产品序列——吉利银河。当日&#xff0c;吉利推出了首款智能电混SUV「银河L7」&#xff0c;新车将在二季度交付。本月10日&#xff0c;长城汽车也计划举办智能新能源干货大会&#xff0c;其「颠覆技术」等宣传直面新一代的新能源…

SUDO(CVE-2021-3156复现)提权rsync未授权访问提权

一、SUDO(CVE-2021-3156复现 判断漏洞存在&#xff1a; 1.版本 sudo: 1.8.2 - 1.8.31p2 sudo: 1.9.0 - 1.9.5p1 2.报错存在次漏洞 sudoedit -s / 不是报错信息&#xff1a; 复现&#xff1a; 环境&#xff1a;docker的centos7 需要新建一个用户 docker pull chenaot…

k8s学习之路 | Day20 k8s 工作负载 Deployment(下)

文章目录3. HPA 动态扩缩容3.1 HPA3.2 安装 metrics-server3.3 验证指标收集3.4 扩缩容的实现3.5 增加负载3.6 降低负载3.7 更多的度量指标4. 金丝雀部署4.1 蓝绿部署4.2 金丝雀部署4.3 金丝雀部署的实现5. Deployment 状态与排查5.1 进行中的 Deployment5.2 完成的 Deployment…

wordpress更新文章后总是向文章内连接发送GET请求

通过观察wordpress请求发现&#xff0c;wordpress在更新文章后会向文章发送GET请求。在发送请求之前会执行一个调用定时的一个请求POST /wp-cron.php?doing_wp_cron1678081385.6844499111175537109375 HTTP/1.1执行这个定时后&#xff0c;这篇文章的所有链接都会发送HEAD和GET…

源码阅读笔记 InputFormat、FileInputFormat、CombineTextInputFormat

1. InputFormat InputFormat是MapReduce框架提供的用来处理job输入的基类 它主要定义了三个功能&#xff1a; 1.验证job输入是否合法 2.对输入文件进行逻辑切片(InputSplit)&#xff0c;然后将每个切片分发给单独的MapTask 3.提供切片读取器(Re…

Java的注解(Annotation)

Java 注解&#xff08;Annotation&#xff09;又称 Java 标注&#xff0c;是 JDK5.0 引入的一种注释机制。Java 中的类、构造器、方法、成员变量、参数等都可以被注解进行标注。例如JUnit单元测试中的Test方法&#xff0c;可以使得方法直接运行。JUnit单元测试Test单元测试是针…

2023年湖北助理工程师在哪里申报?助理工程师的五大作用你知道吗

2023年湖北助理工程师在哪里申报&#xff1f;助理工程师的五大作用你知道吗 助理工程师申报条件&#xff1a; 大学本科毕业&#xff1a;毕业满一年&#xff0c;工科类专业&#xff0c;6个月以上社保证明 大学专科毕业&#xff1a;毕业满三年&#xff0c;工科类专业&#xff0…

贝塞尔曲线与B样条曲线

文章目录0.参考1.问题起源与插值法的曲线拟合1.1.问题起源1.2.拉格朗日插值1.3.“基”的概念1.4.插值存在的Runge现象2.贝塞尔曲线2.1.控制点的思想2.2.由控制点生成贝塞尔曲线2.3.多个控制点时的贝塞尔曲线公式2.4.贝塞尔曲线的递推公式2.5.贝塞尔曲线的性质3.B样条曲线3.1.B样…

项目设计原则

单一设计原则 做过管理系统项目的同学肯定都接触过用户、机构、角色管理这些模块&#xff0c;实现方式都是基于RBAC模型&#xff08;Role-Based Access Control&#xff0c;基于角色的访问控制&#xff0c;通过分配和取消角色来完成用户权限的授予和取消&#xff0c;使动作主体…

web开发 用idea创建一个新项目

这个写着就是给自己当备忘录用的QAQ 这个老师上课一通操作啥也没看清…卑微搞了半天看样子是成功了 记录一下省的以后忘了怎么创建&#xff08;&#xff1f; zufe lxy 2023.3 先行条件是已经自己装好了Tomcat和idea&#xff01;&#xff01;&#xff08;我的idea是申请了教育…

MSDP实验配置

目录 配置MSDP 配置PIM SM协议 配置各PIM SM域内的静态RP 配置MSDP对等体 配置域内的MSDP对等体 AR8和AR9建立EBGP邻居 配置域间的MSDP对等体 进行实验验证 什么是MSDP MSDP&#xff08;Multicast Source Discovery Protocol&#xff09;组播源发现协议的简称 用来传递…