修改輸入占位符樣式、多行文本溢出、隱藏滾動(dòng)條、修改光標(biāo)顏色、水平和垂直居中。多么熟悉的場(chǎng)景啊！前端開(kāi)發(fā)人員幾乎每天都會(huì)與它們打交道。本文收集了13個(gè)CSS技巧，我們一起來(lái)回顧一下。Dbz28資訊網(wǎng)——每日最新資訊28at.com

Dbz28資訊網(wǎng)——每日最新資訊28at.com

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

5px ，你是否經(jīng)常遇到圖片底部多余空間的問(wèn)題？別擔(dān)心，有4種方法可以解決。Dbz28資訊網(wǎng)——每日最新資訊28at.com

方案一：更改其父元素的font-size：0pxDbz28資訊網(wǎng)——每日最新資訊28at.com

方案二：增加img display:block的樣式Dbz28資訊網(wǎng)——每日最新資訊28at.com

方案三：增加img的樣式vertical-align:bottomDbz28資訊網(wǎng)——每日最新資訊28at.com

方案四：增加父元素的樣式line-height:5pxDbz28資訊網(wǎng)——每日最新資訊28at.com

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

目前的前端中，CSS有一個(gè)單位vh，將元素高度樣式設(shè)置為height:100vhDbz28資訊網(wǎng)——每日最新資訊28at.com

3.修改輸入框占位符樣式

這是表單輸入框的占位符屬性。修改默認(rèn)樣式的方法如下：Dbz28資訊網(wǎng)——每日最新資訊28at.com

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

4. 使用 :not 選擇器

除了最后一個(gè)元素之外的所有元素都需要一些樣式，而使用選擇器實(shí)現(xiàn)這一點(diǎn)并不容易。Dbz28資訊網(wǎng)——每日最新資訊28at.com

例如，要實(shí)現(xiàn)列表，最后一個(gè)元素不需要加下劃線，如下所示：Dbz28資訊網(wǎng)——每日最新資訊28at.com

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

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

有時(shí)需要修改光標(biāo)的顏色。現(xiàn)在是插入符號(hào)顏色時(shí)間。Dbz28資訊網(wǎng)——每日最新資訊28at.com

.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;   /* Key style */   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智能布局！Dbz28資訊網(wǎng)——每日最新資訊28at.com

<div class="container">   <div class="main">Content here</div>   <div class="footer">Button</div></div>

CSS代碼如下：Dbz28資訊網(wǎng)——每日最新資訊28at.com

.container {   height: 100vh;   /* Key style */   display: flex;   flex-direction: column;   justify-content: space-between;}.main {   /* Key style */   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)情況下，type="number" 輸入類型末尾會(huì)出現(xiàn)一個(gè)小箭頭，但有時(shí)需要將其刪除。你可以使用以下樣式：Dbz28資訊網(wǎng)——每日最新資訊28at.com

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;}/* Key style */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {   -webkit-appearance: none;}

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

當(dāng)輸入框被選中時(shí)，默認(rèn)會(huì)有一條藍(lán)色的狀態(tài)行，可以使用outline:none去掉。Dbz28資訊網(wǎng)——每日最新資訊28at.com

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

在蘋(píng)果手機(jī)上，滾動(dòng)時(shí)元素經(jīng)常會(huì)卡住。此時(shí)只有一行CSS會(huì)支持彈性滾動(dòng)。Dbz28資訊網(wǎng)——每日最新資訊28at.com

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

10.畫(huà)一個(gè)三角形

.triangle {   display: inline-block;   margin-right: 10px;   /* Basic style */   border: solid 10px transparent;}/* downward triangle */.triangle.bottom {   border-top-color: #0097a7;}/* Upward triangle */.triangle.top {   border-bottom-color: #b2ebf2;}/* Leftward triangle */.triangle.left {   border-right-color: #00bcd4;}/* Right triangle */.triangle.right {   border-left-color: #009688;}

11.自定義選定的文本樣式

文本選擇的顏色和樣式可以通過(guò)styles自定義。關(guān)鍵樣式如下：Dbz28資訊網(wǎng)——每日最新資訊28at.com

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

12. 不允許選擇文本

使用用戶選擇的樣式：none；Dbz28資訊網(wǎng)——每日最新資訊28at.com

13. 使用filter:grayscale(1)將頁(yè)面置于灰度模式

一行代碼會(huì)將頁(yè)面置于灰色模式。Dbz28資訊網(wǎng)——每日最新資訊28at.com

body{  filter: grayscale(1);}

總結(jié)

以上就是我今天想與你分享的13個(gè)關(guān)于CSS的技巧，希望這些技巧對(duì)你有用。Dbz28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-16624-0.html13 種可能對(duì)前端有用的 CSS 技術(shù)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： VS Code 是最佳的開(kāi)發(fā) Flutter 的 IDE 嗎？

下一篇： 18 個(gè)非常有用的網(wǎng)站，有一天你會(huì)用上它