CSS知识积累

1、自定义变量var

css现在支持自定义变量了,有了这个特性做主题功能就方便多了
html结构

<div class="parent">
  <div class="child">测试内容</div>
</div>

基础用法：var(color,default),var接收两个参数，第一个是自定义样式，第二个是默认样式，当自定义颜色变量不存在时会设置成默认样式

<style>
  :root{
    --color:black/*变量通过--声明*/
  }
  .child{
    color:var(--color,#333) /*文字会显示成黑色*/
  }
</style>

可以在任何标签内声明变量，优先级计算方式与其他样式相同

<style>
  body{
    --color:red/*变量可以在任意标签内声明，优先级计算方式跟别的样式一样*/
  }
  :root{
    --color:black
  }
  .child{
    color:var(--color) /*文字会显示成红色,因为body标签的优先级比伪类的优先级高*/
  }
</style>

下面的例子中parent优先级最高

<style>
  body{
    --color:red
  }
  :root{
    --color:black
  }
  .parent{
     --color:blue /*变量可以在任意标签内声明，这里parent优先级最高*/
  }
  .child{
    color:var(--color) /*文字会显示成蓝色*/
  }
</style>

可以通过js动态修改div的样式修改主题颜色,下面的例子可以通过修改parent类名调整child的字体颜色

<style>
  body{
    --color:red
  }
  :root{
    --color:black
  }
  .parent{
     --color:blue
  }
  .parent02{
    --color:purple  /*parent02比parent优先级高，因为是后声明的，可以通过js动态修改class改变child的字体颜色*/
  }
  .child{
    color:var(--color)
  }
</style>

2、事件穿透pointer-events

事件穿透就是取消该元素事件触发的能力，任何事件都不会在这个元素上触发，事件会透过该元素穿透到他下边的元素上,他可以附两个值auto和none，默认auto

<div class="bottom">
  <div class="top"><div>
<div>
<style>
  .bottom:{
    width:200px;
    height:200px;
    position:relative;
  }
  .top{
    position:absolute;
    top:0;
    left:0;
    z-index:9;
    width:100%;
    height:100%;
    pointer-events:none; /*点击top时点击事件会作用到bottom上边，bottom的点击事件被触发*/
  }
</style>

这个样式可以在一些修饰性元素上添加

3、省略号，查出容器范围显示省略号

<div class="text>省略号，查出容器范围显示省略号</div>
<style>
  /*单行省略号*/
  .text:{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /*多行省略号*/
  .text{
    display: -webkit-box; //
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

4、背景渐变色

<div class="box"></div>
<style>
  .box{
    width:200px;
    height:200px;
    background: linear-gradient(to right, red , blue);
    /*background-image:linear-gradient(to right, red , blue);*//*也可以使用background-image*/
  }
</style>

5、文字渐变色

<div class="box">我有渐变色</div>
<style>
  .box{
        background-image: linear-gradient(90deg,red,blue);
        -webkit-background-clip:text;
        color: transparent;
  }
</style>

6、calc计算

注意：运算符两侧需要空格，没有空格会失效，可以使用vw,vh和百分比进行计算

<style>
.box{
  width:100vw;
  height:calc(100vh - 60px);
}
</style>

7、谷歌浏览器记住密码的input输入框默认背景色覆盖

谷歌记住密码的输入框会有一个如下的背景色，通过background无法覆盖掉，可以使用box-shadow去除

input{
  box-shadow:0 0 1000px #fff inset;
}

8、不固定比例的图片如何居中显示

有些情况图片是后台返回的，宽高比例不固定，居中显示可通过max-width和max-height配合使用

<div>
  <img src={}/>
</div>

<style>
  div{
    width:140px;
    height:140px;
    display:flex;
    justify-content:center;
    align-items:center
  }
  img{
    display:block;
    max-width:130px;
    max-height:130px;  
  }
</style>