css基础(2)——伪类，浮动，定位

最新推荐文章于 2023-07-12 16:12:46 发布

大地笨笨熊

最新推荐文章于 2023-07-12 16:12:46 发布

阅读量825

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/qq_51913153/article/details/124807369

版权

本文详细介绍了CSS中的伪类，包括:hover、:active和:focus三种状态。接着讨论了浮动的概念，解释了如何使用float属性实现元素浮动，并针对浮动带来的高度塌陷问题提出了解决方案。最后，讲解了定位原理，对比了相对定位和绝对定位的特点，特别强调了绝对定位会脱离文档流的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.伪类

css伪类表示标签的一种特殊状态，为特殊状态设置属性

格式为选择器：伪类名

主要分为三类：
       ：hover 鼠标移入状态
       ：active 点击，激活
       ：focus 聚焦,对于可输入内容的组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				color: #FF0000;
				text-decoration:none;/*去除下划线*/
			}
			a:hover{
				color: #00BFFF;
				text-decoration:underline;
			}
			.aa{
				background-color: #008000;
			}
			.aa:hover{
				background-color: blue;
			}
			.aa:active{
				background-color: #FF0000;
			}
			.bb:focus{
				background-color: #00BFFF;
			}
			
		</style>
	</head>
	<body>
		 <a href="">百度</a>
		 <input type="button" value="保存" class="aa" /><br />
		 <input type="text" class="bb" />
	</body>
</html>

2.浮动

在认识浮动之前先了解文档流

文档流：指文档中的标签在排列时所占用的位置，将窗体自上而下排成一行行，同行按照从左向右的顺序排放标签即为文档流

浮动：指标签脱离原来的文档流，在父级标签中漂浮起来
使用float属性设置， none/不浮动 left/向左浮动 right/向右浮动

浮动问题：当标签浮动后，脱离了文档流，不占用父级标签的空间，所以并未将父级标签撑开，影响了后续标签的网页布局（也称高度塌陷）

解决方案：
1.为父级定义高度
2.清除浮动：可以根据浮动标签的高度撑开父级标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wd{
				background-color: #0000FF;
				float: left;
			}
			.ad{
				background-color: #FF0000;
				float: left;
			}
		</style>
	</head>
	<body>
		<!-- 
		 文档流：指文档中的标签在排列时所占用的位置，将窗体自上而下排成一行行，同行按照从左向右的顺序排放标签即为文档流
		 -->
		 <!-- 
		  浮动：指标签脱离原来的文档流，在父级标签中漂浮起来
		  使用float属性设置，  none/不浮动 left/向左浮动  right/向右浮动
		  -->
		 <div class="wd">
			 div标签
		 </div>
		 <div class="ad">
			 fko
		 </div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wz{
				background-color: #00BFFF;
				text-align: center;
				width: 100px;
				float: left;
			}
			.wz:hover{
				background-color: #0000FF;
			}
			#a{
				padding: 10px;
				margin: auto;
				/* 必须为父级设置宽度，否则默认占一行，无法居中 */
				width: 600px;
			}
			.a2{
				width: 600px;
				height: 300px;
				background-color: #FF0000;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<!-- 
		 浮动时，标签皆变为块级标签，且浮动后标签的宽度默认为内容的大小，也可自行设置
		 -->
		 <div id="a">
			 <div  class="wz">首页</div>
			 <div  class="wz">公司介绍</div>
			 <div  class="wz">用户案例</div>
			 <div  class="wz">产品介绍</div>
			 <div  class="wz">售后</div>
			 <div  class="wz">协议</div>
			 <!-- 清除浮动 -->
			 <!-- <div style="clear: left;"></div> -->
		 </div>
		 <!-- 浮动问题 -->
		 <!-- 当标签浮动后，脱离了文档流，不占用父级标签的空间，所以并未将父级标签撑开，影响了后续标签的网页布局（也称高度塌陷） -->
		  <div> vmskg</div>
		 <div class="a2" >
			 
		 </div>
		 <!-- 
		 解决方案： 
		 为父级定义高度
		 清除浮动：可以根据浮动标签的高度撑开父级标签
		 -->
	</body>
</html>

3.定位

定位分相对定位与绝对定位两类

3.1相对定位：

position: relative;/* 开启相对定位*/

相对定位的参照物为标签原来的起点
开启相对定位之后未设置移动属性，标签不会发生辩护
开启相对定位不会脱离文档流
移动之后原来的位置还被占用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: #008000;
			position: relative;/* 开启相对定位*/
			left: 100px;
			top: 100px;
		}
		.box0{
			width: 100px;
			height: 100px;
			background-color:red;
		}
		</style>
	</head>
	<body>
		<!-- 
		 相对定位的参照物为标签原来的位置，
		 开启相对定位之后未设置移动属性，标签不会发生辩护
		 开启相对定位不会脱离文档流
		 移动之后原来的位置还被占用
		 -->
		<div class="box"></div>
		<div class="box0"></div>
	</body>
</html>

3.2绝对定位

position: absolute;/*开启绝对定位，一旦开启，标签就会脱离文档流*/

绝对定位是以最近的已经开启定位的父级标签作为参照物
如果不满足以上条件，则以网页边框作为参照物
绝对定位一旦开启，标签就会脱离文档流
为父级开启定位时，一般情况下开启相对定位，来避免父级脱离文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* body标签的外边距为8px */
		.box{
			width: 100px;
			height: 100px;
			background-color: #008000;
			position: absolute;/*开启绝对定位，一旦开启，标签就会脱离文档流*/
			left: 100px;
			top: 100px;
		}
		.box0{
			width: 100px;
			height: 100px;
			background-color:red;
		}
		/* 父级标签 */
		.box1{
			width: 200px;
			height: 200px;
			background-color: #0000FF;
			position: relative;/*开启相对定位*/
		}
		</style>
	</head>
	<body>
		<!-- 
		 绝对定位是以最近的已经开启定位的父级标签作为参照物
		 如果不满足以上条件，则以网页边框作为参照物
		 绝对定位一旦开启，标签就会脱离文档流
		 为父级开启定位时，一般情况下开启相对定位，来避免父级脱离文档流
		 -->
	<div class="box1">
		<div class="box"></div>
		<div class="box0"></div>
	</div>
		
	</body>
</html>