今天小編給大家分享一下提升前端開發(fā)效率的CSS技巧有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)公司專注于滎陽(yáng)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供滎陽(yáng)營(yíng)銷型網(wǎng)站建設(shè)，滎陽(yáng)網(wǎng)站制作、滎陽(yáng)網(wǎng)頁(yè)設(shè)計(jì)、滎陽(yáng)網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造滎陽(yáng)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供滎陽(yáng)網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

1. 解決圖片5px間距問(wèn)題

是否經(jīng)常遇到圖片底部多出 5px 間距的問(wèn)題？不著急，有4種方法可以解決。

• 解決方案 1：將其父元素的 font-size:0px

• 解決方案 2：將 img 的樣式增加 display:block

• 解決方案 3：將 img 的樣式增加 vertical-align:bottom

• 解決方案 4：將父元素的樣式增加 line-height:5px

2. 如何讓元素高度與窗口相同

在現(xiàn)在前端中，CSS有一個(gè)單位是 vh，將元素高度樣式設(shè)置為 height:100vh

3. 修改輸入框 placeholder 樣式

這個(gè)是表單輸入框占位符屬性，如何來(lái)修改默認(rèn)樣式，如下：

input::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

4. 使用 :not 選擇器

除了最后一個(gè)元素之外的所有元素都需要一些樣式，使用 not 選擇器可以非常容易實(shí)現(xiàn)。

例如實(shí)現(xiàn)一個(gè)列表，最后一個(gè)元素不需要下劃線，如下：

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

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

有時(shí)需要修改光標(biāo)的顏色?，F(xiàn)在是插入符號(hào)顏色顯示時(shí)間。

.caret-color {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  /* 關(guān)鍵樣式 */
  caret-color: #ffd476;
}

.caret-color::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}

6. 使用 flex 布局將元素智能地固定在底部

當(dāng)內(nèi)容不夠時(shí)，按鈕應(yīng)該在頁(yè)面底部。當(dāng)有足夠的內(nèi)容時(shí)，按鈕應(yīng)該跟隨內(nèi)容。當(dāng)遇到類似問(wèn)題時(shí)，可以使用flex實(shí)現(xiàn)智能布局！

<div class="container">
  <div class="main">這里為內(nèi)容</div>
  <div class="footer">按鈕</div>
</div>

CSS 代碼如下：

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

.main {
  /* 關(guān)鍵樣式 */
  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;
}

7. 去掉 type="number" 末尾的箭頭

默認(rèn)情況下，input 類型為 type="number" 的末尾會(huì)出現(xiàn)一個(gè)小箭頭，但有時(shí)需要將其去掉，可以用一下樣式：

input {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  caret-color: #ffd476;
  display: block;
}

input::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}
/* 關(guān)鍵樣式 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

8. 使用 outline:none 刪除輸入狀態(tài)行

當(dāng)輸入框被選中時(shí)，默認(rèn)會(huì)有一個(gè)藍(lán)色的狀態(tài)行，可以使用 outline:none 將其去掉。

9. 解決iOS滾動(dòng)條卡住的問(wèn)題

在蘋果手機(jī)上，經(jīng)常會(huì)出現(xiàn)滾動(dòng)時(shí)元素卡住的情況，這個(gè)時(shí)候只有一行CSS會(huì)支持彈性滾動(dòng)。

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

10. 畫三角形

.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. 自定義選定的文本樣式

可以通過(guò)樣式自定義文本選擇的顏色和樣式，關(guān)鍵樣式如下：

::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

12. 不允許選擇的文本

使用樣式 user-select: none;

13 使用 filter:grayscale(1) 使頁(yè)面處于灰色模式

一行代碼將使頁(yè)面處于灰色模式。

body{
  filter: grayscale(1);
}

以上就是“提升前端開發(fā)效率的CSS技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：提升前端開發(fā)效率的CSS技巧有哪些
本文地址：http://chinadenli.net/article28/jscocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、建站公司、網(wǎng)站維護(hù)、企業(yè)網(wǎng)站制作、商城網(wǎng)站、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)