小李带你玩转html—08

最新推荐文章于 2024-04-24 09:27:42 发布
最新推荐文章于 2024-04-24 09:27:42 发布
阅读量107 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44171009/article/details/110174544
版权

定位

css布局：盒模型、浮动、定位
辅助的功能属性：文本、a、背景等
定位：相对定位、绝对定位、固定定位
脱标：浮动、绝对定位、固定定位
  • 相对定位

定位：元素位置相对于某一参照物进行的位置偏移
相对定位：元素相对于自身的相对偏移
position：定位
属性值：relative 相对的
偏移的数据量由其他属性来表示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background: pink;
			margin-bottom: 10px;
		}
		.box{
			background: skyblue;
			position: relative;
			left: 100px; //向右移动了100px 一个盒子的宽度
			top: 110px;	//像下移动了110px 一个盒子的高度加margin值
		}
	</style>
	<body>
		<div>1</div>
		<div class="box">2</div>
		<div>3</div>
		<div>4</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background: pink;
			margin-bottom: 10px;
		}
		.box{
			background: skyblue;
			position: relative;
			/*left: 100px;
			top: 110px;*/
			right: 20px;
			bottom: 20px;
		}
	</style>
	<body>
		<div>1</div>
		<div class="box">2</div>
		<div>3</div>
		<div>4</div>
	</body>
</html>

在这里插入图片描述
定位改变之后的图片不会被下面的图片顶掉

  • 绝对定位

绝对定位的定位参考元素,绝对定位从左上角算起
属性值：absolute
也有四个方向的偏移值：left right top bottom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
	</head>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		div{
			width: 100px;
			height: 100px;
			background: pink;
			margin-bottom: 10px;
		}
		.box{
			background: skyblue;
			position: absolute;
			top: 100px;
			left: 100px;
		}
	</style>
	<body>
		<div>1</div>
		<div class="box">2</div>
		<div>3</div>
		<div>4</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
	</head>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		div{
			width: 100px;
			height: 100px;
			background: pink;
			margin-bottom: 10px;
		}
		.box{
			background: skyblue;
			position: absolute;
			top: 100px;
			/*left: 100px;*/
			right: 100px;
		}
	</style>
	<body>
		<div>1</div>
		<div class="box">2</div>
		<div>3</div>
		<div>4</div>
	</body>
</html>

在这里插入图片描述

特点：与相对定位比较，元素绝对定位之后，脱离标准流，标准流的位置让给了后面的元素

  • 用绝对定位制作压盖效果
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>压盖效果</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			padding: 20px;
			margin: 100px auto;
			position: relative;
		}
		.box .demo1{
			width: 400px;
			height: 400px;
			background: skyblue;
		}
		.box .demo2{
			width: 100px;
			height: 30px;
			background:gold;
			position: absolute;
			left: 160px;
			bottom: 40px;
		}
		
	</style>
	<body>
		<div class="box">
			<div class="demo1">
				
			</div>
			<div class="demo2">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

  • 盒子居中
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子居中</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			padding: 20px;
			margin: 100px auto;
			position: relative;
		}
		.box .demo1{
			width: 400px;
			height: 400px;
			background: skyblue;
		}
		.box .demo2{
			width: 100px;
			height: 100px;
			background:gold;
			position: absolute;
			left: 50%;
			bottom: 50%;
			margin-left: -50px;
			margin-bottom:-50px
		}
		
	</style>
	<body>
		<div class="box">
			<div class="demo1">
				
			</div>
			<div class="demo2">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

  • 固定定位
    参考浏览器的窗口进行定位
    属性值：fixed
    始终保持针对浏览器某一个顶点位置相对不变
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;	
			}
			.box{
				position: fixed; //针对浏览器固定定位
				
				/*bottom: 300px;*/
				left: 80px;
				width: 80px;
				height: 80px;
				background: #ccc;
				line-height: 80px;
				font-size: 28px;
				color: #333;
				text-decoration: none;
				text-align: center;
				margin-top: 800px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		
		<a  href="#">
			Top
		</a>
		</div>
		<p><img src="images/A1 (1).jpeg" alt="" /></p>
		<p><img src="images/A1 (2).jpeg" alt="" /></p>
		<p><img src="images/A1 (3).jpeg" alt="" /></p>
		<p><img src="images/A1 (4).jpeg" alt="" /></p>
		<p><img src="images/A1 (5).jpeg" alt="" /></p>
		<p><img src="images/A1 (6).jpeg" alt="" /></p>
		<p><img src="images/A1 (7).jpeg" alt="" /></p>
		<p><img src="images/A1 (8).jpeg" alt="" /></p>
	</body>
</html>

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

  • 压盖顺序 z-index
    默认压盖顺序：
    ①有定位的元素的压盖没有定位的元素
    ②有定位的元素，不区分定位类型，压盖顺序按书写顺序来写
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>默认压盖顺序</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 300px;
				height: 300px;
				background: pink;
			}
			.box2{
				width: 200px;
				height: 200px;
				background: skyblue;
				position: relative;
				left: 0;
				bottom: 300px;
			}
			.box3{
				width: 150px;
				height: 150px;
				position: absolute;
				top: 0;
				left: 0;
				background: yellowgreen;
			}
			.box4{
				width: 100px;
				height: 100px;
				position: fixed;
				top: 0;
				left: 0;
				background: gold;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
</html>

在这里插入图片描述

  • 自定义压盖顺序
    属性：z-index,压盖顺序
    属性值：数字，数字大的压盖数字小的
  • 只能给定位的元素使用，默认的z-index值是1
  • 如果属性值相同，看书写顺序
  • 父子盒模型里，如果父子都有定位，都有自定义z-index值，看父盒子的z-index数值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义压盖顺序</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 300px;
				height: 300px;
				background: pink;
			}
			.box2{
				width: 200px;
				height: 200px;
				background: skyblue;
				position: relative;
				left: 0;
				bottom: 300px;
				z-index: 2;
			}
			.box3{
				width: 150px;
				height: 150px;
				position: absolute;
				top: 0;
				left: 0;
				background: yellowgreen;
				z-index: 3;
			}
			.box4{
				width: 100px;
				height: 100px;
				position: fixed;
				top: 0;
				left: 0;
				background: gold;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
</html>

在这里插入图片描述

Hacker white
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础
zzbdkl的博客
01-23 1008
html基础知识内容，适合小白
小李动态表情 小李动态表情包 v2.0
11-08
小李子莱昂纳多拿到了奥斯卡,正如小编预想的铺天盖地的朋友圈、微博、报道全是。但之后小凡发现剧情不对了,各种怀念小李子陪跑表情包的相继出现，下面是小凡整理制作的小李动
html移动端页面布局,web页面常用布局（pc端布局和移动端布局）
weixin_32264185的博客
06-03 1133
w件览客需和下于有快都业视的事一房望站是有eb页面常用布局(pc端布局和移动端布抖要支圈者器说是事天开的。年后编定功口小发还局)什么是web布局呢？布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：1碎前整要们开自近事端个广的的带近事端个广、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边...
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6142
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 50万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
html5文本/块级居中问题
weixin_54555405的博客
01-25 400
文本居中 单行文本居中一 设置line-height=height，如下代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ width: 300px; he
小李QQ表情 小李QQ表情包 v2.0
11-08
从青葱岁月努力到大腹便便，奥斯卡欠他一座小金人，这是粉丝的心声！从19岁获得优质个奥斯卡男配角提名，到多年来为了一个奖项而不断地改变，小李的内心OS又有着怎样的起伏，他
JAVA作业1小李打怪物.docx
08-23
作业一:小李打妖怪 需求: 1、角色可向怪物实施攻击，一次攻击后，怪物损失部分healthpoint,当healthpoint损完后， 怪物死亡。 2、角色可装备不同武器，目前有木剑，铁剑和魔剑三种。 3、角色每次用木剑攻击,怪物损失...
小李的数据库之旅（上）
12-14
　小李是这个大学计算机科学与技术系的知名学生，他的编程能力了得，使用Pascal 炉火纯青，这都是高中期间参加青少年信息学奥林匹克竞赛打下的底子， 虽然没有获过奖，但在80年代末，90年代初很多人都不知道计算机...
html css js 3d元素周期表源码
05-10
html css js 3d元素周期表源码
html+css+js爱心代码
jiangcr123的博客
11-06 1万+
最近好像爱心代码很火
推荐一个在线制作网页背景图的工具
小李专栏
10-06 2747
<!-- google_ad_client = "pub-7343546549496470";/* 728x90, 大横幅正文上方 */google_ad_slot = "4725362798";google_ad_width = 728;google_ad_height = 90;// -->    这个网站最大的特色是在白色的背景下
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 639
【代码】用html写一个旋转菜单。
Web前端开发之HTML_3
zx1026409886的博客
04-23 903
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML随机点名程序
m0_65992344的博客
04-22 320
HTML随机点名程序
如何创建响应式HTML电子邮件模板
晓风晓浪
04-20 1174
在这个适合初学者的指南中，你将学习如何创建一个响应式电子邮件模板。你将跟随逐步说明以及代码片段设计一个在任何设备上都看起来很棒的电子邮件模板。这个项目非常适合渴望掌握电子邮件设计基础的新手！（本文视频讲解：java567.com）
HTML使用jQuery实现两个点击按钮，分别控制改文本字体颜色和字体大小
m0_65992344的博客
04-22 524
jQuery 是一个广泛使用的 JavaScript 库，旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。
html笔记 ai问答
qq_50437196的博客
04-23 425
在HTML中，`text-align: center` 属性是用来设置内联内容（比如文本或链接）在其块级容器（比如`<div>`, `<p>`, 或 `<h1>` 等）内部水平居中的。- `$("p span")`会选择所有位于`p`元素内的`span`元素，无论`span`元素嵌套在`p`元素内部的深度如何。在这个例子中，尽管 `text-align: center` 是应用在 `<h1>` 上的，但 `<span>` 作为内联元素会继承这个对齐方式，从而使得其中的文本居中。
前端入门：HTML（列表和边框案例）
yscy0801的博客
04-22 402
新手前端适合买什么笔记本？28岁转前端来得及吗？前端面试如何谈高薪？大厂前端招聘中的内幕在线解答问题
考考小李ctfxss漏洞
07-25
很高兴回答你的问题。对于CTF（Capture The Flag）比赛中的漏洞，我可以提供一些基本的信息。CTF比赛是一个网络安全竞赛，旨在通过解决各种网络安全挑战来测试参赛者的技能。 在CTF比赛中，常见的漏洞类型包括但不...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值