HTML学习之路-10定位布局

已于 2022-10-28 21:39:20 修改
阅读量1k 收藏 2
点赞数
分类专栏： HTML学习 文章标签： html 学习 css
于 2022-08-25 16:35:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63204687/article/details/126509673
版权

目录

一、定位

a.文档流

b.相关设置

c.定位元素的偏移  

d.定位元素层级

e.定位元素特性

案例1- 相对定位relative

1>没有设置relative

2>设置relative

 3>总结

案例2-绝对定位absolute

1>父级设置相对定位作为子级的参照点

2>父级没有设置则层层向上找，如果没有最后以body为定位

3>总结

 案例3-固定定位fixed

 案例4-定位的层级z-index

二、综合案例

案例1

a.讲解

案例2

a.解析

 案例3-系统弹框

 a.解析

一、定位

a.文档流

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。即简单来说-->文档流：先写的先排序，后写的后排。如果向突破文档流则需要使用定位。

b.相关设置

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

  • relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移，偏移后的是以脱离文档流的形式出现的，而他后面的元素保留为其脱离文档流之前的位置，相当于脱离文档流的元素依然在其前面占了一个位置。

  • absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

  • fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

  • static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。

  • inherit 从父元素继承 position 属性的值。

c.定位元素的偏移  

定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

d.定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级。

e.定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

案例1- 相对定位relative

相对定位：文档流位置保留 相对于本身的位置进行偏移

1>没有设置relative

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 50px auto 0px;
			}
			/* 使用组选择器进行一样的样式整理 */
			.box02,.box01{
				width: 300px;
				height: 100px;
				margin:10px;
			}
			.box01{
				background-color: green;
				/* 相对定位：文档流位置保留 相对于本身的位置进行偏移 */
				/* position: relative;
				left:50px;/* 设置left指的是以左边为基准向右偏移 */ */
			}
			.box02{
				background-color: gold;
			}
		</style>
		<title>定位</title>
	</head>
	<body>
		<div class="con">
			<div class="box01">box01</div>
			<div class="box02">box02</div>
		</div>
	</body>
</html>
<!-- 文档流：先写的先排序，后写的后排 -->
<!-- 突破文档流：定位 -->

2>设置relative

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 50px auto 0px;
			}
			/* 使用组选择器进行一样的样式整理 */
			.box02,.box01{
				width: 300px;
				height: 100px;
				margin:10px;
			}
			.box01{
				background-color: green;
				/* 相对定位：文档流位置保留 相对于本身的位置进行偏移 */
				position: relative;
				left:50px;/* 设置left指的是以左边为基准向右偏移 */
			}
			.box02{
				background-color: gold;
			}
		</style>
		<title>定位</title>
	</head>
	<body>
		<div class="con">
			<div class="box01">box01</div>
			<div class="box02">box02</div>
		</div>
	</body>
</html>
<!-- 文档流：先写的先排序，后写的后排 -->
<!-- 突破文档流：定位 -->

 

 3>总结

以上两端代码的区别在于box01的第二段代码设置了position: relative;同时设置了left=50px;最后的结果是：相对于没有设置的位置进行了一个向右的偏移50px.

案例2-绝对定位absolute

绝对定位：元素脱离文档流(使其他元素忽视该元素的存在)  找父级的元素定位找不到则相对于body进行元素定位

1>父级设置相对定位作为子级的参照点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 50px auto 0px;
				position: relative;/* 父级一般设置相对的作为子级的参照点 */
			}
			.box02,.box01{
				width: 300px;
				height: 100px;
				margin:10px;
			}
			.box01{
				background-color: green;
				/* 绝对定位：元素脱离文档流(使其他元素忽视该元素的存在)  找父级的元素定位找不到则相对于body进行元素定位*/
				position: absolute;/* 设置元素的定位属性 */
				left:50px;
			}
			.box02{
				background-color: gold;
			}
		</style>
		<title>定位</title>
	</head>
	<body>
		<div class="con">
			<div class="box01">box01</div>
			<div class="box02">box02</div>
		</div>
	</body>
</html>
<!-- 文档流：先写的先排序，后写的后排 -->
<!-- 突破文档流：定位 -->

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 50px auto 0px;
			}
			.box02,.box01{
				width: 300px;
				height: 100px;
				margin:10px;
			}
			.box01{
				background-color: green;
				/* 绝对定位：元素脱离文档流(使其他元素忽视该元素的存在)  找父级的元素定位找不到则相对于body进行元素定位*/
				position: absolute;/* 设置元素的定位属性 */
				/* left: 0; */
				
			}
			.box02{
				background-color: gold;
			}
		</style>
		<title>定位</title>
	</head>
	<body>
		<div class="con">
			<div class="box01">box01</div>
			<div class="box02">box02</div>
		</div>
	</body>
</html>
<!-- 文档流：先写的先排序，后写的后排 -->
<!-- 突破文档流：定位 -->

2>父级没有设置则层层向上找，如果没有最后以body为定位

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 50px auto 0px;
			}
			.box02,.box01{
				width: 300px;
				height: 100px;
				margin:10px;
			}
			.box01{
				background-color: green;
				/* 绝对定位：元素脱离文档流(使其他元素忽视该元素的存在)  找父级的元素定位找不到则相对于body进行元素定位*/
				position: absolute;/* 设置元素的定位属性 */
				/* left: 0; */
				
			}
			.box02{
				background-color: gold;
			}
		</style>
		<title>定位</title>
	</head>
	<body>
		<div class="con">
			<div class="box01">box01</div>
			<div class="box02">box02</div>
		</div>
	</body>
</html>
<!-- 文档流：先写的先排序，后写的后排 -->
<!-- 突破文档流：定位 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 50px auto 0px;
			}
			.box02,.box01{
				width: 300px;
				height: 100px;
				margin:10px;
			}
			.box01{
				background-color: green;
				/* 绝对定位：元素脱离文档流(使其他元素忽视该元素的存在)  找父级的元素定位找不到则相对于body进行元素定位*/
				position: absolute;/* 设置元素的定位属性 */
				left: 0;
				top: 0;
				
			}
			.box02{
				background-color: gold;
			}
		</style>
		<title>定位</title>
	</head>
	<body>
		<div class="con">
			<div class="box01">box01</div>
			<div class="box02">box02</div>
		</div>
	</body>
</html>
<!-- 文档流：先写的先排序，后写的后排 -->
<!-- 突破文档流：定位 -->

3>总结

 通过以上代码分析，绝对定位忽视其它元素（可能造成覆盖），

绝对定位的参照点先找各父级有无设置，

如果没有则以body为父级进行偏移。

当然如果没有设置left、top诸如此类的偏移它会依然向普通元素一样排列（以文档流方式只不过忽视其它元素可能覆盖），

只有设置了top它才在垂直上相对于定位了的父级或body进行偏移，

同理只有设置了left才在水平方向上进行偏移

 案例3-固定定位fixed

 固定定位：直接找浏览器窗口进行定位  完全破除文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 50px auto 0px;
				position: relative;/* 父级一般设置相对的作为子级的参照点 */
			}
			.box02,.box01{
				width: 300px;
				height: 100px;
				margin:10px;
			}
			.box01{
				background-color: green;
				/* 固定定位：直接找浏览器窗口进行定位  完全破除文档流*/
				position: fixed;/* 设置元素的定位属性 */
				left:0px;
				top: 0px;
			}
			.box02{
				background-color: gold;
			}
		</style>
		<title>定位</title>
	</head>
	<body>
		<div class="con">
			<div class="box01">box01</div>
			<div class="box02">box02</div>
		</div>
	</body>
</html>
<!-- 文档流：先写的先排序，后写的后排 -->
<!-- 突破文档流：定位 -->
<!-- static相当于取消定位属性或者不设置定位属性 inherit继承父级定位属性-->

 

1>总结

可以这样理解直接以body为参照进行偏移

 案例4-定位的层级z-index

默认层级：后写的排在前写的后面把其盖住了
人为干预层级：z-index，值越大越后面盖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 50px auto 0px;
				position: relative;/* 相对定位，做为子级的参照物 */
			}
			.con div{
				width: 200px;
				height: 200px;
				position: absolute;/* 全部设置绝对定位 */
			}
			.box01{
				background-color: green;
				left: 20px;
				top: 20px;
				/* z-index: 10;/* 层级越大相当于更后面盖 */ */
			}
			.box02{
				background-color: gold;
				left: 40px;
				top: 40px;
			}
			.box03{
				background-color: pink;
				left: 60px;
				top: 60px;
			}
			.box04{
				background-color: yellowgreen;
				left: 80px;
				top: 80px;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="con">
			<div class="box01">box01</div>
			<div class="box02">box02</div>
			<div class="box03">box03</div>
			<div class="box04">box04</div>
			<!-- 默认层级：后写的排在前写的后面把其盖住了 -->
			<!-- 人为干预层级：z-index -->
		</div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 50px auto 0px;
				position: relative;/* 相对定位，做为子级的参照物 */
			}
			.con div{
				width: 200px;
				height: 200px;
				position: absolute;/* 全部设置绝对定位 */
			}
			.box01{
				background-color: green;
				left: 20px;
				top: 20px;
				z-index: 10;/* 层级越大相当于更后面盖 */
			}
			.box02{
				background-color: gold;
				left: 40px;
				top: 40px;
			}
			.box03{
				background-color: pink;
				left: 60px;
				top: 60px;
			}
			.box04{
				background-color: yellowgreen;
				left: 80px;
				top: 80px;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="con">
			<div class="box01">box01</div>
			<div class="box02">box02</div>
			<div class="box03">box03</div>
			<div class="box04">box04</div>
			<!-- 默认层级：后写的排在前写的后面把其盖住了 -->
			<!-- 人为干预层级：z-index -->
		</div>
	</body>
</html>

二、综合案例

案例1


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 100px;
				height: 100px;
				background-color: gold;
				margin: 50px auto 0px;
				position: relative;/* 设置相对定位 */
				border-radius: 14px;/* 有偏角 */
			}
			.box{
				width: 28px;
				height: 28px;
				background-color: red;
				color: aliceblue;
				text-align: center;/* 文字水平居中 */
				line-height: 28px;/* 文字垂直居中 */
				position: absolute;/* 设置绝对定位 */
				left: 86px;
				top: -14px;
				border-radius: 14px;/* 正圆 */
			}
		</style>
		<title>案例</title>
	</head>
	<body>
		<div class="con">
			<div class="box">5</div>
		</div>
	</body>
</html>
<!--定位特性： 绝对定位和固定定位块元素和行内元素会自动装换为行内块元素 -->

 

a.讲解

 

案例2

fixed进行定位类似与参照物为body，事实上并非如此

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.menu{
				height: 80px;
				background-color: gold;
				position: fixed;/* 具有悬浮效果：滑动依然一直停留在页面上方 */
				width: 960px;
				top: 0px;
				/* margin: 0px auto; *//* 对于定位的元素使用margin用不了 */
				left:50%;/*仅仅是最左边的在50%地方 */
				margin-left:-480px;
			}
			p{
				text-align: center;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="menu">菜单文字</div>
		<p>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
		</p>
	</body>
</html>

a.解析

 

 案例3-系统弹框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.menu{
				height: 80px;
				background-color: gold;
				position: fixed;/* 具有悬浮效果：滑动依然一直停留在页面上方 */
				width: 960px;
				top: 0px;
				/* margin: 0px auto; *//* 对于定位的元素使用margin用不了 */
				left:50%;/*仅仅是最左边的在50%地方 */
				margin-left:-480px;/* 在偏移一般即水平居中 */
			}
			p{
				text-align: center;
			}
			.popup{
				width: 500px;
				height: 300px;
				border: 1px solid #000;
				background-color: #fff;
				position: fixed;
				/* 设置垂直和水平居中 */
				left: 50%;
				margin-left: -251px;
				top: 50%;
				margin:-151px;
				z-index: 999;/* 设置层级最大 */
			}
			.popup h2{
				background-color: gold;
				margin: 10px;
				height: 40px;
				
			}
			.mask{
				position: fixed;
				width: 100%;
				height: 100%;
				background-color: #000;
				left: 0;
				top: 0;
				opacity: 0.5;/* 透明度 */
			}
			.pop-con{
				display: ;/* 藏东西 */
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="menu">菜单文字</div>
		<div class="pop-con">
			<div class="popup">
				<h2>
					弹框的标题
				</h2>
			</div>
			<div class="mask"></div>
		</div>
		
		<p>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
			网页文字
			<br><br><br><br><br><br><br><br>
		</p>
	</body>
</html>

 a.解析

『Knight』
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
定位position（前面布局无法实现
采菊东篱下，Python满乾坤！
08-29 822
文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 定位： 1、relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 2、absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解
定位的概念（HTML）
原地起飞
07-31 1483
文章目录前言HTML中为什么需要定位？一、定位1.定位的组成2.定位模式1、static 静态定位 (默认)2、relative 相对定位3、absolute 绝对定位4、fixed 固定定位5、粘性定位sticky （了解）总结 前言 HTML中为什么需要定位？ 1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子 一、定位 1.定位的组成 定位=定位模式+边偏移 &nbs
Html position（static | absolute | fixed | relative）定位
weixin_34051201的博客
03-16 124
语法： position : static | absolute | fixed | relative 参数： static : 无特殊定位，对象遵循HTML定位默认规则 absolute : 绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于posit...
html区块元素置顶,HTML区块
weixin_29223603的博客
06-03 187
HTML 和HTML 可以通过 和 将元素组合起来。HTML 区块元素大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始(和结束)。实例: , , , HTML 内联元素内联元素在显示时通常不会以新行开始。实例: , , , HTML 元素HTML 元素是块级元素，它可用于组合其他 HTML 元素的容器。 元素没有特定的含义。除此之外，由于它属于块...
html页面布局
墨城烟柳ベ旧人殇的博客
04-12 6982
本文主要是用HTML语言实现页面布局。
CSS学习之五 定位布局
12-03
在CSS布局中，定位是控制元素在网页上精确位置的关键技术。本文主要聚焦于CSS的定位属性，特别是`position`属性及其不同的值：`static`、`relative`、`absolute`和`fixed`。 首先，`position`属性的默认值为`static...
css-弹性盒布局的深度学习
最新发布
08-01
【CSS 弹性盒布局深度学习】 在网页设计中，CSS 弹性盒布局（Flexbox）是一种现代的布局模式，旨在提供灵活、响应式的页面布局解决方案。自2009年W3C提出以来，它已成为业界首选的布局方式，并被所有主流浏览器广泛...
HTML-academy-marathon:布局https
05-14
HTML-academy-marathon是一个专注于HTML学习的马拉松活动，可能包含一系列课程、练习和挑战，旨在帮助学习者掌握HTML布局技巧。在这个马拉松活动中，重点是理解并实践如何通过HTML来构建网页布局。 在HTML中，布局...
css布局 之 流式布局-原子风格
12-19
在“css布局 之 流式布局-原子风格”这个主题中，我们将深入探讨如何利用JavaScript来模拟Poki Game官网的流式布局，尽管该官网原版使用了更为灵活但可能更复杂的CSS Grid布局。 首先，我们需要理解流式布局的基本...
HTML 定位
m0_65066169的博客
10-09 3409
代码中我加了3个盒子 #a、#b、#c , 根据上面的position:relative;来开启相对定位,根据属性 方向的值来进行移动,比如我上面写的向 top 和left 你也可以根据自己需要等待来进行移动。left: 向左 right: 向右 top: 向上 bottom: 向下。top: 向下 bottom: 向上 left: 向右 right: 向左。以上的定位根据自己的需要来使用,多动手,拜拜了,下次见!固定定位: position: fixed;
html5定位实例资源
06-21
html5定位实例
HTML的relative与absolute使用及区别详解
01-19
HTML的relative与absolute区别：说实话html这门语言算的上是这个世界上最简单的一门语言了，标签语言嘛，就是标签多了点英文单词超多，不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是还是有一些比较难理解掌握标签和属性，就比如属性position,它是定位的一种方式代码如下： #div1{ position: relative; width: 200px; height: 200px; background-color: blueviolet; margin-left: 100px; }  先来
html 布局-相对位置及绝对位置,html 布局-相對位置及絕對位置
weixin_29195217的博客
06-09 605
來源：http://zhykhs.javaeye.com/blog/338563Div + CSS Example, Wayhome's Blogposition: absolute;top: 5px;right: 20px;position: absolute;left: 20px;bottom: 10px;position: absolute;top: 5px;left: 5px;positi...
HTML布局方式：定位
weixin_69761220的博客
05-16 1073
定位
html如何设置绝对定位,css教程之绝对定位使用详解
weixin_29635155的博客
06-07 5784
一.基本概念:如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位绝对是快刀斩乱麻，因为绝对定位可以使一个对象脱离正常的文档流，好像是漂浮在正常文档流的上空,并相对于包含此对象的元素进行定位，当然这个定位相对元素在不同的情况下也有所不同。二.如何将一个元素设置为绝对定位:为对象添加如下属性即可将对象设置为绝对定位:复制代码代码如下:position:absolute;...
HTML5定位实例
swiftwwj的博客
01-19 746
幽灵按钮—知识点：定位<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ margin: 0; pad
HTML+CSS实现定位小案例
菜鸟初养成的博客
07-22 1399
定位实现鼠标滑过图片等比例放大，显示在原尺寸图片的上方。 起始状态 实现状态 代码实现 <style type="text/css"> img{ border: 0; width: 100px; height: 75px; } .box{ width: 600px; height: 300px; margin: 100px auto; ...
HTML基础知识（五）——position定位
热门推荐
weixin_48683052的博客
09-15 1万+
一、定位 1、常见的定位布局有float布局，position布局，flex（弹性盒子）布局。 position布局，定位布局。 2、定位布局：定位指的是指定一个元素在网页上的位置； 3、一共有5种定位方式，也就是说position属性主要有五个值： （1）static （2）relative （3）fixed （4）absolute （5）sticky （...
定位属性
flqbestboy的专栏
08-02 1636
position 定位属性，检索对象的定位方式； 一、语法：position：static /absolute/relative/fixed 取值： 1、static：默认值，无特殊定位，对象遵循HTML原则； 2、absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父
学习CSS布局定位与装饰技巧-教程V1.0
CSS布局定位和装饰是网页设计中非常重要的一部分，通过不同的定位方式和装饰效果可以实现丰富多样的页面布局和美观的界面风格。 在CSS中，定位有多种方式，常见的有静态定位、相对定位、绝对定位、固定定位等。静态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

『Knight』

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值