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>

可以在任何標簽內聲明變量驳阎,優(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-widthmax-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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末伸头,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子舷蟀,更是在濱河造成了極大的恐慌恤磷,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件野宜,死亡現場離奇詭異扫步,居然都是意外死亡,警方通過查閱死者的電腦和手機匈子,發(fā)現死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門河胎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人虎敦,你說我怎么就攤上這事游岳。” “怎么了其徙?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵胚迫,是天一觀的道長。 經常有香客問我唾那,道長访锻,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮期犬,結果婚禮上河哑,老公的妹妹穿的比我還像新娘。我一直安慰自己龟虎,他們只是感情好璃谨,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著遣总,像睡著了一般睬罗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上旭斥,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天容达,我揣著相機與錄音,去河邊找鬼垂券。 笑死花盐,一個胖子當著我的面吹牛,可吹牛的內容都是我干的菇爪。 我是一名探鬼主播算芯,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼凳宙!你這毒婦竟也來了熙揍?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤氏涩,失蹤者是張志新(化名)和其女友劉穎届囚,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體是尖,經...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡意系,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了饺汹。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蛔添。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖兜辞,靈堂內的尸體忽然破棺而出迎瞧,到底是詐尸還是另有隱情,我是刑警寧澤逸吵,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布夹攒,位于F島的核電站,受9級特大地震影響胁塞,放射性物質發(fā)生泄漏咏尝。R本人自食惡果不足惜压语,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望编检。 院中可真熱鬧胎食,春花似錦、人聲如沸允懂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蕾总。三九已至粥航,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間生百,已是汗流浹背递雀。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蚀浆,地道東北人缀程。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像市俊,于是被迫代替她去往敵國和親杨凑。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容