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>
