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>
可以在任何標簽內聲明變量驳阎，優(yōu)先級計算方式與其他樣式相同
<style>
body{
--color:red/*變量可以在任意標簽內聲明妓美，優(yōu)先級計算方式跟別的樣式一樣*/
}
:root{
--color:black
}
.child{
color:var(--color) /*文字會顯示成紅色,因為body標簽的優(yōu)先級比偽類的優(yōu)先級高*/
}
</style>
下面的例子中parent優(yōu)先級最高
<style>
body{
--color:red
}
:root{
--color:black
}
.parent{
--color:blue /*變量可以在任意標簽內聲明坐慰，這里parent優(yōu)先級最高*/
}
.child{
color:var(--color) /*文字會顯示成藍色*/
}
</style>
可以通過js動態(tài)修改div的樣式修改主題顏色,下面的例子可以通過修改parent類名調整child的字體顏色
<style>
body{
--color:red
}
:root{
--color:black
}
.parent{
--color:blue
}
.parent02{
--color:purple /*parent02比parent優(yōu)先級高较性，因為是后聲明的用僧，可以通過js動態(tài)修改class改變child的字體顏色*/
}
.child{
color:var(--color)
}
</style>
2、事件穿透pointer-events
事件穿透就是取消該元素事件觸發(fā)的能力赞咙，任何事件都不會在這個元素上觸發(fā)责循，事件會透過該元素穿透到他下邊的元素上,他可以附兩個值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的點擊事件被觸發(fā)*/
}
</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>
