css之超链接，盒子模型，定位

最新推荐文章于 2024-05-17 07:28:56 发布

原创最新推荐文章于 2024-05-17 07:28:56 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了CSS中的超链接伪类，包括link、visited、active和hover状态，以及如何应用滤镜和效果。接着讨论了div元素作为块级容器的作用，并对比了div与span的区别。深入探讨了盒子模型，详细阐述了填充、边框和边界的概念，以及如何设置边框样式。此外，文章还讲解了浮动元素的概念，如何通过float属性实现元素并排显示。最后，讨论了position属性的四种定位方式，包括static、absolute、fixed和relative，并解释了不同定位方式的影响。

css提供了四种a对象的伪类，他表示四种不同的状态，

link：没有访问时的状态
visited：已经访问的链接
active：激活链接,单击链接但还没有释放之前的样式

hover：鼠标停留在链接上时

 a{
 ……
 }
 a:link{
 	……
 	}
 		avisited{
 	……
 	}

注意在这里还有滤镜，动感模糊，透明度处理，阴隐设置，发光效果，x光效果（xray），波形滤镜（wave），遮罩效果（mask），没有涉及

div

div是用来为HTML文档内大块的内容提供结构和背景的元素，div的其实标签和结束标签之间的所有内容都是用来构成这个块，相当与一个容器，可以放置段落，表格，图片，等各种HTML元素，

div与span的区别：

两者最明显的区别在于DIV是块元素，（每个块后自动换行）而SPAN是行内元素(也译作内嵌元素)。
详解：1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。

	<body >
		<div>div1</div>
	    <div>div2</div>
	    <span>span1</span>
	    <span>span2</span>
	</body>

在这里插入图片描述

盒子模型

在这里插入图片描述

所有的页面中的元素都可以看做装在盒子的东西，盒子中的内容到盒子的边框之间的距离即为填充（padding）

盒子本身有一个边框（border）

盒子边框和其他盒子之间有边界（margin）

填充，边框，边界都分为上下左右四个方向，当使用css定义盒子的width和height时，定义的并不是内容区域，边框，填充的总区域，而是content内容的区域。

边框样式：
css中的

border-style有四个
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:

在这里插入图片描述

边框颜色：border-color同样有四种

边框border-width

填充：padding-top同样有四个：

边界：margin-top同样有四个

盒子的浮动：

在标准流中，一个块级元素在水平方向会自动伸展，直到包含其元素的边界，而在竖直方向和其他元素依次排列，不能并排，

div是一个块级的元素，不会出现两个div显示出现并排的现象，如果使用了float浮动，就可以实现了。

css允许任何元素浮动，无论是图片，段落，还是列表，浮动之后就会变成块级元素，浮动元素的宽度默认为auto，如果浮动元素float取值为none，或者没有设置float，不会发生浮动，块元素独占一行
浮动有一些控制的规则：

浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会相互重叠
浮动元素不会上下浮动

语法：

float：none|left|right

，

			<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
		<style type="text/css">
		body {
	    	margin:15px;
	    	font-family:Arial; font-size:12px;
		}
		#father {
	    	background-color:#ffff99;
	   		 border:1px solid #111111;
	   		 padding:5px;                
		}
			#a{
				float:left;
				width：200px;
				height:80px;
				border:2px;
				border-color:#0F0;
				border-style:solid;
				margin:15px;
			}
			#b{
				width：200px;
				height:80px;
				border:2px;
				border-color:#0F0;
				border-style:solid;
				margin:15px;
			}
		</style>
	</head>
	
	<body>
	<div id="father">
		<div id="a">这是有一个div块</div>
	    <div id="b">这是有二个div块</div>
	</div>
	    
	</body>
	</html>
	
	<!--
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<style type="text/css">
	body {
	    margin:15px;
	    font-family:Arial; font-size:12px;
	}
	.father {
	    background-color:#ffff99;
	    border:1px solid #111111;
	    padding:5px;                
	}
	.father div {
	    padding:10px;                
	    margin:15px;                    
	    border:1px dashed #111111;
	    background-color:#90baff;
	}
	.father p {
	    border:1px dashed #111111;
	    background-color:#ff90ba;
	}   
	.son1 {
		float:left
	/* 这里设置son1的浮动方式*/
	}
	.son2 {
	/* 这里设置son1的浮动方式*/
	}
	.son3 {
	/* 这里设置son1的浮动方式*/
	}
	</style>
	</head>
	<body>
	    <div class="father">
	        <div class="son1">Box-1</div>
	        <div class="son2">Box-2</div>
	        <div class="son3">Box-3</div>
	        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
	    </div>
	</body>
	</html>
	-->

在这里插入图片描述

上面是两个例子。

position 定位

定位运行用户精确定义元素框出现的位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一元素，或者相对于浏览器窗口本身，

position属性有四个值：

static：默认的，代表无定位
absolute：绝对定位
fixed：固定，和绝对定位非常类似，他不会随着滚动条的滚动而改变位置
relative：相对定位，对象不可重叠，依据top，right，bottom，left

relative
当Position属性值为Relative时，对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置。

top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只有Top起作用。left的值表示对象相对原位置向右偏移的距离，right的值表示对象相对原位置向左偏移的距离，两者同时存在时，只有left起作用。

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
		<style type="text/css">
		body {
	    	margin:15px;
	    	font-family:Arial; font-size:12px;
		}
		#father{
			border-color:#000;
		}
		#a{
			height:100px;
			border-color:#000;
			background:#F00;
			width:100px;
			
		}
		#b{
			border-color:#0F0;
			background:#0F0;
			height:100px;
			width:100px;
			
		}	
		</style>
	</head>
	
	<body>
	<div id="father">
		<div id="a">这是有一个块</div>
	    <div id="b">这是有二个块</div>
	</div>
	    
	</body>
	</html>

没有使用定位之前的

在这里插入图片描述

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
		<style type="text/css">
		body {
	    	margin:15px;
	    	font-family:Arial; font-size:12px;
		}
		#father{
			border-color:#000;
		}
		#a{
			height:100px;
			border-color:#000;
			background:#F00;
			width:100px;
			
		}
		#b{
			position:relative;
			top:50px;
			left:70px;
			border-color:#0F0;
			background:#0F0;
			height:100px;
			width:100px;
			
		}	
		</style>
	</head>
	
	<body>
	<div id="father">
		<div id="a">这是有一个块</div>
	    <div id="b">这是有二个块</div>
	</div>
	    
	</body>
	</html>

使用了相对定位。相对于没有使用时的位置的偏移；

在这里插入图片描述

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
		<style type="text/css">
		body {
	    	margin:15px;
	    	font-family:Arial; font-size:12px;
		}
		#father{
			border-color:#000;
		}
		#a{
			height:100px;
			border-color:#000;
			background:#F00;
			width:100px;
			
		}
		#b{
			position:absolute;
			top:50px;
			left:70px;
			border-color:#0F0;
			background:#0F0;
			height:100px;
			width:100px;
			
		}	
		</style>
	</head>
	
	<body>
	<div id="father">
		<div id="a">这是有一个块</div>
	    <div id="b">这是有二个块</div>
	</div>
	    
	</body>
	</html>

在这里插入图片描述