第五章标签布局分类、css选择器深入、浮动float

百密一疏^^

已于 2022-06-09 08:28:48 修改

阅读量215

点赞数

分类专栏：前端学习文章标签： css html 前端

于 2022-06-08 16:21:37 首次发布

本文链接：https://blog.csdn.net/m0_71674778/article/details/125183271

版权

前端学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.内容回顾

1.1小练习

利用CSS相关的样式实现所示效果，如图：

需要使用的样式：

①边框样式：border: 宽度样式颜色；

②文本样式：text-align:center; text-indent: ;

③背景样式：background:颜色 url("图片") 平铺方式水平位置垂直位置 / 宽度高度。

<!DOCTYPE HTML >
<html>
 <head>
  <title>  </title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="">
  <style type="text/css">
		.div1{
			height:50px;
			border:2px solid red;
			text-align:center;

			line-height:50px;
		}
		a{
			color:blue;
		}
		.div2{
			margin-top:20px;
			height:400px;

			border:2px dashed blue;
			
			text-indent:2em;

			background:url(1.jpg) no-repeat center bottom / 150px 150px;		}

  </style>
 </head>

 <body>
		<div class="div1">
			欢迎访问我的站点，请先<a href="">登录</a>
		</div>
		<div class="div2">
			这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容<br />
		</div>
 </body>
</html>

1.2个人的小疑惑

/*如果不使用背景图片而是直接将图片用<img>标签放在div中该怎么实现该效果呢*/

2.标签类型（从布局来分）

2.1块状标签

独霸一行,可以设置宽和高，如div p h1-h6 table ul li ol li hr

2.2行内标签

挤在一行显示，不能设置宽和高，初始宽高由内容撑起，如span a br b u i sub sup

2.3行内块标签

可以设置宽和高，挤在一行显示，如img,input

2.4 display属性

:none;不显示

:block;块状

:inline;行内

:inline-block;行内块状

练习

<!DOCTYPE HTML >
<html>
 <head>
  <title>  </title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="">
  <style type="text/css">
	h1{
		height:50px;
		border:1px solid red;
		display:inline;
	}
	h2{	
		border:1px solid red;
		display:inline-block;
		height:50px;
	}
	h3{
		border:1px solid red;

		height:50px;
	}
	a{
		width:50px;
		height:30px;
		border:1px solid red;
		display:inline-block;
	}
	img{
		border:1px solid red;
		display:block;
	}
  </style>
 </head>

 <body>
	<h1>这是一个标题</h1>
	<h2>这是一个标题</h2>
	<h3>这是一个标题</h3>
	<a herf="#">这是一个a标签</a>
	<a herf="#">这是一个a标签</a>
	<a herf="#">这是一个a标签</a>
	<img src="" alt="这是一个图片" />
	<img src="1.jpg" alt="这是一个图片" />
 </body>
</html>

3.精灵图

3.1 什么是精灵图

精灵图：图片整合技术（css sprites）,就是将很多的小图片整合到一张大图上。使用的时候通过背景属性，调整在一个div框中显示的整个大图的某一点位置。

3.2 为什么要用精灵图

提升页面加载速度、减轻服务器压力...

实际上就是背景属性的应用

3.3 练习：模仿当当网的精灵图

当当网上的效果截图：

精灵图链接：http://img61.ddimg.cn/upload_img/00111/home/fix_box_icon_161205.png

<!DOCTYPE HTML >
<html>
 <head>
  <title>  </title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="">
  <style type="text/css">
		div{
			width:80px;
			height:400px;
			background:yellow url(jl.png) no-repeat left top;
		}
		a{
			border:1px solid red;
			display:inline-block;
			width:40px;
			height:40px;
		}
		.jl01{
			background:url(jl.png) no-repeat left top;
		}
		.jl02{
			background:url(jl.png) no-repeat left -40px;
		}
		.jl03{
			background:url(jl.png) no-repeat left -80px;
		}
		.jl04{
			background:url(jl.png) no-repeat left -120px;
		}
		.jl05{
			background:url(jl.png) no-repeat -40px top;
		}
  </style>
 </head>

 <body>
	<div></div>
	<a href="#" class="jl01"></a>
	<a href="#" class="jl02"></a><br />
	<a href="#" class="jl03"></a>
	<a href="#" class="jl04"></a><br />
	<a href="#" class="jl05"></a>
 </body>
</html>

4. CSS选择器进阶

4.1 全局 *

全局选择器:匹配所有元素，一般用于重置样式

{
	margin:0px;
	padding:0px;
	list-style:none;
	border:2px solid red;
}

4.2 并集选择器

并集选择器用逗号分隔多个选择器，选择到的元素使用相同的样式

/*并集选择器用逗号分隔多个选择器*/
h1,p,.xx{
		    color:red;
        }

4.3 交集选择器

交集选择器:多个条件同时满足。通过标签选择器和类选择器,id选择器进行组合

/*交集选择器:多个条件同时满足。通过标签选择器和类选择器,id选择器进行组合*/
li.xx{
		color:red;
	 }

4.4 儿子选择器

子级选择器用大于号表示: div>b

/*让div的儿子 层 的<b> 变红*/
div>b{
		color:red;
	 }

4.5 后代选择器

后代选择器用空格表示: div b

/*让div中所有的b变红*/
div b{
		color:red;
	 }

4.6 属性选择器

属性选择器：用中括号设置样式

/*属性选择器:用中括号表示*/
/*让姓名框变红*/
input[type='text']{
	border:1px solid red;
}
/*让密码框变绿，背景变黄*/
[type="password"]{
	border:2px solid green;
	background-color:yellow;
}
/*让手机框变蓝，文字变红*/
[name='sj']{
	border:2px solid blue;
	color:red;
}

4.7 伪类选择器

超链接元素伪类：

	/*默认的链接样式*/
	a:link{
		color:red;
		font-size:20px;
	}
	/*访问过链接之后的样式*/
	a:visited{
		color:blue;
		font-size:30px;
	}

	/*鼠标悬浮到a上时的样式*/
	a:hover{
		color:green;
		font-size:40px;
		background-color:pink;
	}

	/*鼠标点击时的样式*/
	a:active{
		color:yellow;
		font-size:50px;
		background-color:#ff66ff;
	}

	div{
		color:red;
		border:2px solid black;
	}

注：在使用a:visited之后，刷新网页a:link不生效，可以通过清除浏览器的历史记录恢复

4.8 CSS特性

cascading style sheet 层叠样式表

层叠性：如果多个选择器同时设置一个标签，如果设置的样式相同，按照优先级显示(权重)，否则，同时起作用。

继承性： 子代元素会默认的继承父元素的样式（字体样式/文本样式），布局样式都不能继承。

5. 浮动float：left/right

5.1 什么是浮动

浮动:就是让页面上的标签脱离标准文档流，向父标签的左边或者右边移动。直到遇到其它浮动标签或者到达父标签的边界。

5.2 浮动的由来

最初时，浮动是为了实现一种环绕效果。经过发展--->浮动布局。

5.3 浮动的特征

浮动之后(元素变为行内块的特征)：

块状元素浮动：能在一行内排列。失去独占一行的特性。

行内元素浮动：可以设置宽高。

比较：inline-block始终处于标准文档流，但是浮动脱离了标准文档流。

float:left 左浮动
float:right 右浮动
float:none 不浮动

5.4 浮动的影响

5.4.1 行内元素浮动

a.靠边排列

b.行内元素具有行内块特征，可以设置宽和高

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <style type="text/css">
	span{
		border:1px solid red;
	}

	.s2{
		float:left;
		width:100px;
		height:100px;
	}
	.s3{
		float:left;
	}
	.s1{
		float:left;
	}
  </style>
 </head>

 <body>
  <span class="s1">SPAN1</span>
  <span class="s2">SPAN2</span>
  <span class="s3">SPAN3</span>
 </body>
</html>

5.4.2 块状元素浮动

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <style type="text/css">
	.d1{
		width:100px;
		height:100px;
		border:1px solid red;
		float:left;
	}
	.d2{
		width:150px;
		height:150px;
		border:1px solid blue;
		float:left;
	}
	.d3{
		width:200px;
		height:200px;
		border:1px solid black;
		float:left;
	}
  </style>
 </head>

 <body>
  <div class="d1">这是DIV1这是DIV1这是DIV1这是DIV1</div>
  <div class="d2">这是DIV2这是DIV2这是DIV2这是DIV2</div>
  <div class="d3">这是DIV3这是DIV3这是DIV3这是DIV3</div>
 </body>
</html>