css使用过程中遇到的问题集合

CSS学习, 遇到的问题集合 本文总阅读量次

记录一些最近工作中遇到的css相关问题

f12中的class级别关系

  • 注意：f12元素中class="vxe-body--column col_31 col--left col--ellipsis"空格相间的class名是同级别的，在调用时同级中间是没有空格的。.vxe-body--column.col_31.col--left.col--ellipsis这样。
  • 而样式筛选器中两个class名之间的空格表示选择器的父子关系，在调用时要保持中间的空格。
  • 总之，可以理解为前者是html中的写法，后者呈现的css中的写法。

:not的妙用

  • 两种方法实现ul最后一个li元素无边框的效果，使用:not的更语义化
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 实现ul最后一个li元素无边框的效果
    // 方法1
    .ul li {    
         border: 1px solid red;
    }
    .ul li:last-child {    
         border: none;  
     }

    // 方法2（更语义化）
    .ul li:not(:last-child) {    
         border: 1px solid red;
     }

flex 子项margin:auto

  • flex布局中子项margin的auto会尽可能的占据多的位置
  • 实际用法：以此子项可借助margin-left: auto或者margin-right: auto达到子项在容器中靠着最左边或最右边的效果
  • 参考

inline-block不起作用的原因

  • inline-block不起效时，看看是不是高度没给

pointer-events: none控制禁止点击

  • CSS3 pointer-events 属性设置元素是否对鼠标事件做出反应
  • element-ui里，对input组件有禁止点击的属性readonly，但其实css也有相关属性可控制
  • 使用pointer-events: none则无法点击输入框里输入了
  • 注意：
    • 由于设置为pointer-events:none后，相当于该元素已经不存在了，那么这种情况的点击会不会穿透导致点击到它的外层呢？
    • 结果是肯定的，设置pointer-events:none后，点击了子节点是无效的，但同时相当于点击了其父节点
    • 可以通过stopPropagation阻止冒泡解决问题
CSS学习, 遇到的问题集合