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"]

三、总结

随着时间的增加,学习的知识点的难度较之前也有所提高,今天老师所讲的内容消化的还不是很好,还得日后勤加练习,加强巩固。

标签

评论

this is is footer