css05_浮动

最新推荐文章于 2024-07-19 15:50:46 发布
最新推荐文章于 2024-07-19 15:50:46 发布
阅读量76 收藏 1
点赞数
分类专栏： web 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36366618/article/details/120272836
版权

文章目录

浮动

浮动，就是让块级元素可以“并排"在一行，让行内元素可以设置宽/高属性。(浮动就是让盒子漂浮在父盒子上方不在父盒子里面)

1、浮动的性质

  • 1、浮动的元素脱标（脱离标准文档流）
  • 2、浮动的元素互相贴靠(要浮动就都浮动)
  • 3、浮动的元素有字围现象(浮动的元素可以挡住盒子(没有浮动的)，但是不会挡住盒子里面的字，字后显示在浮动盒子之后，这个叫做字围效果)
  • 4、浮动的元素，默认宽/高度为文字的宽/高度，没有文字则宽/高为0(非常像行内元素)
  • 5、元素增加浮动后会影响父元素的显示效果，所以需要清除浮动

eg：
性质2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box {
            background-color: pink;
        }
        .box2 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box2"></div>
</div>
</body>
</html>

效果
image
性质3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box {
            background-color: pink;
        }

        .box2 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div class="box">b
    <div class="box2"></div>
</div>
</body>
</html>

效果
image

性质4

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box3{
			float: left;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="box3">我是文字</div>
</body>
</html>

效果图
image
说明：没浮动的宽度应该是占满整个屏幕的，浮动后只占文字的宽度。

2、分类

左浮动

float: left;

右浮动

float：right; //向右靠

实现：给标签添加float属性：设置左浮动和右浮动，表示当前标签实现了浮动，可以并排展示。

<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>

css

<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			background-color: pink;
		}
		.box2{
			width: 300px;
			height: 300px;
			border: 1px solid green;
			background-color: blue;
		}
	</style>

效果图：
image
box1和box2要分别占一行

给box1、box2添加float属性，设置为left，(两个标签都要添加，只添加一个没用)则这2个div就可以并列在一行

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box1{
		<!--左浮动，向左靠-->
			float: left;
			width: 200px;
			height: 200px;
			border: 1px solid red;
			background-color: pink;
		}
		.box2{
			float: left;
			width: 300px;
			height: 300px;
			border: 1px solid green;
			background-color: blue;	
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

image

3、浮动的影响(弊端)

主要是对父元素的影响

  • 1、背景无法显示
    由于浮动的设置，如果对父级设置了CSS 背景 background、CSS背景颜色或CSS背景图片，则父级元素将不能被撑开，所以导致CSS背景不能显示。
  • 2、边框无法撑开
    如果父级设置了CSS边框 border 属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
  • 3、margin、padding 设置值无法正确显示
    由于浮动的设置，导致父级子级之间设置了 margin 或 padding 属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

4、浮动的清除

子元素增加浮动后会影响父元素标准文档流特性，需要通过清除浮动去解决。原因：因为浮动的元素，不在包裹它的父盒子里面，导致父盒子高度为0
清除浮动就是让子元素的浮动不影响父元素的布局

eg：
现在有两个div，div标签没有任何属性，每个div里都有li，这些li都是浮动的

<<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		li{
			float: left;
			width: 150px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>html</li>
			<li>css</li>
			<li>javaScript</li>
			<li>设计模式</li>
		</ul>
	</div>
	<div>
		<ul>
			<li>英语水平</li>
			<li>面试技巧</li>
			<li>学习方法</li>
		</ul>
	</div>
</body>
</html>

image
我们本以为这些li，会分成2排，但是显示效果是只有一排。第二个div中的li去贴第一个div中最后一个li的边了
产生原因： div没有高度,高度为0，不能给自己浮动的孩子一个容器

1、给浮动元素的祖先元素加高度(高度要不能小于浮动的子元素)

如果一个元素要浮动，那么它的父亲元素一定要有高度
有高度的盒子，才能关住浮动。(哪个父盒子没有高度就给哪个添加)
网页制作中，高度很少出现，为什么？因为能被内容撑高。所以通过加高度清除浮动用的很少

2、给浮动元素的父标签加上 clear:both;属性

clear:left      在左侧不允许浮动元素。
clear:right    在右侧不允许浮动元素。
clear:both    在左右两侧均不允许浮动元素。
clear:none    默认值。允许浮动元素出现在两侧。
clear:inherit   规定应该从父元素继承 clear 属性的值。

给父盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响(2个盒子时，给后边的父盒子加，单给前面的父盒子加没有效果)。

eg：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		li{
			float: left;
			width: 150px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
		.box2{
			/*clear:清除浮动 left：清除左浮动，right：清除右浮动，both：清除全部*/
			/*清除别人对我的影响*/
			clear: both;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>html</li>
			<li>css</li>
			<li>javaScript</li>
			<li>设计模式</li>
		</ul>
	</div>
	<div class="box2">
		<ul>
			<li>英语水平</li>
			<li>面试技巧</li>
			<li>学习方法</li>
		</ul>
	</div>
</body>
</html>

效果
image
弊端：加clear: both;属性的盒子设置margin属性失效

3、隔墙法(外墙法和内墙法)

1、外墙法

在两部分浮动元素中间，建一个墙，隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素(即实现分行显示)。墙用自己的身体当做了间隙。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
/*清除默认的外边距和内边距*/
		margin: 0px;
		padding: 0px;
		}
		li{
			float: left;
			width: 150px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
		.cl{
			/*清除浮动，在这里设置margin是没有效果的，只能通过另外一个类选择器设置*/
			clear: both;
		}
		.h10{
			/*设置height属性，代替失效的margin属性*/
			height: 10px;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>HTML</li>
			<li>css</li>
			<li>JavaScript</li>
			<li>设计模式</li>
		</ul>
	</div>
    <!--c1就是一堵墙-->
	<div class="cl h10"></div>
	<div class="box2">
		<ul>
			<li>学习方法</li>
			<li>英语水平</li>
			<li>面试技巧</li>
			
		</ul>
	</div>
</body>
</html>

效果图
image

  • 用clear:both;属性修饰的元素之前的浮动元素的父元素没有高度，(该没高度的还是没高度)
  • 弊端：位于新增的块元素（“墙”）前面的元素无法使用margin-bottom，而后面的元素却可使用margin-top。两个div之间，没有任何的间隙了。就需要设置height属性或者用"内墙法"去增加margin.
2、内墙法 就是将墙修在标签里面，而不是在2个标签中间
  • 哪个盒子需要高，就在哪个盒子里面添加(加在最后)
  • 内墙法比外墙法的优点是让被添加的盒子有高度(可以通过审核元素查看)
  • 这个方法可以使位于新增的块元素（“墙”）前面的元素使用margin-bottom，后面的元素也可使用margin-top。
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{

/*清除默认的外边距和内边距*/
		margin: 0px;
		padding: 0px;
		}
		li{
			float: left;
			width: 150px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
		.cl{
			/*清除浮动，在这里设置margin是没有效果的，只能通过另外一个类选择器设置*/
			clear: both;
		}
		.h10{
			/*设置height属性，代替失效的margin属性*/
			height: 10px;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>HTML</li>
			<li>css</li>
			<li>JavaScript</li>
			<li>设计模式</li>
		</ul>
		<!--c1就是一堵墙-->
		<div class="cl h10"></div>
	</div>
		
	<div class="box2">
		<ul>
			<li>学习方法</li>
			<li>英语水平</li>
			<li>面试技巧</li>
			
		</ul>
	</div>
</body>
</html>

效果图
image
弊端：虽然内墙法可以很好的实现清除浮动，但也带来不好的一点：增加了额外多余的标签
一个父亲，是不能被浮动的儿子撑起高的 但是加一个墙可以撑起

4、overflow:hidden 清除浮动

overflow属性
  • overflow：hidden；表示溢出隐藏，隐藏子盒子超出父盒子的边界的内容
    • overflow就是溢出的意思，hidden就是隐藏的意思
    • 溢出边框的内容都隐藏掉，(当前盒子添加overflow：hidden属性，其子盒子溢出的部分隐藏)
<!DOCTYPE html>
<html>
<head>
	<title>清除浮动4</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 300px;
			border: 2px solid red;
		}
		/*img{
			float: left;
		}*/
	</style>
</head>
<body>
	<div>
		有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。
		有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。
		有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。
	</div>
</body>
</html>

效果图
image
加上overflow: hidden;属性

<!DOCTYPE html>
<html>
<head>
	<title>清除浮动4</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 300px;
			border: 2px solid red;
			overflow: hidden;
		}
		/*img{
			float: left;
		}*/
	</style>
</head>
<body>
	<div>
		有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。
		有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。
		有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。
	</div>
</body>
</html>

效果图
image
本意就是清除溢出到盒子外面的文字，包括图片
一个父亲不能被自己浮动的儿子撑出高度，但是只要给父亲(是父亲不是祖先)加上overflow:hidden，那么，父亲就能被儿子撑出高了。

使用overflow:hidden清除浮动
  • 给浮动元素的父盒子添加属性：overflow:hidden(所有的都要添加，而不是只给后面的添加)；
    给需要高度的盒子加
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
		.box1{
			width: 400px;
			border: 10px solid black;
		}
		.p1{
			float: left;
			width: 100px;
			height: 200px;
			background-color: yellow;
		}
		.p2{
			float: left;
			width: 100px;
			height: 250px;
			background-color: blue;
		}
		.p3{
			float: left;
			width: 100px;
			height: 150px;
			background-color: red;
		}
	</style>
</head>
<body>

</body>
	<div class="box1">
		<p class="p1"></p>
		<p class="p2"></p>
		<p class="p3"></p>
	</div>
</html>

效果图
image
子元素浮动，导致父元素不能被撑开

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
		.box1{
			width: 400px;
			border: 10px solid black;
			overflow: hidden;
		}
		.p1{
			float: left;
			width: 100px;
			height: 200px;
			background-color: yellow;
		}
		.p2{
			float: left;
			width: 100px;
			height: 250px;
			background-color: blue;
		}
		.p3{
			float: left;
			width: 100px;
			height: 150px;
			background-color: red;
		}
	</style>
</head>
<body>

</body>
	<div class="box1">
		<p class="p1"></p>
		<p class="p2"></p>
		<p class="p3"></p>
	</div>
</html>

效果图
image

5、伪元素：clearfix

  • 浮动盒子的给父标签添加class属性值为：clearfix，清除对其他盒子的影响
.clearfix:after{
content:".";            /*内容设置为空！！！*/
display: block;        /*显示为块级元素！！！*/
height: 0;
visibility: hidden;  
clear: both;         /*清除浮动！！！*/
}

说明：以上注释部分的代码为必须，一般情况下，通过3行代码 content: “”; display: block; clear: both; 便可实现。

需要注意的是，如果在IE6和IE7浏览器上使用，则需给clearfix添加一条属性以触发haslayout。

<style>
.clearfix:after{
...
zoom: 1;
}
</style>

所以完整版如下

.clearfix:atrer{
    content:".";            /*内容设置为空！！！*/
    display: block;        /*显示为块级元素！！！*/
    height: 0;
    visibility: hidden;  
    clear: both;         /*清除浮动！！！*/
}
<!--兼容IE6、IE7浏览器-->
.clearfix{
    Zoom:1
}

属性说明

  • :after 选择器向选定的元素之后插入内容(给clearfix盒子内部末尾添加一个盒子after)
  • content:""; 生成内容为空
  • display: block; 生成的元素以块级元素显示,
  • clear:both; 清除前面元素浮动带来的影响

相对于空标签闭合浮动的方法
优势：不破坏文档结构，没有副作用，避免多余标签的使用，可以兼容大部分浏览器
弊端：代码量多

6、双伪元素

给父标签添加class属性值为：clearfix
css

<!--给尾部和头部各添加一个盒子-->
.clearfix:before,.clearfix:after {  /*清除浮动*/
    content:"";
    display:table;/*此元素会作为块级表格来显示（类似 <table>）*/
}
<!--给尾部添加一个盒子-->
.clearfix:after{clear:both;}
<!--兼容ie6-->
.clearfix{
    *zoom:1;/*IE/7/6*/
}

总结：

  1. 浮动的元素，只能被有高度的盒子关住，也就是说，如果盒子内部有浮动，这个盒子有高，那么浮动就不会相互影响，但是工作上，我们绝不会给盒子加高度，只是因为麻烦，并且不能适应页面的快速变化。所以我们就需要找到不给盒子加高度，但是也能够清除浮动的方法。

IE6，7兼容问题

1. ie6，7不支持小于12px的盒子，任何小于12px的盒子在ie6中显示效果都大，调不小。

解决方法：将盒子的字号设置小。

height:4px;
font-size;0px;
ie6的hack(下划线属性)
  1. 浏览器hack:hack就是“黑客",就是使用浏览器提供的后门，针对某一种浏览器做兼容。 下划线是ie6专门的hack
    ie6留了一个后门：只有在css属性之前，加一个下划线"_",这个就是ie6认识的专属属性，其他浏览器不认识。
    比如：
//这个带下划线的css属性只在ie6浏览器上面有效，其他浏览器无效
-background-color:green;

ie6解决微型盒子完整写法：

  height:4px;
 _font-size;0px;

2、 ie6不支持overflow：hidden；清除浮动

解决方法：加上zoom属性：放大当前页面倍数 2就是放大2倍，3就是放大3倍 1就是不放大

overflow:hidden;
//放大一倍，即不放大
_zoom:1;

_zoom:1；能够触发浏览器的HasLayout机制，这个机制只有ie6有。
注意：overflow：hidden;的本意溢出盒子的内容自动隐藏，这个功能ie6是兼容的，不兼容的overflow:hidden;清除浮动的功能

Luuuzi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础(15)_浮动
no15870678621的博客
04-03 984
浮动
css上下左右浮动_浮动-CSS中的左右
cunfen6312的博客
07-29 4900
css上下左右浮动 浮动-CSS中的左右 (Float - right & left in CSS) float property is used to decide which element floats and which doesn't. float属性用于确定哪个元素浮动，哪个元素不浮动。 It's value can either be left or right. An...
CSS_浮动排版布局
白雪
11-18 1293
当在排版布局时，abc都用了float，此时abc相当于脱离父元素浮出来了，但是d没有使用浮动，就会出现d的一部分处在abc的下面(因为abc浮上去了),d就被遮住了一部分，这时候有几种处理方法： （1）在abc的外层加上一层父元素，并设定高度 <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> .outer{ height: 100px;
第七讲_css浮动
wenqi1992的博客
01-10 1328
css浮动
CSS系列之浮动详解
老__L的博客
02-02 5585
本文主要介绍CSS的clear属性。元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制。移动到指定位置。
CSS 浮动
m0_52861684的博客
08-28 5128
CSS浮动。
CSS定位与浮动
m0_49034593的博客
08-18 2166
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务
CSS浮动
『愚』的博客
11-05 4973
CSS浮动浮动的特性float属性三个div都不浮动第一个div浮动第二个div浮动三个div都浮动浮动的父子关系浮动影响父层盒子高度overflow属性溢出处理清除浮动 浮动的特性 1.浮动主要用于使得div脱离标准文档流，生成多列布局 2.浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素） 3.浮动元素支持所有的css样式 、内容撑开宽高 、多个元素设置浮动，宽度足够的话，会排在一行 、脱离文档
CSS定位和浮动
m0_50555031的博客
05-20 1242
介绍CSS定位和浮动
CSS--浮动
weixin_42584834的博客
11-28 898
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置。5.如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移。4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。1.浮动元素会完全脱离文档流，不再占据文档流中的位置。所以元素下边的还在文档流中的元素会自动向上移动。2.设置浮动以后元素会向父元素的左侧或右侧移动。
浮动_style_浮动导航栏_css如何浮动_
09-29
在网页设计中，浮动（Float）是CSS布局的重要概念，它允许元素脱离其正常文档流并使其周围的元素围绕它流动。浮动最初是为了处理图像布局而引入的，但随着时间的推移，它已成为创建复杂的网页布局的工具之一。在这个...
css.rar_css_css a_css api_cssapi
09-22
3. **布局技术**：如浮动布局、定位（static、relative、absolute、fixed），以及现代CSS布局解决方案——Grid和Flexbox，它们允许更加灵活和响应式的布局设计。 4. **响应式设计**：使用媒体查询（Media Queries）...
DIVCSS.rar_css pdf_css布局
09-24
《DIV+CSS布局.pdf》是关于网页设计中一种常见的布局技术——DIV+CSS的详细教程。这个压缩包包含了这本书的PDF版本，旨在帮助学习者掌握如何利用HTML中的DIV元素和CSS样式来构建网页布局。 首先，我们要理解什么是...
CSS 关于浮动
09-25
浮动是CSS布局中的一种关键技术，尤其在传统的网页设计中占据重要地位。它的主要作用是让元素在页面上脱离正常文档流并沿着特定方向移动，从而实现文本环绕效果或其他复杂的布局结构。这一概念起源于印刷设计，其中...
Div_CSS.rar_DIV css布局_css大全_css布局
09-23
- 浮动布局（Float Layout）：通过`float`属性让元素在容器内浮动，常用于创建多列布局。 - 定位布局（Positioning）：通过`position`属性（如`static`、`relative`、`absolute`、`fixed`）来精确控制元素的位置。...
最新！CSSCI（2023-2024）期刊目录公布！
最新发布
2301_76900678的博客
07-19 490
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 771
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 317
网页隐藏版一行小说阅读器
Tailwind CSS常见用法
solocao的专栏
07-18 260
Tailwind CSS允许在tailwind.config.js配置文件中自定义样式，如颜色、字体大小、边框宽度等。然后，这些自定义样式可以在HTML中通过类名引用，如text-custom-size。
理解CSS浮动：浮动与浮动布局
"CSS浮动：浮动与浮动形状" 在网页设计中，CSS（Cascading Style Sheets）浮动是一种关键的技术，用于布局和控制元素在页面上的位置。本资源是一本由Eric A. Meyer编写的关于CSS浮动的专业书籍，高清且带有书签，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值