背景图的使用（视频65-79）

65-高度塌陷问题总结（不熟悉）

Clear和overflow 注：W3C

第三种：

 

66-Ps的基本操作

67、68-开班练习

69-相对定位

小技巧：div.box$*+tab

——

<divclass="box1"></div>

<divclass="box2"></div>

<divclass="box3"></div>

Position开启relative时，开启元素的相对定位：

1、  开启后不设置偏移量，不变化

2、  相对定位是相对于元素在文档流中的变化进行定位

3、  元素不会脱离文档流

4、  相对定位元素会提升一个层级

5、  不会改变元素性质

注：1、position属性为非static值

2、可通过设置left、right、bottom、top设置偏移量

3、通常确定一个元素的位置只需要两个值就可以

 

70-绝对定位

Position开启absolute时，开启绝对定位：

1、  开启后元素脱离文档流

2、  不设置偏移量位置不变化

3、  相对于浏览器窗口进行定位

4、  祖先元素没有开启，以浏览器窗口为主

5、  绝对定位使元素提升一个层级

6、  改变元素的性质

 

71-固定定位

Position开启fixed时，开启固定定位：

1、  固定定位是一种绝对定位

2、  不同的是，固定定位只相对于浏览器窗口就行定位

3、  固定在浏览器窗口的某个位置

4、  IE6不支持

 

72-元素的层级

注：

1、定位元素层级相同，下会盖住上

2、z-index：1，依次递增

3、父元素层级再高，也不会盖住子元素

 

73-opacity

Opacity设置颜色的透明：

1、0-1之间

2、IE8及以下不支持，需要使用filter：aipha（Opacity=50）

注：需要1-100之间的值

3、IE6中无法测试

 

74-背景

设置背景图片：

1、  图大于块，只显示左上

2、  background-image: url(相对路径);img/1.jpg ../img/1.jpg

3、  背景小于，重复平铺

4、  background-repeat: ;

 

75-练习

 

76-背景二

background-attachment:inherit;

注：常见，博客，文字动，图片动

 

77-按钮练习

整合为一个图，通过background-position切换效果

优点：

1、  浏览器发送一次请求加载多图，效率提高

2、  减小图片总大小

 

78-简写属性

Background：

 

79-雪碧图的制作和使用（不熟悉）

整合成一个，靠左右移动位置