20+ css高頻實用片段，提高幸福感的小技能你可以擁有噢

????? ? ? ? ? ?關(guān)注《前端陽光》，回復(fù)加群，加入群聊
前言

?

修改input placeholder樣式、多行文本溢出、隱藏滾動條、修改光標(biāo)顏色、水平垂直居中...多么熟悉的功能呀！前端童鞋幾乎每天都會和他們打交道，一起來總結(jié)我們的css幸福小片段吧！下次不用百度、不用谷歌，這里就是你的港灣。

?

點擊查看源碼地址”持續(xù)更新中“

1. 解決圖片5px間距

?

你是否經(jīng)常遇到圖片底部莫名其妙多出來5px的間距，不急，這里有4種方式讓它消失

?

「方案1：給父元素設(shè)置font-size: 0」

「效果」

「html」

<div?class="img-container">
??<img?src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a"?alt="">
div>

「css」

html,body{
??margin:?0;
??padding:?0;
}

.img-container{
??background-color:?lightblue;
??font-size:?0;
}

img{
??width:?100%;
}

「方案2：給img設(shè)置display: block」

「效果同上」

「html」

<div?class="img-container">
??<img?src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a"?alt="">
div>

「css」

html,body{
??margin:?0;
??padding:?0;
}

.img-container{
??background-color:?lightblue;
}

img{
??width:?100%;
??/*關(guān)鍵css*/
??display:?block;
}

「方案3：給img設(shè)置vertical-align: bottom」

「效果同上」

「html」

<div?class="img-container">
??<img?src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a"?alt="">
div>

「css」

html,body{
??margin:?0;
??padding:?0;
}

.img-container{
??background-color:?lightblue;
}

img{
??width:?100%;
??/*關(guān)鍵css*/
??vertical-align:?bottom;
}

「方案4：給父元素設(shè)置line-height: 5px;」

「效果同上」

「html」

<div?class="img-container">
??<img?src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a"?alt="">
div>

「css」

html,body{
??margin:?0;
??padding:?0;
}

.img-container{
??background-color:?lightblue;
??/*關(guān)鍵css*/
??line-height:?5px;
}

img{
??width:?100%;
}

2.元素高度跟隨窗口

?

有時候希望某個元素的高度和窗口是一致的，如果用百分比設(shè)置，那html、body等元素也要跟著一頓設(shè)置height: 100%有沒有更簡單的方法呢？

?

「效果」

「html」

<div?class="app">
??<div?class="child">div>
div>

「css」

*{
??margin:?0;
??padding:?0;
}

.child{
??width:?100%;
??/*關(guān)鍵css*/
??height:?100vh;
??background-image:?linear-gradient(180deg,?#2af598?0%,?#009efd?100%);
}

3.修改input placeholder樣式

「第一個是經(jīng)過改寫的placeholder，第二個是原生的」

「效果」

「html」

<input?type="text"?class="placehoder-custom"?placeholder="請輸入用戶名搜索">
<input?type="text"?placeholder="請輸入用戶名搜索">

「css」

input{
??width:?300px;
??height:?30px;
??border:?none;
??outline:?none;
??display:?block;
??margin:?15px;
??border:?solid?1px?#dee0e9;
??padding:?0?15px;
??border-radius:?15px;
}

.placehoder-custom::-webkit-input-placeholder{
??color:?#babbc1;
??font-size:?12px;
}

4. 巧用not選擇器

?

有些情況下所有的元素都需要某些樣式，唯獨最后一個不需要，這時候使用not選擇器將會特別方便

?

如下圖：最后一個元素沒有下邊框

「效果」

「html」

<ul>
????<li>
??????<span>單元格span>
??????<span>內(nèi)容span>
????li>
????<li>
??????<span>單元格span>
??????<span>內(nèi)容span>
????li>
????<li>
??????<span>單元格span>
??????<span>內(nèi)容span>
????li>
????<li>
??????<span>單元格span>
??????<span>內(nèi)容span>
????li>
ul>

「關(guān)鍵css」

li:not(:last-child){
??border-bottom:?1px?solid?#ebedf0;
}

5. 使用flex布局實現(xiàn)智能固定底部

?

內(nèi)容不夠時，規(guī)則說明要處于底部，內(nèi)容足夠多時，規(guī)則說明隨著內(nèi)容往下沉，大家一定也遇到過類似的需求，使用flex巧妙實現(xiàn)布局。

?

「html」

class="container">
??<div?class="main">我是內(nèi)容區(qū)域div>
??<div?class="footer">規(guī)則說明div>
</div>

「css」

?.container{
??height:?100vh;
??/*?關(guān)鍵css處?*/
??display:?flex;
??flex-direction:?column;
??justify-content:?space-between;
}

.main{
??/*?關(guān)鍵css處?*/
??flex:?1;
??background-image:?linear-gradient(45deg,?#ff9a9e?0%,?#fad0c4?99%,?#fad0c4?100%);
??display:?flex;
??align-items:?center;
??justify-content:?center;
??color:?#fff;
}

.footer{
??padding:?15px?0;
??text-align:?center;
??color:?#ff9a9e;
??font-size:?14px;
}

6. 使用caret-color改變光標(biāo)顏色

?

在做表單相關(guān)需求的時候，有時候需要修改一閃一閃光標(biāo)的顏色。caret-color屬性完美支持這個需求。

?

「html」

<input?type="text"?class="caret-color"?/>

「css」

.caret-color?{
??/*?關(guān)鍵css?*/
??caret-color:?#ffd476;
}

7. 移除type="number"尾部的箭頭

?

默認情況下input type="number"時尾部會出現(xiàn)小箭頭，但是很多時候我們想去掉它，應(yīng)該怎么辦呢？

?

如圖：第一個輸入框沒有去掉小箭頭的效果，第二個去掉了。

「效果」

「html」

<input?type="number"?/>
<input?type="number"?class="no-arrow"?/>

「css」

/*?關(guān)鍵css?*/
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button?{
??-webkit-appearance:?none;
}

8. outline:none移除input狀態(tài)線

?

輸入框選中時，默認會帶藍色狀態(tài)線，使用outline:none一鍵移除

?

「效果」

如圖：第一個輸入框移除了，第二個沒有移除

「html」

<input?type="number"?/>
<input?type="number"?class="no-arrow"?/>

「css」

.no-outline{
??outline:?none;
}

9.解決IOS滾動條卡頓

?

在IOS機器上，經(jīng)常遇到元素滾動時卡頓的情況，只需要一行css即可讓其支持彈性滾動

?

body,html{???
??-webkit-overflow-scrolling:?touch;
}

10.畫三角形

「效果」

「html」

<div?class="box">
??<div?class="box-inner">
????<div?class="triangle?bottom">div>
????<div?class="triangle?right">div>
????<div?class="triangle?top">div>
????<div?class="triangle?left">div>
??div>
div>

「css」

.triangle?{
??display:?inline-block;
??margin-right:?10px;
??/*?基礎(chǔ)樣式?*/
??border:?solid?10px?transparent;
}
??/*下*/
.triangle.bottom?{
??border-top-color:?#0097a7;
}
??/*上*/
.triangle.top?{
??border-bottom-color:?#b2ebf2;
}
/*左*/
.triangle.left?{
??border-right-color:?#00bcd4;
}
/*右*/
.triangle.right?{
??border-left-color:?#009688;
}

11.畫小箭頭

「效果」

「html」

<div?class="box">
??<div?class="box-inner">
????<div?class="triangle?bottom">div>
????<div?class="triangle?right">div>
????<div?class="triangle?top">div>
????<div?class="triangle?left">div>
??div>
div>

「css」

??.arrow?{
????display:?inline-block;
????margin-right:?10px;
????/*?基礎(chǔ)樣式?*/
????width:?0;
????height:?0;
????/*?基礎(chǔ)樣式?*/
????border:?16px?solid;
????border-color:?transparent?#CDDC39?transparent?transparent;
????position:?relative;
??}

??.arrow::after?{
????content:?"";
????position:?absolute;
????/*?通過位移覆蓋背景?*/
????right:?-20px;
????top:?-16px;
????border:?16px?solid;
????border-color:?transparent?#fff?transparent?transparent;
??}
??/*下*/
??.arrow.bottom?{
????transform:?rotate(270deg);
??}
??/*上*/
??.arrow.top?{
????transform:?rotate(90deg);
??}
??/*左*/
??.arrow.left?{
????transform:?rotate(180deg);
??}
??/*右*/
??.arrow.right?{
????transform:?rotate(0deg);
??}

12.圖片尺寸自適應(yīng)

「vw vs padding」

「效果」

「html」

<div?class="box">
??<div?class="img-container">
????<img?src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg"?alt="">
??div>
div>

<div?class="box">
??<div?class="img-container">
????<img?src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg"?alt="">
??div>
div>

<div?class="box-vw">
??<div?class="img-container">
????<img?src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg"?alt="">
??div>
div>

「css」

.box,?.box-vw{
??background-color:?#f5f6f9;
??border-radius:?10px;
??overflow:?hidden;
??margin-bottom:?15px;
}

.box:nth-of-type(2){
??width:?260px;
}
/*?vw方案?*/
.box-vw?.img-container{
??width:?100vw;
??height:?66.620879vw;
??padding-bottom:?inherit;
}
/*?padding方案?*/
.img-container{
??width:?100%;
??height:?0;
??/*?圖片的高寬比?*/
??padding-bottom:?66.620879%;
}

img{
width:?100%;
}

13.隱藏滾動條

「第一個可以看到滾動條，第二個已隱藏了」

「效果」

?

「注意」這里指的是容器可以滾動，但是滾動條仿佛透明一樣被隱藏「html」

?

<div?class="box">
??<div>
????愛情會離開，朋友會離開，快樂會離開，但是考試不會,因為你不會就不會
??div>
div>

<div?class="box?box-hide-scrollbar">
??<div>只是因為在人群中多看了你一眼，你就--問我游泳健身了解一下？div>
div>

「css」

.box?{
??width:?375px;
??overflow:?scroll;
}

/*?關(guān)鍵代碼?*/
.box-hide-scrollbar::-webkit-scrollbar?{
??display:?none;?/*?Chrome?Safari?*/
}

.box?>?div?{
??margin-bottom:?15px;
??padding:?10px;
??background-color:?#f5f6f9;
??border-radius:?6px;
??font-size:?12px;
??width:?750px;
}

14.自定義文本選中的樣式

「第一個是默認選中狀態(tài)，第二個是自定義選中狀態(tài)」

「效果」

「html」

<div?class="box">
??<p?class="box-default">
????昨天遇見小學(xué)同學(xué)，沒有想到他混的這么差--只放了一塊錢到我的碗里
??p>
??<p?class="box--custom">
????今年情人節(jié)，不出意外的話，一個人過，出意外的話--去醫(yī)院過
??p>
div>

「css」

.box-custom::selection?{
??color:?#ffffff;
??background-color:?#ff4c9f;
}

15.禁止選擇文本

「第一個可以選中，第二個無法選中」

「效果」

「html」

?<div?class="box">
??<p>好不容易習(xí)慣了自己的長相--去理了個發(fā)，又換了一種丑法p>
??<p>國慶節(jié)放假，想跟女朋友去旅游，請大家?guī)兔ν扑]下--哪里有女朋友p>
div>

「css」

.box?p:last-child{
??user-select:?none;
}

16.水平垂直居中

「效果」

「html」

<div?class="parent">
??<p?class="child">每次臨時抱佛腳的時候--佛祖他總是給我一腳p>
div>

「css」

.parent{
??padding:?0?10px;
??background-color:?#f5f6f9;
??height:?100px;
??border-radius:?6px;
??font-size:?14px;
??//?以下是水平垂直居中關(guān)鍵代碼
??display:?flex;
??align-items:?center;
??justify-content:?center;
}

17.單行文本溢出顯示省略號

?

這個點估計全世界的前端都知道如何寫，所以還是看為您準(zhǔn)備的笑話樂一樂更有價值。

?

「效果」

「html」

<p?class="one-line-ellipsis">不要輕易向命運低頭，因為一低頭就會看到贅肉?如果你愿意一層一層剝開我的心p>

「css」

.one-line-ellipsis?{
??overflow:?hidden;
??white-space:?nowrap;
??text-overflow:?ellipsis;
??/*?非必須，只是為了制造一行放不下的效果?*/
??max-width:?375px;?
}

18.多行文本溢出顯示省略號

「示例」

「html」

<p?class="more-line-ellipsis">上帝對人都是公平的給了你丑外表--也會配給你低智商?如果你愿意一層一層剝開我的心，你會發(fā)現(xiàn)--我缺心眼??！p>

「css」

.more-line-ellipsis?{
??overflow:?hidden;
??text-overflow:?ellipsis;
??display:?-webkit-box;
??/*?設(shè)置n行，也包括1?*/
??-webkit-line-clamp:?2;
??-webkit-box-orient:?vertical;
}

19.清除浮動

?

一個仿佛有年代感的布局方式??。現(xiàn)在移動端應(yīng)該大部分不采用該布局方式了。

?

「從圖中可以看出，外層高度并未塌陷，就是使用了clearfix類的原因」

「效果」

「html」

<div?class="box?clearfix">
??<div?class="float-left">div>
??<div?class="float-left?float-left2">div>
??<div?class="float-left?float-left3">div>
div>

「css」

body?{
??padding:?15px;
??color:?#324b64;
}
/*?關(guān)鍵代碼?*/
.clearfix{
??zoom:?1;
}
.clearfix::after{
??display:?block;
??content:?'';
??clear:?both;
}

.box?{
??padding:?10px;
??background-color:?#f5f6f9;
??border-radius:?6px;
??font-size:?12px;
}

.box?>div{
??width:?29%;
??height:?100px;
}

.float-left{
??background-color:?#faa755;
??float:?left;
??margin-right:?10px;
}

.float-left2{
??background-color:?#7fb80e;
}

.float-left3{
??background-color:?#b2d235;
}

20. 使用filter:grayscale(1)使網(wǎng)頁呈現(xiàn)哀悼模式

?

偉大的革命先烈們?yōu)槲覀冏鎳恼Q生做出了巨大的犧牲，在相應(yīng)節(jié)日里，我們的站點會呈現(xiàn)灰色哀悼模式，以此來紀念先烈們。

?

「效果」

「css」

body{
??filter:?grayscale(1);
}