CSS 高效开发秘籍：日常总结与实战技巧-1

column-gap的影响

column-gap属性用来设置元素列之间的间隔大小。

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <Dialog />
</div>

在未触发的时候，弹窗是隐藏的，但是column-gap会将其计算在内，导致最后一个div也会产生gap间隙，解决方法就是将<Dialog />拿出来，在外面再套一层div

<div>
    <div id="flexbox">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <Dialog />
</div>

另外，下面这种写法不会对column-gap造成影响，因为它始终保持3个dom

<div id="flexbox">
  <div></div>
  <div></div>
  <ComponentA v-if="isA" />
  <ComponentB v-else />
</div>

根据标签属性判断css: css[]

css[]可以匹配带有指定名称的标签

div[role="group"] // 匹配div标签上带有role="group"属性的标签

div[class='test']    // 匹配div标签上带有class='test'属性的标签

div[class *='test']  // 匹配所有包含了test字符串的class类名的div标签

div[class]  // 匹配所有带有class属性的div标签

[class='all']  // 匹配页面上所有带有class='all'的标签

[class *='as'] // 匹配页面上所有class类且类名带有as字符串的类的标签

我们可以根据标签属性来判断css是否展示，例如element tree的勾选框中，顶层父级不显示勾选框，只显示子级的：

.is_check{
  .el-checkbox .el-checkbox__inner {
    display: none;
  }
  // 只对标签中带有role="group"的生效
  div[role="group"] {
    .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
  }
}

动态style

在组件中，动态style是一个比较好用的方法，你可能会看到某些组件上自带一个：width="100px"这样的属性，通过该属性修改组件的大小，这个就是利用了动态style，比如你想要动态修改输入框组件的宽度，那么可以这么做：
<InputView :width="150"/>
在组件内接收：

<template>
  <div>
    <el-input
      :style="{width: `${width}px !important`}"
      size="small"
      placeholder="请输入"
     ></el-input>
   </div>
</template>

props: {
    width: {
      type: Number,
      default: 100
    }
  }

输入框默认100px，此时根据动态值会修改成150px
语法：:style="{width: ${width}px}"
多个属性用逗号隔开，其实你可以看出来，动态style接收的是一个对象

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

animation简写顺序

/* 名字 / 时间 / 曲线 / 延迟时间 / 重复次数 / 反向或交替运行 / 是否保持结束关键帧 */
animation: anName 2s linear 2s 10 alternate forwards;

box-shadow简写顺序

/* x轴 y轴 模糊度 大小 颜色 */
box-shadow: 10px 10px 10px 10px black;  

/* 内阴影 x轴 y轴 模糊度 大小 颜色 */
box-shadow: inset 10px 10px 10px 10px black;  

css判断标签上多个属性同时存在才会生效

// 两个属性中间不能有空格
.el-menu-item.is-active {
  background: red !important;
}

css鼠标穿透pointer-events

pointer-events属性可以让鼠标点击穿透到子元素，举个例子：你要在某元素上添加水印，那么水印层级肯定是在该元素上方，如果你要点击水印下方的元素就需要鼠标穿透到下方的子元素，此时可以给水印组件添加pointer-events: none;属性，让鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

.watermark {
  pointer-events: none;
}

CSS pointer-events 属性指定在什么情况下(如果有)某个特定的图形元素可以成为鼠标事件的 target。
pointer-events除了指示该元素不是鼠标事件的目标之外，值 none 表示鼠标事件"穿透”该元素并且指定该元素“下面”的任何东西。

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

css换行

1、文字不换行

div{
    white-space:nowrap;
}

2、文字自动换行

div{
    word-wrap: break-word;
    word-break: normal;
}

3、英文单词断行

div{
    word-break:break-all;
 }