第五次web前端学习笔记

最新推荐文章于 2024-05-05 13:08:08 发布

金清泽

最新推荐文章于 2024-05-05 13:08:08 发布

阅读量124

点赞数 2

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/m0_53752829/article/details/112852663

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

学习目标：

掌握css的定位和层级显示

学习内容：

1、固定定位 2、绝对定位 3、相对定位 4、元素的显示方式 5、元素的层级

学习时间：

2021年1月6日

学习产出：

1、技术笔记 1遍 2、CSDN 技术博客 1 篇 3、制作58同城登录界面

固定定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 700px;
				height: 700px;
				border: 1px solid red;
			}
			/* 固定定位 */
			#d2{				
				width: 80px;
				height: 40px;
				line-height: 30px;
				text-align: center;
				background-color: #ccc;
				/* 开始固定定位  
				   fixed 生成绝对定位的元素，相对于浏览器窗口进行定位 */
				position: fixed;
				right: 5px;
				bottom: 30px;
				
			}
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<h1>我是h1</h1>
		<p>我是p1</p>
		<p>我是p2</p>
		<div id="d1">
			<div id="d2">
				<a href="#">回到顶部</a>
			</div>
		</div>
		
	</body>
</html>

绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 绝对定位：绝对定位元素位置相对于已经定位的最近的父元素
			(如果参照最近的父元素,那么父元素必须开启定位)如果祖先元素没有开启定位,
			 那么参照的位置可能是画布可能是html 
			 注意：开启绝对定位的元素和文档流没有关系，所以它们可能会覆盖其他元素
			
			*/
			div{
				width: 400px;
				height: 300px;
				border: 1px solid red;	
				/* 生成相对定位的元素，相对于其正常位置进行定位。 */
				position: relative;
			}
			p{
				/* 开启绝对定位 */
				/* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 */
				position: absolute;
				bottom: 30px;
				width: 400px;
				background-color: #CCCCCC;
				text-align: center;
				line-height: 30px;
			}
		</style>
		
	</head>
	<body>
		<div id="">
			<img src="img/book1.jpg" >
			<p>书山有路勤为径</p>
		</div>
	</body>
</html>

相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
			相对定位：相对上一次的位置进行（x y）的偏移
			注意：无论如何偏移相对定位不会释放自己所占的位置，也就是说相对定位不会脱离文档流。 
			除了浮动定位相对定位，固定定位，绝对定位开始使用postion
			 
			 */
			#d1,#d2{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			#d1{
				/* 给d1开启相对定位 */
				position: relative;
				/* 上下左右都可以设置偏移量 */
				top: 150px;
				right: 5px;
				
			}
		</style>
	</head>
	<body>
		<div id="d1">
			我是d1
		</div>
		<p>定位时观察我的位置</p>
		<div id="d2">
			
		</div>
	</body>
</html>

元素的显示方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
				块元素：从上到下排列
				行内元素:从左到右，不能设置宽高(span,a)
				行内块:从左到右，可以设置宽高(input,img)
				
				display来设置元素的显示方式，可取值有:
				none:不显示该元素,释放其占用位置
				block：将元素设置为块元素
				inline:将元素设置为行内元素
				inline-block:将元素设置为行内块元素
			 */
			#d1,#d2{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/* 将块元素装换位行内块元素 */
				/* display: inline-block; */
				display: inline;
			}
			#d3{
				width: 500px;
				height: 500px;
				border: 1px solid yellow;
			}
			img{
				width: 200px;
				height: 300px;
				/* 行内块元素转换为块元素 */
				display: block;
			}
			/* 元素的隐藏 */
			#d4{
				width: 200px;
				height: 200px;
				background-color: #006666;
				display: none; 
			}
			
		</style>
	</head>
	<body>
		<div id="d1">d1</div>
		<div id="d2">
			d2
		</div>
		<div id="d3">
			<img src="img/book3.jpg" >
			<img src="img/book2.jpg" >
		</div>
		<div id="d4">
			
		</div>
		<p>观察我的位置</p>
	</body>
</html>

元素的层级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
			 
				z-index:可以设置元素的层级,值为整数，z-index的值越大那么元素层级越高,如果元素的层级一样，则优先显示靠下的元素。
				祖先元素的层级再高，也不能覆盖子元素。
			 
			 */
			/* .box1{
				width: 400px;
				height: 200px;
				background: #bfa;
				position: absolute;
				
			}
			.box2{
				width: 300px;
				height: 200px;
				background-color: green;
				position: absolute;
				
				
			} */
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				z-index: 5;
				
			}
			.box4{
				width: 100px;
				height: 100px;
				background-color: orange;
				position: absolute;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3
			<div class="box4">
				4
			</div>
		</div>
	</body>
</html>

金清泽

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第五次web前端学习笔记

学习目标：提示：这里可以添加学习目标例如：一周掌握 Java 入门知识学习内容：提示：这里可以添加要学的内容例如：1、搭建 Java 开发环境2、掌握 Java 基本语法3、掌握条件语句4、掌握循环语句学习时间：提示：这里可以添加计划学习的时间例如：1、周一至周五晚上 7 点—晚上9点2、周六上午 9 点-上午 11 点3、周日下午 3 点-下午 6 点学习产出：提示：这里统计学习计划的总量例如：1、技术笔记 2 遍2、CSDN 技术博客 3 篇
复制链接

扫一扫