python全栈图_python全栈开发day41-background、精灵图技术、定位（相、绝、固）、z-index...

一、昨日内容回顾

1.标准文档流定义：

https://www.jianshu.com/p/b4d2c1dfd6e5

2.浮动和浮动的四大特性

1)脱标

2) 浮动元素相互贴靠

3)字围

4)紧凑(浮动的元素不分为块还是行内标签，宽高可以任意设置)

3.清除浮动带来的影响

1) 父盒子设置固定高度

2) 在浮动元素的后边加上一个空的盒子模块，属性为clear:both

3)伪元素清除法(****)

4)父盒子overflow：hidden(***)

4.margin塌陷

标准流下才会出现margin塌陷(上下)问题；

非标准下的盒子：浮动、绝对定位、固定定位

不会出现margin塌陷问题。

5.字体属性、文本属性、颜色

1)文本属性

text-algin，text-decoration，text-space，color，text-indent

单行文本，多行文本居中 line-height。

2)字体属性

text-weight、font-size、font-famliy、。。。。

6.超链接导航案例

div

div

ul

li

a

二、今日内容总结

1.background

backgroud-color:rgba(255,255,0,.5) alpha

backgroud-image：url('')

backgroud-repeat:no-repeat | repeat-x | repeat-y |repeat

backgroud-position：水平方式 垂直方向

left center right(top bottom)

如果是正值，那么是调背景图的位置，如果是负值，切图

backgroud-attachment：fixed 固定背景图(固定其所在的盒子里 盒子动它也动)

通天banner：backgroud-position：center top

2.CSS sprite

3.定位(****)

1) 相对定位 position：relative

特点

(1)不脱标

(2)形影分离

(3)人走留坑

作用：

微调元素、父相子绝参考点(绝对位置跟随移动后位置作为参考点而不是他留下的坑，移动后当然也占用位置)

相对定位的参考点：相对于原来的位置调整

2) 绝对定位

特点：

(1) 绝对定位的盒子脱离标准流

(2) 压盖

(3)父相子绝

(4)设置绝对定位之后，不区分行内元素还是块级元素，都能设置宽高。

一、单独一个绝对定位的盒子或者说父元素除static无其他定位元素，

1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置

2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

二、嵌套的盒子

父相子绝： 父辈元素设置相对定位，子元素设置绝对定位，子元素会以父辈元素的左上角作为参考点

不仅仅是‘父相子绝’

父绝子绝没有实战意义 父固子绝 都是以父辈元素为基准

3) 固定定位

4.z-index

1)z-index 值表示谁压着谁，数值大的压盖住数值小的。

2)只有定位了的元素(relative,absolute,fixed)，才能有z-index,浮动元素和标准流不能设置z-index

3) z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在　　　　　　　　　　HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

4) 从父现象：父亲怂了，儿子再牛逼也没用

css简单布局：

重要知识点***：

1.浮动

2.定位

3.z-index

4.display

三、预习与扩展