8-17 程宗武
集训day_08
一、知识总结
1、页面布局定位
1、相对定位
1)只有当元素被position修饰时,并且取值为relative/absolute/fixed其中一种时,这个元素解锁4个偏移属性(top、left、right、bottom)
2)相对定位不脱离文档流
3)当一个元素被position其中一种取值修饰时,这个元素就被称为已定位元素
4)relative多用于充当绝对定位元素的祖先元素(相当于参照物)
2、绝对定位
1)、绝对定位会脱离文档流
2)、绝对定位的元素都将变成块级元素
3)、偏移的参照物为:最近的,已定位的,祖先元素的左上角
3、浮动定位
1)、元素一旦设置了浮动定位,就会脱离原本的文档流,变为块级元素
2)、文本、行内元素等遇到浮动元素的特殊情况:他们如果不浮动是不会被浮动元素覆盖的,而是巧妙的避开浮动元素显示
4、z-index
1)根据html代码,后定位的元素,丢叠顺序高(当两个定位的元素有重叠时,写在后面的定位元素会叠在写在前面的元素的上面)
2、CSS常用属性
1、透明度
opacity和rgba的区别:
1、opacity,元素内部只要跟颜色相关的样式,都会变透明
2、rgba,只会改变当前的透明度
3、弹性布局
1、什么是项目
弹性布局的子元素们,称之为弹性项目,项目属性只能设置在某一个项目上,不影响其他项目效果
1)设置项目在主轴上的排列顺序
order:定义项目于的排列顺序,默认为零,值越小越靠近项目的起点
例:交换一个列表中两个元素的值
二、面试题
1、高度坍塌
现象举例:背景颜色消失的问题:如果一个块级元素没有设置高度,这时如果将这个块级元素设置为浮动,那么这个块级元素会认为内部没有元素也就没有了高,因此原本设置了的背景颜色就会消失。
解决方法(最佳):
1、在父元素中追加一个空的div,设置clear:both
2、使用伪元素的方式在最尾部增加一个块级元素并设置:clear:both
2、页面中的隐藏
面试题:页面当中的隐藏,display:none; visibility:hidden; opacity:0 ; input[type="hidden"],哪种方法是让元素在页面中真正隐藏?
隐藏后占据空间:visibility:hidden; opacity:0;
隐藏后不占据空间:display:none; input[type="hidden"]
三、总结
随着时间的增加,学习的知识点的难度较之前也有所提高,今天老师所讲的内容消化的还不是很好,还得日后勤加练习,加强巩固。
评论