一、昨日内容回顾
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