position、margin、padding样式属性，hover伪类

本文链接：https://blog.youkuaiyun.com/z2366232723/article/details/110719924

本文介绍了CSS中的position属性，包括static、fixed、relative和absolute四种定位方式，以及margin样式属性，详细阐述了margin的使用方法。同时，讨论了padding属性，用于设置元素内部与边框的距离。最后，提到了hover伪类在CSS中的应用，当鼠标悬停在元素上时如何添加样式。

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

1.position样式属性

首先介绍一下文档流，文档流有称为正常流，是默认情况下元素会自上而下，从左到右排放的一种顺序。position属性是用于定义元素排版布局的一种定义类型。任何标记样式都有position属性。position属性具有下列值：

static ：默认值，没有定位，元素出现在正常流中
fixed：会使当前标记脱离文档流,相对于浏览器窗口固定
relative：不会使当前标记脱离文档流,相对于原来位置定位
absolute：会使当前标记脱离文档流，相对于最近的且position为非static的父标记定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.out{
				width: 300px;
				height: 300px;
			}
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		 <div class="out" style="border: 1px solid red;">
			<div class="in" style="background-color: yellow;"></div>
			<div class="in" style="background-color: greenyellow;"></div>
			<div class="in" style="background-color: green;"></div>
		</div>
		
		<!--fixed:会使当前标记脱离文档流,相对于浏览器窗口固定-->
		<div class="out" style="border: 1px solid red;">
			<div class="in" style="background-color: yellow;"></div>
			<div class="in" style="background-color: greenyellow;position: fixed;"></div>
			<div class="in" style="background-color: green;"></div>
		</div>
		
		<!--relative,不会使当前标记脱离文档流,相对于原来位置定位-->
		<div class="out" style="border: 1px solid red;">
			<div class="in" style="background-color: yellow;"></div>
			<div class="in" style="background-color: greenyellow;position: relative;"></div>
			<div class="in" style="background-color: green;"></div>
		</div>
		
		<!--absolute会使当前标记脱离文档流，相对于最近的且position为非static的父标记定位-->
		<div class="out" style="border: 1px solid red;position: relative;">
			<div class="in" style="background-color: yellow; color:#FFF"></div>
			<div class="in" style="background-color: greenyellow;position: absolute;"></div>
			<div class="in" style="background-color: green; "></div>
		</div>
	</body>
</html>

2.margin样式属性

margin：用于调整与其他标记之间的间距，仅用于块级元素

margin-bottom: 10px; 下边缘与其它元素的间距
margin-left: 10px; 左边缘与其它元素的间距
margin-right: 10px; 右边缘与其它元素的间距
margin-top: 10px; 上边缘与其它元素的间距

缩写

margin: 10px; 四个外边距都是10px（上下左右）
margin: 10px 20px；上下外边距为10px，左右外边距为20px（上下和左右）
margin: 10px 20px 30px；上边外距为10px，左右外边距为20px，下边外距为30px（上，左右，下）
margin: 10px 20px 30px 40px;上外边距为10px，右外边距为20px，下外边距为30px，左外边距为40px（顺时针，上右下左）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: red;
			}
			
			span{
				background-color: blue;
			}
			
			i{
				background-color: yellow;
				display: inline-block; 
				margin-bottom: 10px;
				margin-left: 10px;
				margin-right: 10px;
				margin-top: 10px;
				margin: 10px;
				margin: 10px 20px;
				margin: 10px 20px 30px;
				margin: 10px 20px 30px 40px;
			}/*缩写与padding类似*/
		</style>
	</head>
	<body>
		<!--margin：用于调整与其他标记之间的间距，仅用于块级元素-->
		<div>河南</div>
		<span>郑大</span><i>kankan</i><span>郑大</span>
		<div>河南</div>
	</body>
</html>

3.padding样式属性

padding：用于调整标记内元素距离标记边界的间距，其缩写和上述margin类似

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: red;
			}
			
			span{
				background-color: blue;
			}
			
			i{
				background-color: yellow;
				display: inline-block; 
				padding-top: 10px;
				padding-right: 20px;
				padding-bottom: 30px;
				padding-left: 40px;
				/*padding: 10px;*//*上下左右*/
				/*padding: 10px 20px;*//*上下    左右*/
				/*padding: 10px 20px 30px;*//*上  左右 下*/
				/*padding: 10px 20px 30px 40px;*//*顺时针 上右下左*/
			}
		</style>
	</head>
	<body>
		<!--padding：用于调整标记内元素距离标记边界的间距-->
		<div>河南</div>
		<span>郑大</span><i>kankan</i><span>郑大</span>
		<div>河南</div>
	</body>
</html>

4.css伪类，hover

css伪类用于向某些选择器添加特殊效果，hover是其中一种，当鼠标移动到元素上方时为元素添加样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a{
				text-decoration:none;
				color: #333;
			}
			/*a:hover{
				text-decoration: underline;
				color: #f50;
			}*/
		</style>
	</head>
	<body>
		<a href="htttp://www.baidu.com">百度</a>
	</body>
</html>