第四章浮动 ① 笔记

1.内容回顾
- 1.1.课前测试
- 1.2.上节内容
2.本章目标
- 2.1. 精灵图
- 2.2. css选择器的深入
- 2.3. 标签布局分类
- 2.4.浮动
3.具体内容
- 3.1.精灵图
- - 1. 什么是精灵图
  - 2 为什么要用精灵图
  - 3 案例：当当图标
- 3.2.标签分类
- - 1 .标签分类行内元素块状元素
  - 2 display 属性
- 3.3.CSS选择器进阶
- - 1 全局 *
  - 2 并集选择器
  - 3 交集选择器
  - 4 儿子选择器
  - 5 后代选择器
  - 6 属性选择器
  - 7 伪类选择器默认/访问过/浮动/点击（之后的样式）
  - 8 css 特性
  - 9 练习折叠菜单
- 3.4.浮动 float
- 4.1 什么是浮动
- 4.2 浮动的由来
- 4.3 浮动的特征
- - 1 左浮动，右浮动
  - 2 行内元素浮动的影响
  - 3 块状元素浮动的影响
- 4.4 浮动的应用
- 4.5 浮动塌陷
4.内容总结

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:leftclear:rightclear:bothclear: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>

4.内容总结

精灵图
标签分类
css选择器进阶
float浮动