建站
咨詢
售后
建站咨詢
新聞中心
在開發(fā)項目中，修改輸入占位符樣式，多行文本溢出，隱藏滾動條，修改光標(biāo)顏色，水平和垂直居中等等，這些都是我們非常熟悉的開發(fā)場景！前端開發(fā)者幾乎每天都會和它們打交道，因此，我在這里給大家總結(jié)了20個超級實用的CSS技巧，一起來看看吧。
創(chuàng)新互聯(lián)公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元益陽做網(wǎng)站,已為上家服務(wù),為益陽各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575
1.解決圖片5px間距問題
你是否經(jīng)常遇到圖片底部多出5px間距的問題？不著急，這里有4種方法可以幫助你解決此問題。
解決方案 1：將 font-size: 0 設(shè)置為父元素
演示地址：https://codepen.io/qianlong/pen/VwrzoyE
具體實現(xiàn)代碼如下：
HTML
image 5px spacing
CSS
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
/* Key Style */
font-size: 0;
}
img{
width: 100%;
}解決方案 2：將 display: block 設(shè)置為 img
演示地址：https://codepen.io/qianlong/pen/eYeGONM
具體實現(xiàn)代碼如下：
HTML
image 5px spacing
CSS
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
}
img{
width: 100%;
/* Key Style */
display: block;
}解決方案 3：將 vertical-align: bottom 設(shè)置為 img
演示地址：https://codepen.io/qianlong/pen/jOaGNWw
具體實現(xiàn)代碼如下：
HTML
image 5px spacing
CSS
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
}
img{
width: 100%;
/* Key Style */
vertical-align: bottom;
}方案四：給父元素設(shè)置line-height: 5px
演示地址：https://codepen.io/qianlong/pen/PoOJYzN
具體實現(xiàn)代碼如下：
HTML
image 5px spacing
CSS
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
/* Key Style */
line-height: 5px;
}
img{
width: 100%;
}2.元素高度與窗口相同
演示地址：https://codepen.io/qianlong/pen/xxPXKXe
如何讓元素和窗口一樣高？示例代碼如下：
* {
margin: 0;
padding: 0;
}
.child {
width: 100%;
/* Key Style */
height: 100vh;
background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
}3.修改輸入占位符樣式
演示地址：https://codepen.io/qianlong/pen/JjOrPOq
第一個修改了，第二個沒有修改。
* {
margin: 0;
padding: 0;
}
input {
width: 300px;
height: 30px;
border: none;
outline: none;
display: block;
margin: 15px;
border: solid 1px #dee0e9;
padding: 0 15px;
border-radius: 15px;
}
/* Key Style */
.placehoder-custom::-webkit-input-placeholder {
color: #babbc1;
font-size: 12px;
}
4. 使用“:not”選擇器
演示地址：https://codepen.io/qianlong/pen/QWOqLQO
除了最后一個元素之外的所有元素都需要一些樣式，使用 not 選擇器會非常容易。
如下圖：最后一個元素沒有底邊框。
cell
content
cell
content
cell
content
cell
content
* {
margin: 0;
padding: 0;
}
html,
body {
background-color: #f7f8fa;
height: 100%;
}
ul,
li {
list-style: none;
padding: 0 15px;
font-size: 14px;
}
ul {
margin-top: 10px;
background-color: #fff;
}
li {
height: 32px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Key Style */
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}
li span:first-child {
color: #323233;
}
li span:last-child {
color: #969799;
}
5.使用flex布局智能固定一個元素在底部
演示地址：https://codepen.io/qianlong/pen/ZEaXzxM
當(dāng)內(nèi)容不夠時，按鈕應(yīng)該在頁面底部。當(dāng)有足夠的內(nèi)容時，按鈕應(yīng)該跟隨內(nèi)容。當(dāng)你遇到類似問題時，使用flex實現(xiàn)智能布局！
代碼如下：
I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends,looking forward to becoming good friends with you.
* {
margin: 0;
padding: 0;
}
.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;
}
6.使用“caret-color”修改光標(biāo)顏色
演示地址：https://codepen.io/qianlong/pen/YzErKvy?
有時需要修改光標(biāo)的顏色?，F(xiàn)在是插入符號顏色顯示時間。
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.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;
}
7.去掉type=”number”末尾的箭頭
演示地址：https://codepen.io/qianlong/pen/OJOxLrg
默認(rèn)情況下，input type = “number”的末尾會出現(xiàn)一個小箭頭，但有時我們需要將其去掉。我們應(yīng)該做什么？
如下圖：第二個去掉了，第一個沒有。
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
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 */
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
-webkit-appearance: none;
}
8.“outline:none”去掉輸入狀態(tài)行
演示地址：https://codepen.io/qianlong/pen/YzErzKG
當(dāng)輸入框被選中時，默認(rèn)會有一個藍(lán)色的狀態(tài)行，可以使用 outline: none 去掉。
如下圖：第二個輸入框去掉了，第一個沒有。
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input {
width: 300px;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
border: solid 1px #ffd476;
box-sizing: border-box;
background-color: transparent;
color: #ffd476;
font-size: 14px;
caret-color: #ffd476;
display: block;
}
/* Key Style */
.no-outline {
outline: none;
}
9.解決iOS滾動條卡住的問題
在蘋果手機(jī)上，經(jīng)常會出現(xiàn)滾動時元素卡住的情況。這個時候只有一行CSS會支持彈性滾動。
body,html{
-webkit-overflow-scrolling: touch;
}10.畫三角形
演示地址：https://codepen.io/qianlong/pen/rNYGNRe
* { margin: 0; padding: 0;}
body { padding: 15px;}
.box padding: 15px; background-color: #f5f6f9; border-radius: 6px; display: flex; align-items: center; justify-content: center;}
.triangle display: inline-block; margin-right: 10px; /* Base Style */ border: solid 10px transparent;}/*bottom*/.triangle.bottom border-top-color: #0097a7;}/*top*/.triangle.top border-bottom-color: #b2ebf2;}/*left*/.triangle.left border-right-color: #00bcd4;}/*right*/.triangle.right border-left-color: #009688;}
* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
}
.box {
padding: 15px;
background-color: #f5f6f9;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.triangle {
display: inline-block;
margin-right: 10px;
/* Base Style */
border: solid 10px transparent;
}
/*bottom*/
.triangle.bottom {
border-top-color: #0097a7;
}
/*top*/
.triangle.top {
border-bottom-color: #b2ebf2;
}
/*left*/
.triangle.left {
border-right-color: #00bcd4;
}
/*right*/
.triangle.right {
border-left-color: #009688;
}
11.畫小箭頭
演示地址：https://codepen.io/qianlong/pen/ZEaXEEP
* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
}
.box {
padding: 15px;
background-color: #ffffff;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.arrow {
display: inline-block;
margin-right: 10px;
width: 0;
height: 0;
/* Base Style */
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;
}
/*bottom*/
.arrow.bottom {
transform: rotate(270deg);
}
/*top*/
.arrow.top {
transform: rotate(90deg);
}
/*left*/
.arrow.left {
transform: rotate(180deg);
}
/*right*/
.arrow.right {
transform: rotate(0deg);
}
12.圖像適合窗口大小
演示地址：https://codepen.io/qianlong/pen/PoOJoPO
vw vs padding
* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
}
.box,
.box-vw {
background-color: #010102;
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;
/* Aspect ratio of picture*/
padding-bottom: 66.620879%;
}
img {
width: 100%;
}
* { margin: 0; padding: 0;}
body { padding: 15px;}
.box,.box-vw background-color: #010102; 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; /* Aspect ratio of picture*/ padding-bottom: 66.620879%;}
img { width: 100%;}13.隱藏滾動條
演示地址：https://codepen.io/qianlong/pen/yLPzLeZ
?
第一個滾動條可見，第二個隱藏。
這意味著容器可以滾動，但是滾動條是隱藏的，就好像它是透明的一樣。
I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends, looking forward to becoming good friends with you.
* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
color: #324b64;
}
.box {
width: 375px;
overflow: scroll;
}
/* Key Style */
.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.自定義選中的文字樣式
演示地址：https://codepen.io/qianlong/pen/jOaGOVQ
?
I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends, looking forward to becoming good friends with you.
I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends, looking forward to becoming good friends with you.
* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
color: #324b64;
}
.box > p {
padding: 10px;
background-color: #f5f6f9;
border-radius: 6px;
font-size: 12px;
margin-bottom: 15px;
}
/* Key Style */
.box-custom::selection {
color: #ffffff;
background-color: #ff4c9f;
}
15.不允許選擇文本
演示地址：https://codepen.io/qianlong/pen/rNYGNyB
?
第一個內(nèi)容可以選，第二個不可以選中了。
I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends, looking forward to becoming good friends with you.
I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends, looking forward to becoming good friends with you.
* {
http://m.fisionsoft.com.cn/article/dhijpcs.html
