技术分享博客

pointer-events: none; 是看得到却摸不着，点击不到，点击会穿透触发到下层元素的css属性。

<div style="pointer-events: none;"></div>

CSS优先级：是由四个级别和各级别的出现次数决定的。 四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。

优先级的算法：

每个规则对应一个初始"四位数"：0、0、0、0

若是 行内选择符，则加1、0、0、0

若是 ID选择符，则加0、1、0、0

若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0

若是 元素选择符/伪元素选择符，则分别加0、0、0、1

...

1、行内样式表

<div style="width: 100px; height: 100px">style属性的设置</div>

2、内部样式表

<div class="box">类标签设置</div>

3、外部样式表

<!-- CSS链接样式 -->
<link type="text/css" rel="styleSheet"  href="/css.css" />

<!--CSS导入式 -->
<link type="text/css" rel="styleSheet"  href="/css.css" />
<style type="text/css">
    @import url("/css.css");
</style>

边框宽度

/*边框的宽度*/
border-width:3px;
/*上边框的宽度*/
border-top-width:3px;
/*右边框的宽度*/
border-right-width:3px; 
/*下边框的宽度*/
border-bottom-width:3px; 
/*左边框的宽度*/
border-left-width :3px;

边框颜色

/*边框的颜色*/
border-color: #eee;
/*上边框的颜色*/
border-top-color: #eee;
/*右边框的颜色*/
border-right-color: #eee;
/*下边框的颜色*/
border-bottom-color: #eee; 
/*左边框的颜色*/
border-left-color: #eee; 

边框样式

/*边框的样式*/
border-style: solid;
/*上边框的样式*/
border-top-style: solid;
/*右边框的样式*/
border-right-style: solid;
/*下边框的样式*/
border-bottom-style: solid;
/*左边框的样式*/
border-left-style: solid;

display: 指定 HTML 元素的盒子类型

flex-direction: 指定弹性盒子中子元素的排列方式

flex-wrap: 设置当弹性盒子的子元素超出父容器时是否换行

flex-flow: flex-direction 和 flex-wrap 两个属性的简写

justify-content: 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式

align-items: 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式

align-content: 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐

order: 设置弹性盒子中子元素的排列顺序

align-self: 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性

flex: 设置弹性盒子中子元素如何分配空间

flex-grow: 设置弹性盒子的扩展比率

flex-shrink: 设置弹性盒子的收缩比率

flex-basis: 设置弹性盒子伸缩基准值

icon公共样式

.icon{
  display: inline-block;
  width: 16px;
  height: 16px;
  transition" all .3s ease
}

svg图标类样式

.icon-mood{
  background-color: #00000;
  -webkit-mask-image: url("./mood.svg")
}

把颜色值转换床RGB模式

const colorHex2Rgb = (color: any) => {
  var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
  var sColor = color.toLowerCase();

  if(sColor && reg.test(sColor)){
      if(sColor.length === 4){
          var sColorNew = "#";
          
          for(var i=1; i<4; i+=1){
              sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));    
          }
          
          sColor = sColorNew;
      }
      
      var sColorChange = [];
      
      for(var i=1; i<7; i+=2){
          sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));    
      }
      
      return "RGB(" + sColorChange.join(",") + ")";
  }else{
      return sColor;    
  }
};

将RGB模式转换成十六进制

const colorRgb2Hex = (color: any) => {
  var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
  var that = color;
  
  if(/^(rgb|RGB)/.test(that)){
      var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
      var strHex = "#";
      
      for(var i=0; i<aColor.length; i++){
          var hex = Number(aColor[i]).toString(16);
      
          if(hex === "0"){
              hex += hex;    
          }
          
          strHex += hex;
      }
      
      if(strHex.length !== 7){
          strHex = that;    
      }
      
      return strHex.toUpperCase();
  }else if(reg.test(that)){
      var aNum = that.replace(/#/,"").split("");
      
      if(aNum.length === 6){
          return that;    
      }else if(aNum.length === 3){
          var numHex = "#";
      
          for(var i=0; i<aNum.length; i+=1){
              numHex += (aNum[i]+aNum[i]);
          }
          
          return numHex.toUpperCase();
      }
  }else{
      return that.toUpperCase();    
  }
};

% – %单位用于设置相对于当前字体大小的字体大小。

em -相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

注意：这里的 2em 表示当前字体大小的 2 倍。

rem – rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

px -相对于显示器屏幕分辨率

vh - 相对于视口高度的 1%。

vw – 相对于视口宽度的 1%

vue组件中class 和 style 可以通过对象语法和数组语法进行动态绑定

对象写法

<template>
<div :class="{ active: isActive }"></div>
<div :style="{ fontSize: fontSize }">
</template>
<script>
export default {
data() {
  return {
    isActive: true,
    fontSize: 30
  }
}
}

数组写法

<template>
<div :class="[activeClass]"></div>
<div :style="[styleFontSize]">
</template>
<script>
export default {
data() {
  return {
    activeClass: 'active',
    styleFontSize: {
      fontSize: '12px'
    }
  }
}
}
</script>

一、伪类（pseudo classes）

　　用于已有元素处于某种状态时为其添加对应的样式，但是通过DOM树又无法表示这种状态，就可以通过伪类来为其添加样式。

例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般CSS相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式。

二、伪元素（pseudo elements）

　　用于创建一些不在DOM树中的元素，并为其添加样式。

　　例如：我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。