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

三、总结

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