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

1.回顾

 
  
  
  
  
  
  
  
 

 
  
	
	
		淘宝
		京东
		B站
		当当网
	

 

2.本章目标

2.1. 精灵图

2.2. css选择器的深入

2.3. 标签布局分类

2.4.浮动

3.具体内容 3.1.精灵图

1. 什么是精灵图

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

2. 为什么要用精灵图

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

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

3. 案例：当当图标

 

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)：既有行内标签特征(挤在一行)，又有块状标签特征(可以设置宽和高)

 
  
  
  
  
  
  
  
 

 
  

  这是一个div1
  这是一个div2
  这是菜单1
  这是菜单2
  
  


 

语义化

3.2.2 display 属性

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

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

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

 
  
  
  
  
  
  
  
 

 
  
  
	菜单1
	菜单1
	菜单1
	菜单1
	菜单1
  
 

3.3.CSS选择器进阶 3.3.1 全局 *

3.3.2 并集选择器

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

 
  
  
  
 

 
  这是一个标题
  这是一个div
  
这是一个p标签
  这是span
 

3.3.3 交集选择器

 
  
  
  
 

 
  这是一个标题1
  这是一个标题2
  这是一个div
  这是一个div
  
这是一个p标签
  这是span
 

3.3.4 儿子选择器

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

3.3.5 后代选择器

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

3.3.6 属性选择器

 
  
  
  
 

 
  这是body下的b
  
	这是div下的b
	
		这是span下的b
	
  
  

  姓名: 
  密码:
 

3.3.7 伪类选择器

伪类：

 
  
  
  
  
  
  
  
 

 
  这是一个菜单
 

3.3.8 css 特性

cascading style sheet 层叠样式表

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

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

 
  
  
  
  
  
  
  
 

 
  
	这是一个DIV
	这是一个span
  
 

3.3.9 练习 折叠菜单

 
  
  
  
 
 
  
	
		人事管理
		
			二级菜单1
			二级菜单2
		
	
	
		财务管理
		
			二级菜单1
			二级菜单2
		
	
	
		销售管理
		
			二级菜单1
			二级菜单2
		
	
  
 

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伪类设置清除浮动属性。

 
  
  
  
  
  
  
  
 

 
  这是我的原始内容

  
	子元素1
	子元素2
	子元素3