HTML+CSS(二）-CSDN博客

本文链接：https://blog.csdn.net/blaccck/article/details/104197678

CSS(Cascading Style Sheets),层叠样式表，级联样式表
作用：给HTML网页来设置外观或样式
包括HTML网页中的文字的大小、颜色、字体、网页的背景颜色、背景图片

语法规则：

CSS由选择器和一对括号组成
大括号里面是由一条一条的声明语句组成
每一天语句后都要有 ;
每一条语句由 “属性：值” 组成
CSS中的属性值一般不加引号
在CSS中不能出现HTML标签
在CSS中如果属性值为数值型数据的时候一般需要加单位单位一般都是px（像素）

<style type="text/css">
	p{
		color: #FF0000； .//给文本设置颜色为#FF0000
		font-size: 100px;     //设置字体大小为100px
	}
</style>`

CSS代码的书写方式：
 - 嵌入式：将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的<style>标签将css代码嵌入到HTML网页中
 - 外链式：指单独写一个以.css为拓展名的文件，然后在<head></head>标签中使用<link />标签，将这个css文件链接到html文件中。css文件不能单独的运行，它必须要依赖于HTML文件。
 - 行内式：将CSS代码书写在HTML标签的style属性中，style是一个通用属性，每一个标签里面都拥有这个属性

嵌入式：HTML5，type属性可以省略
语法规则：
	<style type="text/css">
	选择器{属性：值；属性：值}
	</style>

注意：<style></style>可以出现在HTML中的任何地方，但是一般情况我们只会把它放置在head标签里面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌入式</title>
	<style type="text/css">
		div{
			width:100px;
			height:100px;
			background-color:#FF0000;
		}
	</style>
</head>
<body>
	//div理解成一个存放东西的盒子
	<div></div>  //使用CSS代码给div设置宽度100像素、高度100像素、背景为红色
</body>
</html>

外链式：
在这里插入图片描述可以同时引入多个CSS文件

<link rel="stylesheet" href="CSS文件的地址">

行内式：
语法格式：<标签名 style="属性:值; 属性:值"></标签名>

在这里插入图片描述

使用嵌入式的方式书写CSS代码，它只能作用于当前的HTML文件
使用外链式的方式书写CSS代码，它可以作用于多个HTML文件

注释：
 - HTML注释：<!--  -->
 - CSS注释:/*   */

选择器：指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式

基本选择器
复合选择器
伪类选择器
属性选择器

基本选择器：
在这里插入图片描述

<span></span>不能设置宽度、高度。因为span标签是一个行内元素，它是不可以设置宽度和高度的。只有块级元素才可以设置宽度与高度。

文本属性：
在这里插入图片描述 indent:缩进
em:一个汉字的位置

transform:v.转变、转换、改造

capitalize（大写）:将英字母得到首字母转换为大写
uppercase（大写）:转换为大写
lowercase（小写）:转换为小写

快捷键：div.cap
自动生成：<div class="cap"></div>

字体属性：
在这里插入图片描述复合选择器：

多元素选择器：

<!DOCTYPE html> 
<html lang="en">
<head>
	<meta charset=UTF-8“>
	<title>多元素选择器</title>
	<style type="text/css">
		/*
		多元素选择器：
		格式：选择器1，选择器2，选择n{属性：值；}
		作用：给列表中的所有的选择器设置样式
		*/
		.box,p,h2,li{
			color:#f00;
			text-decoration:underline;
		}
	</style>
</head>
<body>
	<div>HTML</div>
	<p>CSS</p>
	<h2>php</h2>
	<ul>
		<li>北京</li>
		<li>广州</li>
		<li>上海</li>
		<li>深圳</li>
	</ul>
</body>
</html>

后代元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta  charset="UTF-8">
	<title>子元素选择器</title>
	<style type="text/css">
		/* 子元素选择器
		   格式：E>F{属性：值；}
		*/
		/*
		作用：匹配.box这个div里面的所有的h2后代元素,孙子也行
		*/
		.box h2{
			color: #f00;
			text-decoration: overline;
		}
	</style>
</head>
<body>
	<!--
	class=box这个元素中有三个子元素
	第一个子元素：<h2>HTML</h2> 儿子
	第二个子元素：<div></div>   儿子，可以给儿子的儿子更改
	第三个子元素：<h2>PHP</h2>  儿子
	第二个子元素里面还有一个子元素
	-->
	<div class="box">
		<h2>HTML</h2>
		<div>
			<h2>CSS</h2>
		</div>
		<h2>PHP</h2>
	</div>
</body>
</html>

子元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta  charset="UTF-8">
	<title>后代元素选择器</title>
	<style type="text/css">
		/* 后代元素选择器
		   格式：E F{属性：值；}
		*/
		/*
		作用：匹配.box下面的h2子元素，只匹配一级元素，没有孙子
		*/
		.box h2{
			color: #f00;
			text-decoration: overline;
		}
	</style>
</head>
<body>
	<!--
	class=box这个元素中有三个子元素
	第一个子元素：<h2>HTML</h2> 
	第二个子元素：<div></div>   
	第三个子元素：<h2>PHP</h2>  
	第二个子元素里面还有一个子元素
	-->
	<div class="box">
		<h2>HTML</h2>
		<div>
			<h2>CSS</h2>
		</div>
		<h2>PHP</h2>
	</div>
</body>
</html>

相邻选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta  charset="UTF-8">
	<title>相邻元素选择器</title>
	<style type="text/css">
		/* 相邻元素选择器
		   格式：E+F{属性：值；}
		*/
		/*
		作用：要满足以下前提才会匹配：
		第一点：E元素与F元素必须是兄弟关系 平辈关系
		第二点：E元素与F元素必须要紧挨着，中间没有任何元素
		第三点：要求F元素一定是在E元素的下面
		*/
		.box+p{
			color: #f00;
			text-decoration: overline;
		}
	</style>
</head>
<body>
	<p>top</p>
	<div class="box">
		<h2>HTML</h2>
		<div>
			<h2>CSS</h2>
		</div>
		<h2>PHP</h2>
	</div>
	<p>upper</p>
</body>
</html>

列表样式属性：
这里的列表指的是：无序列表和有序列表
在这里插入图片描述
快捷键：ul>li*5>a

<ul>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

外边距：

单元格与单元格之间的距离
在CSS中盒子与盒子之间的距离
在HTML中的表格标记属性cellspacing
在CSS中 margin

margin-left: auto /*将左外边距的值设置为auto*/
margin-right: auto /*将右边距的值设置为auto*/

伪类选择器：给超链接的不同状态来设置样式

正常状态：超链接没有被访问 ,link(链接）
访问过后状态：超链接已经被访问，visited（已访问）
鼠标放上状态：鼠标放在超链接上面，但是并没有将鼠标的左键按下去，hover(徘徊）
激活状态：鼠标左键已经按下去了，但是并没有将鼠标的左键弹出，active(活性，积极）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
		a:link{
			color: 3f00;
		}
		a:visited{
			color: #000;
		}
		a:hover{
			color: gold;
		}
		a:active{
			color:#0f0;
		}
	</style>
</head>
<body>
	<a href="http://www.baidu.com">baidu</a>
	<a href="http://www.4399.com">4399</a>
	<a href="http://www.123.com">123</a>
</body>
</html>

超级链接的美化

通常会去掉超链接的下划线，然后给超链接设置一个颜色
正常状态与访问过后的样式设置为一样
当鼠标放上的时候给其设置另外一个颜色
激活状态一般不会设置，因为激活状态的时间太短了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超链接美化</title>
	<style type="text/css">
		/*正常状态与访问过后的状态*/
		a:link,a:visited{
			text-decoration: none;
			color: #444;
		}
		/*鼠标在上停留时的状态*/
		a:hover{
			color:#f00;
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<a href="http://www.baidu.com">baidu</a>
	<a href="http://www.4399.com">4399</a>
	<a href="http://www.123.com">123</a>
</body>
</html>

属性选择器：

它是与标签的属性名和属性值有关
它是通过标签的属性名和属性值来匹配元素
atter是“attribute"的简写，中文意思是"属性 ", 属性名
val是“value”的简写，中文意思是“值”，属性值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
		/*通过属性选择器来匹配元素*/
		/*第一个：[属性名]*/
		[align]{
			color: #f00;
		}
	</style>
</head>
<body>
	<p align="center">xck</p>
	<h2 align="center">ckn</h2>
</body>
</html>

先匹配到p标签然后再来判断p标签里面是否有align这个属性如果有就匹配到如果没有就匹配不到：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
		/*通过属性选择器来匹配元素*/
		/*第一个：[属性名]*/
		/*先匹配到p标签 然后再来判断p标签里面是否有align这个属性 如果有就匹配到如果没有就匹配不到*/
		p[align]{
			color: #f00; 
		}
	</style>
</head>
<body>
	<p align="center">xck</p>
	<h2 align="center">ckn</h2>
</body>
</html>

在这里插入图片描述！important属性：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>!important</title>
	<style type="text/css">
		/*语法格式：属性：值！important;*/
		/* # > . > 标签 */
		p{
			color: #f00 !important;
			font-size: 20px;
		}
		.p1{
			color: #0f0;
		}
		#p2{
			color:#00f;
			font-size: 100px;
		}
	</style>
</head>
<body>
	<p class="p1" id="p2">xnana</p>
</body>
</html>

注意：

！important它是提升属性的权重，而不是选择器的权重
！important不能提升继承过来的权重

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>!important</title>
	<style type="text/css">
		/*!important不能提升继承过来的权重*/
		div{
			color: #f00; !important;
		}
		p{
			color: #00f;
		}
	</style>
</head>
<body>
	<div>
		<p>xnana</p>
	</div>
</body>
</html>

一个标签内可以携带多个类名：

语法：
<标签名 class="值1 值2 值3"></标签名>
快捷键：
div.div${xiaonana$}*3 + tab
<div class="div1">xiaonana1</div>
<div class="div2">xiaonana2</div>
<div class="div3">xiaonana4</div>

稍微优化:
旧代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>!important</title>
	<style type="text/css">
		.div1{
			font-weight: bold;
		}
		.div2{
			color: #f00;
		}
		.div3{           //优化
			font-weight: bold;
			color: #f00;
		}
	</style>
</head>
<body>
	<div>
		<div class="div1">xiaonana1</div>
		<div class="div2">xiaonana2</div>
		<div class="div3">xiaonana3</div>  //更改
	</div>
</body>
</html>

新代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>!important</title>
	<style type="text/css">
		.div1{
			font-weight: bold;
		}
		.div2{
			color: #f00;
		}
		/*.div3{                 //删掉
			font-weight: bold;
			color: #f00;
		}*/
	</style>
</head>
<body>
	<div>
		<div class="div1">xiaonana1</div>
		<div class="div2">xiaonana2</div>
		<div class="div1 div2">xiaonana3</div> //更改
	</div>
</body>
</html>

注意：有时可能会产生样式冲突
在这里插入图片描述背景样式属性：

属性	值	含义
background-color	#ff0000、red、rgb(255,0,0)	背景颜色
background-image	url(图像路径和名称);	背景图像
background-repeat	repeat、repeat-x、repeat-y、no-repeat	背景图像是否重复
background-position	center center或x% y%或xpos ypos	背景图像起始位置
background-attachment	scroll(滚动)、fixed(固定)	设置背景图像是否固定或者随着页面的其余部分滚动
background	url(1.jpg) no-repeat center center	设置背景的简写形式

注意：

background-color:给元素设置背景颜色，但是前提这个元素要么有内容，要么有宽度和高度才可以
background-image:给元素设置背景图片，但是前提这个元素要么有内容，要么有宽度和高度才可以
background-repeat:repeat平铺、repeat-x水平平铺、repeat-y垂直平铺、不平埔
background-position:设置背景图片的位置，有两个值：水平位置、垂直位置。值有三种表示方式：英文单词、固定值、百分比。可以混用，因为一个代表水平，一个代表竖直方向。
三种表示方式：

英文单词的表示方式

水平位置：left(居左）、center(居中)、right(居右)
垂直位置：top(居上)、center(居中)、bottom(居下)

固定值的表示方式：px（顶点坐标）
百分比的表示方式:%(按照横竖的百分比来的)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景样式属性综合案例</title>
	<style type="text/css">
		body{
			font-size: 12px; /*字体大小*/
			color: #f60;	/*给文本设置颜色*/
		}
		.box{
			width: 400px;
			border:1px solid #00f;
			margin-right: auto; /*右外边距的值为auto*/
			margin-left: auto; /*左外边距的值为auto*/
		}
		.box h2{
			height: 35px;
			line-height: 35px;
			color: gold;
		}	
		.box ul li{
			list-style: none; /*去除li前面的项目符号*/
			height: 30px;
			line-height: 30px;
			border:1px solid #ccc;
			background-image:url(./images/li01.jpg);/*给每个li标签设置一个背景图片*/	
			background-repeat: no-repeat;
			background-position: left center;
			padding-left: 15px; /*左内填充，盒子里面的内容到左边边框线的距离*/
		}
		/*对超链接进行美化*/
		a:link,a:visited{
			color: #444;
			text-decoration: none;
		}
		a:hover{
			color: #f00;
		}
	</style>
</head>
<body>
</body>
	<!-- 
	div.box>h2+ul>li*5>a       //生成底下模板快捷键
	<div class="box">
		<h2></h2>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	-->
	<div class="box">
		<h2>新闻列表</h2>
		<ul>
			<li><a href="">x</a></li>
			<li><a href="">n</a></li>
			<li><a href="">a</a></li>
			<li><a href="">n</a></li>
			<li><a href="">a</a></li>
		</ul>
	</div>
</body>
</html>

标准文档流：(从左至右，从上到下)
空白折叠现象：
在这里插入图片描述
解决办法：
浮动：（重点）
需求：让多个元素排在同一行，并给这些元素设置宽、高
标准文档流中的元素：只有两种，块级元素和行内元素

行内元素的特性：让多个元素排在同一行
块级元素的特性：给元素设置宽、高
浮动：如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流
浮动元素脱离标准文档流，不再占用空间了
浮动元素它的层级要比标准文档流里面的元素层级高，它会将标准文档流中的元素给压盖住
浮动元素会向右或者向左进行浮动
浮动元素遇到了父元素的边框然后就停止了浮动
浮动元素遇到上一个浮动元素后会停止浮动
浮动元素浮动以后，其父元素不会再包裹着浮动元素
将行内元素进行浮动以后，这个行内元素会变成块级元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动案例之网站导航栏</title>
	<style type="text/css">
	/*在CSS代码的第一步：都是清除HTML标签的默认的内填充与外边距*/
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background-image:url(./images/dibanzhuan.jpg);
		}
		.nav{
			width: 960px;
			height:40px;
			margin-right: auto;
			margin-left: auto;
		}
		.nav ul{
			/*将列表前面的项目符号去除
			li标签本来是块状元素，将其浮动就可以让每一个li排列在一行
			*/
			list-style:none;
		}
		.nav ul li{
			/*把每一个li标签进行向左浮动*/
			float: left;
			/*给每一个li标签设置一个宽度*/
			width: 120px;
			text-align: center;
			background-image:url(./images/bg2.png);
			height:40px;
			line-height:40px;
		}
		a{
			text-decoration: none;
			color: white;
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
		</ul>
	</div>		
</body>
</html>

清除浮动：

只要有浮动，那么必须有清楚浮动。否则会影响下面元素的排版布局
清除浮动的三种方法：

给浮动元素的父元素设置一个固定的高度
使用清除浮动的样式属性 clear

	<style>
		.clear{
			clear: both; /*两者都清除*/
		}
	</style>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<!--在最后一个浮动元素的下面新建一个空白的div
		这个div的主要功能就是用于清除浮动 -->
	</div>
</body>

使用 overflow:hidden 这个属性来清除浮动（列表，因为列表没法加div）

盒子模型：
盒子的组成成分：内容（content）+ 内填充(padding) + 边框(border) + 外边距（margin）

padding:
padding有4个方向，所以我们能够分别的描述这4个方向的padding。方法有两种：第一种称为小属性，第二种称为简写属性。

小属性：

padding-top：上内填充
padding-right:右内填充
padding-bottom:下内填充
padding-left：左内填充

简写属性：

padding：这个属性是有方向的，可以同时表示四个方向。这个属性的方向是有顺序的，顺序是顺时针方向。也就是：上、右、下、左
padding:20px; 表示上右下左四个方向的内填充都为20像素
padding:10px 20px; 表示上下为10像素，左右为20像素
padding:10px 20px 30px; 表示上为10，左右为20，下为30
padding:10px 20px 30px 40px; 表示上 10、右 20、下 30、左 40（×）

margin:
margin表是“外边距”的意思，它是指盒子与盒子之间的距离。margin也有4个方向，所以我们也能够通过4个方向对其进行描述。方法有两种：第一种称为小属性，第二种称为简写属性。

小属性：

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距

简写属性：

margin:有方向、顺时针方向：上、右、下、左
margin:20px; 表示上右下左四个方向的内填充都为20像素
margin:10px 20px; 表示上下为10像素，左右为20像素
margin:10px 20px 30px; 表示上为10，左右为20，下为30
margin:10px 20px 30px 40px; 表示上 10、右 20、下 30、左 40

margin塌陷现象：

在标准的文档流中，竖直方向的margin值不会叠加 ，它会取较大的值
横着的方向是没有margin的塌陷现象，边距=右边距+左边距
浮动元素它是没有margin塌陷现象的（20+40=60）

margin居中：
margin的值可以是auto，auto表示“自动”的意思，当左外边距与右外边距的值都是auto时那么这个盒子就会水平居中。
注意：
使用margin来实现水平居中时，一定要有固定的宽度（给这个盒子设置一个宽度），只有块元素可以实现水平居中，行内元素是不能实现居中的
只有标准文档流中的盒子才可以使用margin来实现水平居中
margin属性用来实现盒子的水平居中，而不是文本的水平居中

善于使用父元素的padding，而不使用子元素的margin：
在这里插入图片描述要解决上图的问题：有两种方法可以解决
第一种方法：给其父元素设置边框线
但是这种方法不常用，因为边框一般主要是用于来调试代码的很少会给一个盒子设置边框
第二种方法：不要使用子元素的margin而是要使用其父元素的padding
在这里插入图片描述说明：margin这个属性它本意是用于来描述兄弟与兄弟之间的关系。不是用于描述父子元素之间的关系的。如果是父子元素的关系，就最好使用给其父元素设置padding属性

border：
在这里插入图片描述
边框的颜色可以省略不写，但是如果不写的话就表示边框的颜色为黑色，其它的两个属性值不能不写，如果不写的话就会不显示边框（颜色可以删，其他的不行）：
线型：

边框也有四个方向：

border-top
border-right
border-bottom
border-left

display:
display是“显示”的意思，它是用来进行行内元素与块级元素之间的相互转换。将隐藏的元素显示或者将显示的元素隐藏。取值有：inline(行内)、block（块级）、none（无）

将一个行内元素的display属性的值设置为block以后，那么这个元素就会被转换为块级元素：
在这里插入图片描述将一个块级元素的display属性的值设置为inline以后，这个元素就会从块级元素变为行内元素：
案例：

	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			background:url(./images/dibanzhuan.jpg);
		}
		ul{
			list-style: none;
		}
		.nav{
			width: 960px;
			height: 40px;
			margin:100px auto;
		}
		.nav ul li{
			float: left;
			width: 120px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background:url(./images/bg2.png) repeat-x;
		}
		.nav ul li a{
			width: 120px;
			height: 40px;
			/*将行内元素转换为块级元素*/
			display: block;
		}
		.nav ul li a:link,.nav ul li a:visited{
			text-decoration: none;
			color: white;
		}
		.nav ul li a:hover{
			background-image: url(./images/bg3.png);
		}
	</style>
<body>
	<div class="nav">
		<ul>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
			<li><a href="">网站栏目</a></li>
		</ul>
	</div>
</body>

position:
position表示“位置”的意思，主要用于实现对元素的定位。在CSS中定位有三种：

position:fixed 固定定位
position:relative 相对定位
position:absolute 绝对定位
使用定位属性时，一定要配合定位的坐标来使用：
left :表示定位的元素离左边多远
right：表示定位的元素离右边多远
top：离上边多远
bottom:离下边多远

position:fixed（固定定位）：
它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变。
特点：

固定定位元素脱离了标准文档流
固定定位元素的层级加粗样式比标准文档流里面的元素高，所以固定定位元素会压盖住标准文档流里面的元素
固定定位元素不再占用空间
固定定位元素显示的位置不会随着浏览器滚动而滚动
案例1：使用固定定位来实现返回顶部的按钮

	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		a{
			width:60px;
			height:60px;
			display; block;
		}
	</style>
<body>
	<a href="">返回<br/>顶部</a>
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
</body>

在这里插入图片描述

	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		a{
			width:60px;
			height:60px;
			/*将行内元素转换为块级元素*/
			display; block;
			background-color: #ccc;
			text-align: center;
			line-height: 30px;
			text-decoration: none;
			color:white;
			font-weight:bold;
		}
	</style>
<body>
	<a href="">返回<br/>顶部</a>
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
</body>

在这里插入图片描述

	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		a{
			width:60px;
			height:60px;
			/*将行内元素转换为块级元素*/
			display; block;
			background-color: #ccc;
			text-align: center;
			line-height: 30px;
			text-decoration: none;
			color:white;
			font-weight:bold;
			/*使用固定定位*/
			position: fixed;
			right: 30px;/*离右边30px*/
			bottom:100px;/*离下边100像素*/
		}
	</style>
<body>
	<a href="">返回<br/>顶部</a>
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
</body>

在这里插入图片描述案例2：使用固定定位来实现顶部的导航栏

	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.nav{
			width: 100%;
			height: 60px;
			background-color:#222222;
			/*使用固定定位*/
			position: fixed;
			left: 0px;
			top: 0px;
		}
		.nav .inner_c{
			width: 1000px;
			height: 60px;
			margin:0px auto;
		}
		ul{
			list-style: none;
		}
		ul li{
			float: left;
			width:100px;   /*1000%7*/
			line-height: 60px;
			text-align: center;
		}
		ul li a{
			display: block;
			width: 100px;
			height: 60px;
			text-decoration: none;
			color:white;
			font-weight: bold;
		}
		ul li a:hover{
			background-color:gold;
		}
		body{
			padding-top: 60px;
		}
	</style>
<body>
	<div class="nav">
		<div class="inner_c">
			<ul>
				<li><a href="">xnana</a></li>
				<li><a href="">xnana</a></li>
				<li><a href="">xnana</a></li>
				<li><a href="">xnana</a></li>
				<li><a href="">xnana</a></li>
				<li><a href="">xnana</a></li>
				<li><a href="">xnana</a></li>
			</ul>
		</div>
	</div>
	<img src="./images/2.jpg">
	<img src="./images/2.jpg">
	<img src="./images/2.jpg">
	<img src="./images/2.jpg">
	<img src="./images/2.jpg">
</body>

在这里插入图片描述

position:relative(相对定位)
相对于原来的自己定位
特点：

相对定位元素它没有脱离标准文档流
相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
相对定位元素设置了定位的坐标以后，那么它会在老家留下一个坑
相对定位元素它会将标准文档流中的元素压盖住
相对定位元素的定位坐标值可以是负数

注意：相对定位元素它会在老家留下一个坑，所以一般情况下它很少单独使用，相对定位元素它主要是用来配合“绝对定位”元素来使用的。
对齐：

position:absolute;(绝对定位)
绝对定位元素是相对于“组先定位元素”来进行定位。绝对定位元素会先查找其父元素是否设置了定位的属性。如果有设置定位的属性，那么它就会相对于其父元素来进行定位；但是如果它的父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性，如果有设置就相对于其父元素的上一级元素进行定位。但是如果没有设置，那么会继续往上一级查找，如果其组先元素都没有设置定位属性，那么它就会相对于“浏览器窗口”来进行定位，即固定定位。

绝对定位元素脱离了标准文档流
绝对定位元素不再占用空间
绝对定位元素会压盖住标准文档流中的元素
绝对定位元素它会相对于其“组先定位元素”来进行定位，这里的组先定位元素可以是相对定位也可以是固定定位
添加了left:0px; 相对于浏览器
而：
另外：
使用绝对定位来实现拉手网上的效果：

z-index：

z-index表示谁压着谁，数值大的会压盖住数值小的
只有定位的元素才有z-index，只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index
z-index的值是没有单位的，值是一个正整数，默认的z-index的值是0
如果多个定位元素没有设置z-index属性或者z-index值设置一样，那么写在HTML后面的定位元素就会压盖住前面的定位元素

注意：看body中，谁后写谁大。
值一样时，和没有值时的判断方法一样。

CSS3：
css3=css2+新语法+新的属性（对css2进行扩充，删减，优化）

结构伪类：
在这里插入图片描述 E：first-child 匹配第一个孩子
E：last-child
E:nth-chile(n)
E:nth-child(2n)或者E:nth-child(even)
E:nth-child(2n+1)或者E:nth-child(odd)
E:only-child
应用：隔行变色

border-collapse
这个属性主要用于合并表格的边框线，其值为：collapse
border-collapse:collapse;
在这里插入图片描述解决：