Home > Article > Web Front-end > 13 practical CSS tips to help you improve front-end development efficiency!
This article compiles and shares 13 CSS techniques that may be useful on the front end, including modifying input placeholder styles, multi-line text overflow, hiding scroll bars, modifying cursor colors, etc. I hope it will be helpful to everyone!
Modify input placeholder style, multi-line text overflow, hide scroll bars, modify cursor color, horizontal and vertical centering. What a familiar scene! Front-end developers deal with them almost every day. This article collects 13 CSS skills, let’s review them together.
Do you often encounter the problem of extra 5px
spacing at the bottom of images? Don't worry, there are 4 ways to solve it. [Recommended learning: css video tutorial]
font-size:0px
display:block
vertical-align:bottom
line-height:5px
In the current front-end, the CSS unit is vh
, set the element height style to height:100vh
This is the placeholder attribute of the form input box. How to modify the default style is as follows:
input::-webkit-input-placeholder { color: #babbc1; font-size: 12px; }
:not
selectorEvery element except the last one needs some styling, which is very easy to achieve using the not
selector.
For example, to implement a list, the last element does not need to be underlined, as follows:
li:not(:last-child) { border-bottom: 1px solid #ebedf0; }
caret-color
to modify the cursor colorSometimes it is necessary to modify the color of the cursor. It's caret color time.
.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; }
When the content is not enough, the button should be at the bottom of the page. When there is enough content, the button should follow the content. When encountering similar problems, you can use flex
to achieve smart layout!
<div class="container"> <div class="main">这里为内容</div> <div class="footer">按钮</div> </div>
CSS code is as follows:
.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; }
type="number"
By default , a small arrow will appear at the end of the input type type="number"
, but sometimes it needs to be removed. You can use the following style:
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; } /* 关键样式 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
outline:none
Delete the input status lineWhen the input box is selected, there will be a blue status line by default, which can be changed using outline:none
Remove.
On Apple phones, elements often get stuck when scrolling. At this time, only one line of CSS will Support elastic scrolling.
body,html{ -webkit-overflow-scrolling: touch; }
.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; }
Can be customized through styles The color and style of text selection, the key styles are as follows:
::selection { color: #ffffff; background-color: #ff4c9f; }
Use styleuser-select: none;
filter:grayscale(1)
Put the page in gray mode One line of code will put the page in gray mode.
body{ filter: grayscale(1); }
(Learning video sharing: web front-end)
The above is the detailed content of 13 practical CSS tips to help you improve front-end development efficiency!. For more information, please follow other related articles on the PHP Chinese website!