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

前端胖頭魚發表於2021-10-08
CSS

前言

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

點選檢視原始碼地址”持續更新中“

1. 解決圖片5px間距

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

image.png

方案1：給父元素設定font-size: 0

效果

image.png

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設定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%;
  /*關鍵css*/
  display: block;
}

方案3：給img設定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%;
  /*關鍵css*/
  vertical-align: bottom;
}

方案4：給父元素設定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;
  /*關鍵css*/
  line-height: 5px;
}

img{
  width: 100%;
}

2.元素高度跟隨視窗

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

效果

image.png

html

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

css

*{
  margin: 0;
  padding: 0;
}

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

3.修改input placeholder樣式

第一個是經過改寫的placeholder，第二個是原生的

效果

image.png

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選擇器將會特別方便

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

效果

image.png

html

<ul>
    <li>
      <span>單元格</span>
      <span>內容</span>
    </li>
    <li>
      <span>單元格</span>
      <span>內容</span>
    </li>
    <li>
      <span>單元格</span>
      <span>內容</span>
    </li>
    <li>
      <span>單元格</span>
      <span>內容</span>
    </li>
</ul>

關鍵css


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

5. 使用flex佈局實現智慧固定底部

內容不夠時，規則說明要處於底部，內容足夠多時，規則說明隨著內容往下沉，大家一定也遇到過類似的需求，使用flex巧妙實現佈局。

flex1.gif

html

<div class="container">
  <div class="main">我是內容區域</div>
  <div class="footer">規則說明</div>
</div>

css

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

.main{
  /* 關鍵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改變游標顏色

在做表單相關需求的時候，有時候需要修改一閃一閃游標的顏色。caret-color屬性完美支援這個需求。

游標.gif

html

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

css

.caret-color {
  /* 關鍵css */
  caret-color: #ffd476;
}

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

預設情況下input type="number"時尾部會出現小箭頭，但是很多時候我們想去掉它，應該怎麼辦呢？

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

效果

數字.gif

html

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

css


/* 關鍵css */
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

8. outline:none移除input狀態線

輸入框選中時，預設會帶藍色狀態線，使用outline:none一鍵移除

效果

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

狀態線.gif

html

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

css


.no-outline{
  outline: none;
}

9.解決IOS滾動條卡頓

在IOS機器上，經常遇到元素滾動時卡頓的情況，只需要一行css即可讓其支援彈性滾動
body,html{   
  -webkit-overflow-scrolling: touch;
}

10.畫三角形

效果

image.png

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;
  /* 基礎樣式 */
  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.畫小箭頭

效果

image.png

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;
    /* 基礎樣式 */
    width: 0;
    height: 0;
    /* 基礎樣式 */
    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.圖片尺寸自適應

vw vs padding

效果

15.gif

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.隱藏滾動條

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

效果

7.gif

注意這裡指的是容器可以滾動，但是滾動條彷彿透明一樣被隱藏
html
<div class="box">
  <div>
    愛情會離開，朋友會離開，快樂會離開，但是考試不會,因為你不會就不會
  </div>
</div>

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

css


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

/* 關鍵程式碼 */
.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.自定義文字選中的樣式

第一個是預設選中狀態，第二個是自定義選中狀態

效果

image.png

html

<div class="box">
  <p class="box-default">
    昨天遇見小學同學，沒有想到他混的這麼差--只放了一塊錢到我的碗裡
  </p>
  <p class="box--custom">
    今年情人節，不出意外的話，一個人過，出意外的話--去醫院過
  </p>
</div>

css

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

15.禁止選擇文字

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

效果

image.png

html

 <div class="box">
  <p>好不容易習慣了自己的長相--去理了個發，又換了一種醜法</p>
  <p>國慶節放假，想跟女朋友去旅遊，請大家幫忙推薦下--哪裡有女朋友</p>
</div>

css


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

16.水平垂直居中

效果

image.png
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;
  // 以下是水平垂直居中關鍵程式碼
  display: flex;
  align-items: center;
  justify-content: center;
}

17.單行文字溢位顯示省略號

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

效果

image.png

html

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

css

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

18.多行文字溢位顯示省略號

示例

image.png

html

<p class="more-line-ellipsis">上帝對人都是公平的給了你醜外表--也會配給你低智商 如果你願意一層一層剝開我的心，你會發現--我缺心眼啊！</p>

css

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

19.清除浮動

一個彷彿有年代感的佈局方式?。現在移動端應該大部分不採用該佈局方式了。

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

效果

image.png

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;
}
/* 關鍵程式碼 */
.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)使網頁呈現哀悼模式

偉大的革命先烈們為我們祖國的誕生做出了巨大的犧牲，在相應節日裡，我們的站點會呈現灰色哀悼模式，以此來紀念先烈們。

效果

image.png

css

body{
  filter: grayscale(1);
}

相關文章