第四章浮动 ① 笔记

1.内容回顾

1.1.课前测试

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<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>

1.2.上节内容

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">
		<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.标签分类

1 .标签分类行内元素块状元素

思考：为什么有些标签自己能占一行，为什么有些标签可以在一行内显示？
从布局来分：块状标签/行内标签/行内块状标签
块状标签(block): 独占一行，可以设置宽高。
常用块状：div p h1-h6 table ul li ol li hr (hr 分割线标签)
在没有div之前，一般都是用表格做页面的布局。但是不能满足我们关于定位的需求。
div : 块状标签，层级标签(页面的布局)，没有语义的标签，语义由我们开发者设
置。默认宽度为 100% ，高度为0
行内标签(inline): 不能设置宽高（img 和input 标签可以设置宽高置换元素），可以在
一行内排列。初始宽高都由内容撑起来。
常用：input span img a br (br 换行标签)
span: 行内标签行级文本容器。
行内块状标签(inline-block)：既有行内标签特征(挤在一行)，又有块状标签特征(可以设置宽和高)

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<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>

语义化

2 display 属性

html中的每一个标签都具有默认的display属性。标签是块状还是行内都由默认的display
属性决定。
可以通过display属性的值来改变标签的类别。
display:none(不显示) block 块状 inline 行内 inline-block 行内块(既能设置宽高
又可以在一行内排列显示);

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<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选择器进阶

1 全局 *

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<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>

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 交集选择器

<!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>

4 儿子选择器

5 后代选择器

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>

7 伪类选择器默认/访问过/浮动/点击（之后的样式）

伪类：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<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>

扩展：参考 w3school文档

8 css 特性

cascading style sheet 层叠样式表
层叠性：如果多个选择器同时设置一个标签，如果设置的样式相同，按照优先级显示(权
重)，否则，同时起作用。
继承性：子代元素会默认的继承父元素的样式（字体样式/文本样式），布局样式都不能继承。

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<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>

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

标准文档流：数据流(二进制的)
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
块状元素：从上到下。行内元素：从左到右，放满了，换行接着排列

4.1 什么是浮动

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

4.2 浮动的由来

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

4.3 浮动的特征

浮动之后：
块状元素浮动：能在一行内排列。失去独占一行的特性。
行内元素浮动：可以设置宽高。
思考：浮动跟inline-block有点相似？
inline-block始终处于标准文档流，但是浮动脱离了标准文档流。

1 左浮动，右浮动

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

2 行内元素浮动的影响

3 块状元素浮动的影响

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

4.4 浮动的应用

布局：新疆旅游网div布局

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">
		<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>