CSS------第四章浮动

最新推荐文章于 2023-06-24 18:45:39 发布

码农终将翻身

最新推荐文章于 2023-06-24 18:45:39 发布

阅读量595

点赞数 1

分类专栏： CSS HTML 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_68509156/article/details/124896788

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

1.回顾

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	/*样式定义规则:
	  从大到小，从外到里
	  外宽内高，外相内绝
	*/
	.menu{
		/*边框*/
		border:2px solid black;
		/*宽度*/
		width:100px;
		/*修改列表样式为none，去除小圆点*/
		list-style:none;
		/*去除ul的内填充*/
		padding:0px;
	}

	/* li{
		border:1px solid blue;
	} */

	a{
		border:1px solid red;
		/*修改a标签的显示模式，改为块状显示*/
		display:block;
		/*设置a标签的高度*/
		height:30px;
		/*a标签内容水平居中*/
		text-align:center;
		/*a标签内容垂直居中*/
		line-height:30px;
		/*去除下划线*/
		text-decoration:none;

		/*设置背景颜色*/
		background-color:#000;
		/*设置字体颜色*/
		color:#fff;
	}
		
	/*鼠标悬浮到a标签上的时候，实现反色*/
	a:hover{
		background-color:#fff;
		color:#000;
	}
  </style>
 </head>

 <body>
  <!--
  步骤: 1.先写内容 2.定义样式
  -->
	
	<ul class="menu">
		<li><a href="http://www.taobao.com">淘宝</a></li>
		<li><a href="http://www.jd.com">京东</a></li>
		<li><a href="http://www.bilibili.com">B站</a></li>
		<li><a href="http://www.dangdang.com">当当网</a></li>
	</ul>

 </body>
</html>

2.本章目标

2.1. 精灵图

2.2. css选择器的深入

2.3. 标签布局分类

2.4.浮动

3.具体内容

3.1.精灵图

1. 什么是精灵图

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

2. 为什么要用精灵图

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

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

3. 案例：当当图标

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	.d1{
		width:38px;
		height:40px;
		border:1px solid black;
		/*使用背景方式引用精灵图中的某个图片*/
		background:url(ddjl.png);
	}

	.d2{
		width:38px;
		height:40px;
		border:1px solid black;
		background:url(ddjl.png) no-repeat 0px -160px;
	}
  </style>
 </head>

 <body>
  <div class="d1"></div>
  <div class="d2"></div>
 </body>
</html>

3.2.标签分类

3.2.1 标签分类

思考：为什么有些标签自己能占一行，为什么有些标签可以在一行内显示？

从布局来分： 块状标签/行内标签/行内块状标签

块状标签(block): 独占一行，可以设置宽高。

常用块状：div p h1-h6 table ul li ol li hr

在没有div之前，一般都是用表格做页面的布局。但是不能满足我们关于定位的需求。

div : 块状标签，层级标签(页面的布局)，没有语义的标签，语义由我们开发者设置。默认宽度为 100% ，高度为0

行内标签(inline): 不能设置宽高（img 和input 标签可以设置宽高 置换元素），可以在一行内排列。初始宽高都由内容撑起来。

常用：input span img a br

span: 行内标签行级文本容器。

行内块状标签(inline-block)：既有行内标签特征(挤在一行)，又有块状标签特征(可以设置宽和高)

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	div{
		border:1px solid red;
		width:100px;
		height:100px;
	}

	a{
		border:1px solid black;
		width:300px;
		height:300px;
	}

	img{
		width:300px;
		height:300px;
	}
  </style>
 </head>

 <body>
  <!--
  标签分类:
  块状标签：1.独占一行，默认撑满容器
            2.可以调整宽度和高度
			3.常用的块状标签: div,h1-h6,p,ul,ol,li,table,form

  行内标签: 1.挤在一行显示,靠内容撑起来容器大小
            2.不能调整宽度和高度
			3.常用的行内标签: span,a,b,u,i,sub,sup

  行内块状: 1.挤在一行显示
		    2.可以设置宽度和高度
			3.常用的行内块状标签: img,input
  -->

  <div>这是一个div1</div>
  <div>这是一个div2</div>
  <a href="#">这是菜单1</a>
  <a href="#">这是菜单2</a>
  <img src="11.jpg" />
  <img src="11.jpg" />


 </body>
</html>

语义化

3.2.2 display 属性

html中的每一个标签都具有默认的display属性。标签是块状还是行内都由默认的display属性决定。

可以通过display属性的值来改变标签的类别。

display:none(不显示) block 块状 inline 行内 inline-block 行内块(既能设置宽高又可以在一行内排列显示);

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	.menu{
		border:2px solid black;
		/*设置容器宽度*/
		width:100px;
		/*除去ul的列表项圆点*/
		list-style:none;
		/*去除ul外边距*/
		margin:0px;
		/*去除ul内填充*/
		padding:0px;
	}

	li{
		border:2px solid red;
		/*height:40px;*/
	}
	a{
		border:2px solid green;
		/*将a标签变为块状*/
		display:block;
		/*高度*/
		height:40px;
		/*调整超链接中的文本位置*/
		/*水平位置*/
		text-align:center;
		/*垂直位置*/
		line-height:40px;
		/*去除下划线*/
		text-decoration:none;

		/*黑色背景，白色字体*/
		background-color:#000;
		color:#fff;
	}

	/*鼠标悬浮修改背景和字体颜色*/
	a:hover{
		background-color:#fff;
		color:#000;
	}
  </style>
 </head>

 <body>
  <!--垂直反色菜单
    实现步骤：
	1.用ul li实现菜单结构
	2.ul是块状，要设定宽度
	3.ul的边框和内容之间有间距
	4.ul有默认的圆点
  -->
  <ul class="menu">
	<li><a href="#">菜单1</a></li>
	<li><a href="#">菜单1</a></li>
	<li><a href="#">菜单1</a></li>
	<li><a href="#">菜单1</a></li>
	<li><a href="#">菜单1</a></li>
  </ul>
 </body>
</html>

3.3.CSS选择器进阶

3.3.1 全局 *

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <style type="text/css">
/*将所有元素的外边距和内填充清空*/
    *{
       margin:0px;
       padding:0px;
    }
	.d1{
		width:38px;
		height:40px;
		border:1px solid black;
		/*使用背景方式引用精灵图中的某个图片*/
		background:url(ddjl.png);
	}

	.d2{
		width:38px;
		height:40px;
		border:1px solid black;
		background:url(ddjl.png) no-repeat 0px -160px;
	}
  </style>
 </head>
 <body>
  <div class="d1"></div>
  <div class="d2"></div>
 </body>
</html>

3.3.2 并集选择器

用逗号分割选择多个元素，使用相同的样式

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <style type="text/css">
	/*并集选择器:*/
	h1,div,span{
		color:red;
	}
  </style>
 </head>

 <body>
  <h1>这是一个标题</h1>
  <div>这是一个div</div>
  <p>这是一个p标签</p>
  <span>这是span</span>
 </body>
</html>

3.3.3 交集选择器

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <style type="text/css">
	/*交集选择器:要同时满足多个选择器条件
	  让第一个h1变红

	  h1.hs  : 前面是h1标签选择器，紧跟一个类选择器,
			   两种选择器共同作用，这被称为交集选择器
	*/
	h1.hs{
		color:red;
	}
	/*请让第一个div的字体颜色变蓝*/

  </style>
 </head>

 <body>
  <h1 class="hs">这是一个标题1</h1>
  <h1>这是一个标题2</h1>
  <div class="xx">这是一个div</div>
  <div>这是一个div</div>
  <p class="hs">这是一个p标签</p>
  <span class="xx">这是span</span>
 </body>
</html>

3.3.4 儿子选择器

/*请让div的儿子辈的b变红*/
	/* > : 子级选择器*/
	div > b{
		color:red;
	}

3.3.5 后代选择器

/*将div下的所有的b变红*/
	 /*儿子和孙子都有变化
	 空格表示后代选择器
	div b{
		color:red;
	}*/

3.3.6 属性选择器

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <style type="text/css">
	/*所有的b变红
	b{
		color:red;
	}*/

	/*将div下的所有的b变红*/
	 /*儿子和孙子都有变化
	 空格表示后代选择器
	div b{
		color:red;
	}*/

	/*请让div的儿子辈的b变红*/
	/* > : 子级选择器*/
	div > b{
		color:red;
	}

	/*请让姓名文本框的边框变红*/
	/*属性选择器，用标签中的特定属性值进行元素筛选*/
	input[type='text']{
		border:1px solid red;
	}

	[type='password']{
		border:1px solid blue;
	}
  </style>
 </head>

 <body>
  <b>这是body下的b</b>
  <div>
	<b>这是div下的b</b>
	<span>
		<b>这是span下的b</b>
	</span>
  </div>
  <hr/>
  姓名:<input type="text" name="xm" /> 
  密码:<input type="password" name="mm"/>
 </body>
</html>

3.3.7 伪类选择器

伪类：

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	/*:link 伪类选择器用于设置a标签默认样式*/
	a:link{
		font-size:20px;
		color:red;
	}
	
	/*:visited 伪类选择器用于设置a标签点击之后的样式*/
	a:visited{
		font-size:40px;
		color:black;
	}
	/*:hover 伪类选择器用于设置鼠标悬浮在a标签上时的样式*/
	a:hover{
		font-size:30px;
		color:orange;
	}
	/*:active 伪类选择器用于设置a标签被点击时的样式*/
	a:active{
		font-size:80px;
		color:purple;
	}
  </style>
 </head>

 <body>
  <a href="#">这是一个菜单</a>
 </body>
</html>

3.3.8 css 特性

cascading style sheet 层叠样式表

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

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

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	div{
		color:red;
	}

	.xxx{
		font-size:30px;
		color:blue;
	}

	#d1{
		background-color:orange;
		color:black;
	}
  </style>
 </head>

 <body>
  <div class="xxx" id="d1">
	这是一个DIV
	<span>这是一个span</span>
  </div>
 </body>
</html>

3.3.9 练习折叠菜单

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <style type="text/css">
	ul{
		list-style:none;
		padding:0px;
		width:120px;
		text-align:center;
		font-size:20px;
	}
	#menu>li{
		background-color:#99ccff;
	}

	#menu li ul{
		background-color:#cccccc;
		display:none;
	}
	#menu>li:hover>ul{
		display:block;
	}
  </style>
 </head>
 <body>
  <ul id="menu">
	<li class="item">
		人事管理
		<ul class="sub">
			<li><a href="#">二级菜单1</a></li>
			<li><a href="#">二级菜单2</a></li>
		</ul>
	</li>
	<li class="item">
		财务管理
		<ul class="sub">
			<li><a href="#">二级菜单1</a></li>
			<li><a href="#">二级菜单2</a></li>
		</ul>
	</li>
	<li class="item">
		销售管理
		<ul class="sub">
			<li><a href="#">二级菜单1</a></li>
			<li><a href="#">二级菜单2</a></li>
		</ul>
	</li>
  </ul>
 </body>
</html>

3.4.浮动 float

标准文档流：数据流(二进制的)

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

块状元素：从上到下。行内元素：从左到右，放满了，换行接着排列

3.4.1 什么是浮动

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

float:left/right;

3.4.2 浮动的由来

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

3.4.3 浮动的特征

浮动之后：

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

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

思考：浮动跟inline-block有点相似？

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

4.3.1 左浮动，右浮动

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

4.3.2 行内元素浮动的影响

4.3.3 块状元素浮动的影响

注意：实际上浮动只会影响浮动元素下边的元素。当我们做浮动布局时，所有下边的同级元素都要进行浮动

3.4.4 浮动的应用

布局：新疆旅游网div布局

3.4.5 浮动塌陷

概念：当一个(没有设置高度的)元素中所有的子元素都进行了浮动，此时，该元素的高度会塌陷为0

解决：

1.直接设置高度;

 2.设置overflow属性 hidden/auto；

3.在父元素中在加一个空的div 设置clear:both; 了解

4.通过元素的after伪类设置清除浮动属性。

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	/*浮动塌陷产生的原因，以及解决方案*/
	/*
	 浮动塌陷原因:
	 1.父容器没有高度
	 2.父容器中所有的子元素都浮动
	   此时导致父容器塌陷，父容器高度为0

	  浮动塌陷的解决方法：
	  1.父容器设置高度
	  2.通过overflow设置hidden/auto,
	     让父容器自动包裹子元素，解决塌陷问题(最常用的方法)
	  3.在浮动元素的后面，添加一个新元素，
	    设置元素的样式属性clear:both。会清除浮动元素的影响
		解决塌陷问题（额外添加标签，不常用）
	  4.使用after伪类解决塌陷问题

	*/
	ul{
		border:5px solid red;
		list-style:none;
		padding:0px;
		/*height:100px;
		overflow:hidden;*/
	}

	/*通过after清除塌陷*/
	ul:after{
		/*在ul后面添加空字符串*/
		content:"";
		/*设置内容块状显示*/
		display:block;
		/*设置内容清除两边的浮动效果*/
		clear:both;
	}

	li{
		width:200px;
		border:3px solid blue;
	}

	.x1{
		height:50px;
		float:left;
	}
	.x2{
		height:30px;
		float:left;
	}
	.x3{
		height:80px;
		float:left;
	}

	.x4{
		/*清除浮动元素的影响
		  clear:left
		  clear:right
		  clear:both
		  clear:none
		*/
		clear:both
	}

	.d1{
		border:3px solid black;
		height:30px;
		background-color:yellow;
	}

	/*:after伪类可以在元素内部追加内容*/
	.mydiv:after{
		/*添加的内容*/
		content:"这是动态添加的内容";
		/*对添加的内容修饰*/
		color:red;
	}
  </style>
 </head>

 <body>
  <div class="mydiv">这是我的原始内容</div>

  <ul>
	<li class="x1">子元素1</li>
	<li class="x2">子元素2</li>
	<li class="x3">子元素3</li>
	<!-- <li class="x4"></li> -->
  </ul>
  <div class="d1"></div>
 </body>
</html>