20200817戚权

知识点:

1.position:relative为相对定位，absoulte为绝对定位，flex为固定定位特点

1.相对定位：

1.配合偏移量top/left/right/bottom使用

1. relative是相对于自己原来的位置做偏移

2. 如果相对定位不写偏移量，相当于没写定位，不会影响任何布局效果

3. 相对定位不脱离文档流

4. 当元素被position修饰，并且取值为relative/absolute/fixed 其中一种时，这个元素被称为已定位元素

5. relative多用于充当绝对定位的已定位祖先元素或自身元素位置的微调
   top：离顶部多少距离

   2.绝对定位：

   1. 绝对定位配合偏移属性使用
      top：离顶部多少距离
      left：离左边多少距离
      right：离右边多少距离
      bottom：离底部多少距离
      absolute解锁属性

   2. 绝对定位会脱离文档流

   3. 绝对定位的元素都将变成块级元素
      display:block

   4. 多数情况下，绝对定位的组先级已定位元素，都是relative

      3.固定定位：

      特点

      1. 配合偏移属性使用
         top：离顶部多少距离
         left：离左边多少距离
         right：离右边多少距离
         bottom：离底部多少距离
         fixed解锁属性
      2. 将元素固定在页面的某个位置，不会随着页面滚动条发生位置变化，一直固定在可视区域
      3. 脱离文档流，不占据页面空间，会变为块级元素
      4. 永远都是相对于浏览器实现位置初始化

2面试题：页面当中的隐藏，display:none; visibility:hidden; opacity:0 ; input[type="hidden"]，哪种方法是让元素在页面中真正隐藏？

1.隐藏后占据空间visibility:hidden;opacity:0;

2.影藏后不占据空间display:none;input[type="hidden"]；

3.高度坍塌问题(面试题)

​ 1.块级元素的高，如果不设置，默认靠内容撑开，如果没有设置高的块级元素，内部的所有子元素都浮动，这个块级元素认为自己内部没有元素，所以就没有高了，这种现象叫做高度坍塌
​ 2.由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0

4.解决高度坍塌

解决高度坍塌
1. 父元素设置高度，弊端：不是每次都能明确知道具体高度
2. 父元素设置浮动，弊端：会影响父元素后续元素
3. 为父元素设置overflow属性，弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏,，取值：hidden/auto
4. 父元素设置display:table，弊端：盒模型属性已经改变，会造成其他问题
5. 在父元素中追加一个空的，没有宽高的div，设置clear：both；
6. 使用内容生成的方式清除浮动
    .clear:after{
 content:"";
 display:block;
 clear:both;

5.opacity和rgba的区别

1. opacity，元素内部只要跟颜色相关的样式，都会变透明
2. rgba，只会改变当前的透明度

6.垂直对齐：top，middle，bottom，baseline：默认值，基线

1. table/td/th：设置表格中文本的垂直对齐方式

1. input：设置input前后的文本、行内、行内块与这个input的垂直对齐方式
2. img：设置img前后的文本、行内、行内块与这个img的垂直对齐方式