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的垂直对齐方式

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1