12 個(gè)實(shí)用的高級(jí)前端 CSS 技巧
1.解決圖片5px間距問(wèn)題
您是否經(jīng)常遇到圖片底部多出5px空間的問(wèn)題？別擔(dān)心，有4種方法可以解決。
方案一：設(shè)置其父元素的font-size:0px
方案二：在img的樣式中添加display:block
方案三：在img的樣式中添加vertical-align:bottom
方案四：增加父元素的樣式為line-height:5px
2.如何讓元素的高度與窗口相同
當(dāng)前，前端中CSS的單位為vh，元素高度樣式設(shè)置為height:100vh
3.修改輸入框占位符樣式
這是表單輸入框的占位符屬性。修改默認(rèn)樣式的方法如下：
input::-webkit-input-placeholder {
color: #babbc1;
font-size: 12px;
}4. 使用 :not 選擇器
除了最后一個(gè)元素之外的所有元素都需要一些樣式，這可以使用 not 選擇器輕松實(shí)現(xiàn)。
例如，要實(shí)現(xiàn)列表，最后一個(gè)元素不需要加下劃線(xiàn)，如下所示：
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;
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)你遇到類(lèi)似的問(wèn)題時(shí)，可以使用flex來(lái)實(shí)現(xiàn)智能布局！
<div class="container">
<div class="main">main</div>
<div class="footer">button</div>
</div>CSS代碼如下：
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main {
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"的輸入類(lèi)型末尾會(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ì)有一條藍(lán)色狀態(tài)線(xiàn)，可以使用outline:none將其刪除。
9.解決iOS滾動(dòng)條卡住的問(wèn)題
在蘋(píng)果手機(jī)上，滾動(dòng)時(shí)元素經(jīng)常會(huì)卡住。此時(shí)只有一行CSS會(huì)支持彈性滾動(dòng)。
body,html{
-webkit-overflow-scrolling: touch;
}10.自定義選定的文本樣式
您可以通過(guò)styles自定義選擇文本的顏色和樣式。關(guān)鍵樣式如下：
::selection {
color: #ffffff;
background-color: #ff4c9f;
}11. 文本不允許被選擇
使用用戶(hù)選擇的樣式：none；
12.使用filter:grayscale(1)使頁(yè)面處于灰度模式
一行代碼會(huì)將頁(yè)面置于灰色模式。
body{
filter: grayscale(1);
}
