List of 49 commonly used and easily forgotten CSS styles at work

1. Display an ellipsis when the text exceeds

The overflow of a single line of text shows an ellipsis (must have a width)

 p{
 width:200rpx;
 overflow: hidden;
 text-overflow:ellipsis;
 white-space: nowrap;< br > }

Multi-line text overflows to display ellipsis

p {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 overflow : hidden;
 }

2. Chinese and English automatic line break

word-break:break-all; only works for English, using letters as the basis for line break word-wrap:break-word; only for English It works, using words as the basis for line breaks white-space:pre-wrap; only works for Chinese, force line breaks white-space:nowrap; force no line breaks, both work

p{
 word-wrap: break-word;
 white-space: normal;
 word-break : break-all;
}

//No line break< /span>
.wrap {
 white-space:nowrap;
}
//Auto wrap
.wrap {
 word-wrap: < span >break-word;
 word-break: normal;
}
//forced line break
.wrap { 
 word-break:break-all;
}

3. Text shadow

text-shadow Add shadows to web fonts, by text-shadow Property sets the associated property value. The description of attributes and values ​​is as follows: text-shadow: [X-offset, Y-offset, Blur, Color];

X-offset: Refers to the position where the shadow is located at the horizontal offset of the font.
Y-offset: Refers to the position where the shadow is located in the vertical offset of the font.
Blur: Refers to the blur value of the shadow.
color: refers to the color of the shadow;

h1{
text-shadow: < span >5px 5px 5px #FF0000;
}

4. Set the font style of placeholder

 input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: red;
}
input::-moz-placeholder { /* Firefox 19+ */ 
 color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
 color: red;
}
input:-moz-placeholder< /span> { /* Firefox 18- */
 color: red;
}

5. The method of vertical centering of div with unfixed height and width

Method 1: Pseudo-elements and inline-block / vertical-align (compatible with IE8)

.box-wrap:before {
 content: '';
 display: inline-block;
 height : 100%;
 vertical-align: middle;
 margin-right: -0.25em; //Small adjustment of space
}
.box {
 display: inline-block;
 vertical-align: middle;
}

Method 2: flex (not compatible with ie8 and below)

.box-wrap {
 height: 300px ;
 justify-content:center;
 align-items:center;
 display:flex ;
 background-color:#666;
 }

Method 3: transform (not compatible with ie8 and below)

 .box-wrap {
 width:100 %;
 height:300px;
 background:rgba(0,0,0,0.7);
 position:relative;< br >}
.box{
 position:absolute;
 left:50%;
 top:50%;
 transform:translateX(-50 %) translateY(-50%);
 -webkit-transform:translateX (-50%) translateY(-50%);
}

Method 4: Set margin:auto (This method is strictly non-fixed width and height, but 50% of the parent's width and height.)

.box-wrap {
 position: relative;
 width:100%;
 height:300px;
 background-color :#f00;
}
.box-content{
 position: absolute;
 top:0;
 left:0;
 bottom:0;
 right:0;
 width:50%< /span>;
 height:50%;
 margin:auto;
 background-color< /span>:#ff0;
}

6. Solve IOS page sliding stuck

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

7. Set the scroll bar style

< span >.test::-webkit-scrollbar{
 /*Scrollbar overall style*/
 width : 10px; /*The height and width correspond to the size of the horizontal and vertical scroll bars*/
 height: 1px;
}
.test::-webkit-scrollbar-thumb {
 /*Small square inside the scrollbar*/< /span>
 border-radius : 10px;
 background-color: skyblue;
 background- image: -webkit-linear-gradient(
 45deg,
 rgba(255, 255 , 255, 0.2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, 0.2) 50%,
 rgba(255, 255, < span >255, 0.2) 75%,
 transparent 75%,
 transparent
 ); 
}
.test::-webkit-scrollbar-track {
 /*track inside the scrollbar*/ 
 box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background :  #ededed;
 border-radius: 10px;
}

8. Realize scrolling while hiding the scroll bar

 .demo::-webkit-scrollbar {
 display: none; /* Chrome Safari */
}

.demo {
 scrollbar-width: none; /* firefox * /
 -ms-overflow-style: none; /* IE 10+ */
 overflow-x: hidden;
 overflow-y: auto;
}

9. CSS draw triangle

div {
 width: 0;
 height: 0;
 border -width: 0 40px 40px;
 border-style: solid;
 border-color: transparent transparent red;
}

The effect is as follows:
Achieving a triangle with a border:

<div id='blue'><div>

#blue {
 position: relative;
 width: 0;
 height: 0;
 border-width: 0 40px 40px;
 border-style: solid;
 border-color: transparent transparent blue;
 }
#blue:after {
 content: '';
 position: absolute;
 top: 1px;
 left: -38px;
 border-width: 0 38px 38px; 
 border-style: solid;
 border-color: transparent transparent yellow;
}

The effect is as follows:
Note: If you want to draw a right-angled triangle, set the left border to 0; if you want to draw a left-angled triangle, set the right border to 0 (other conditions are the same).

10, Table table border merge

table,tr,td{
 border:  1px solid #666;
}
table{
 border-collapse: collapse;
}

11. css select the nth label element

first-child first-child means select the first tag in the list.
last-child last-child indicates the last label in the selection list
nth-child(3) indicates the third label in the selection list
nth-child(2n) indicates the label in the selection list Even tags
nth-child(2n-1) This means odd tags in the select list
nth-child(n+3) This means the tags in the select list start from the 3rd to the end.
nth-child(-n+3) This means that the labels in the selection list are from 0 to 3, that is, labels less than 3.
nth-last-child(3) This means the 3rd last tag in the select list.

How to use:

li:first-child{}
 

12. The mobile terminal soft keyboard becomes the search method

By default, the key on the soft keyboard is text such as go or confirm. To change it into a search text, you need to add a type statement to the input:

<form action='#' >
 <input type='search' placeholder< /span>='Please enter...' name='search' />
 </form>

Need a form tag to cover and set action Attribute, so that the lower right corner of the input method will automatically become a search after writing. At the same time, after using the search type, the search box will have a default delete button.

13, onerror processing image exception

Use onerror During exception handling, if there is a problem with the onerror picture, the picture display will fall into an infinite loop, so after assigning the abnormal picture, set the address to blank

<img onerror='this. src='url;this.onerror=null'' />

< strong >14. The size of the background image

.bg-img< /span>{
 background:url(../img/find_pw_on_2.png) no-repeat center center !important;< br > background-size: 27px auto !important;
 /*background-size: 100% 100%;* /
 /*background-size: 50px 100px*/
}

15. The spacing between words

Word text-indent header distance, letter-spacing words and word spacing

p{
 text-indent: 10px; //Word header distance< /span>
 letter-spacing: 10px; //spacing
}

16. Elements occupy the entire screen

heigth If you use 100%, Will be determined according to the height of the parent, so use 100vh units.

.dom{
 width:100%< /span>;
 height:100vh;
}

17. CSS implements text alignment

 .wrap {
 text-align: justify;
 text-justify: distribute-all-lines; //ie6-8
 text- align-last: justify; //Last line alignment of a block or line
 -moz-text-align-last: justify;
 -webkit-text-align-last: justify;
}

18. Realize vertical layout of text

 // When displaying in a single column
.wrap {
 width: 25px;
 line-height: 18px;
 height: auto;
 font-size: 12px;
 padding: 8px 5 px;
 word-wrap: break-word;/*You need to add this sentence in English, automatically wrap*/ 
}
< span >// Multi-column display
.wrap {
 height: 210px;
 line-height: 30px; 
 text-align: justify;
 writing-mode: vertical-lr; //from left to right 
 writing-mode: tb-lr; //IE From left to right
 //writing-mode: vertical-rl; -- from right to left
 //writing-mode: tb-rl; -- From right to left
}

19. Disable element mouse events

.wrap {
 // If you press tab to select The element, such as button, and then press Enter can still execute the corresponding event, such as click. 
 pointer-events: none;
 cursor: default;
}

< /span>.wrap {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms -user-select: none;
 user-select: none;
}

21. Use hardware acceleration

Use css to enable hardware acceleration in the browser, use GPU (Graphics Processing Unit) functions to improve performance. Hardware acceleration is especially useful on mobile as it can effectively reduce resource usage.
At present, mainstream browsers will open when they detect that certain CSS rules are applied to a certain DOM element in the page, the most prominent feature is the 3D transformation of the element. If you don't use 3D deformation, we can open it in the following way:

.wrap {
 transform: translateZ(0);
}

22. Page animation Flickering problem

In Chrome and Safari, when we use CSS transforms or animations, the page may flicker, as follows The code can fix this situation:

.cube {
 -webkit-backface-visibility: hidden ;
 backface-visibility: hidden;
 
 -webkit-perspective: 1000;
  perspective: 1000;
 /* Other transform properties here */
}

Another method that works well in webkit browsers is

.cube {
 -webkit-transform:  translate3d(0, 0, 0);
 transform: translate3d (0, 0, 0);
 /* Other transform properties here */
}

23, letter case conversion

p {text-transform: uppercase} // Turn all letters into uppercase
p {text-transform: lowercase} // Turn all letters into lowercase
p {text-transform: capitalize} // Capitalize the first letter
p {font-variant: small-caps} // Turn the font into small capital letters

24. Set a container as transparent

< span >.wrap { 
 filter:alpha(opacity=50); 
 -moz -opacity:0.5; 
 -khtml-opacity: 0.5; 
 opacity: 0.5; 
}

25. Eliminate transition splash screen

.wrap {
  -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -webkit -perspective: 1000;
}

26 , Recognize the '' in the string and break the line

Generally return the label with a line break that is not <br> in rich text, and. In the case of not using regular conversion, the following styles can be used to achieve line breaks.

body {
 white-space: pre-line;< br >}

27. Remove the border of the a tag linked by clicking

a {
 outline: none; //or outline : 0
 text-decoration:none; //Cancel the default underline
}

< span ><a href='//www.webqdkf.com'>< /span>Youke Frontend Network</a>
<style>< span >
a:after {content: ' (' attr (href) ')';}
</style>
< /pre>
29, select content centered display, drop-down content right-aligned
select{
 text-align: center;
 text-align -last: center;
}
select option {
 direction: rtl;
 }
30. Modify the color of the cursor in the input box without changing the color of the font< /span>
input{
 color: #fff;
 caret-color: red;
}
31, child element fixed width parent element width is stretched
// The child element under the parent element is an inline element
.wrap {
 white-space: nowrap;
}
// If the child element under the parent element is a block-level element
.wrap {
 white-space: nowrap; // The child element is not wrapped
 display: < span >inline-block;
}
32. Let the pictures in the div Center up and down with the text at the same time
The flex layout is not used here. by vertical-align
.wrap {
 height: 100,
 line-height: 100 
}
img {
 vertical-align: middle
}
// vertical-align css property vertical-align is used to specify inline elements (inline) or table units The vertical alignment of the table-cell element. Only valid for inline elements and table cell elements, it cannot be used to vertically align block-level elements
// vertical-align: baseline/top/middle/bottom/sub/text-top;
33 、 Realize adaptive rectangle with the same ratio of width and height
.scale {
 width: 100%;
 padding-bottom: 56.25%;
 height: 0;
 position: relative; 
}
.item {
 position: absolute; 
 width: 100%;
 height: < span >100%;
 background-color: 499e56;
} 
<div class ='scale'>
 <div class='item'>
 Here is the container for all child elements
 </div>
 << span >/div>
34. The rotate attribute of transfrom is invalid under the span tag< /strong>
span {
 display< /span>: inline-block
}
35, CSS loading animation< /span>
 Mainly through the implementation of css rotation animation:
.dom{
 -webkit-animation:circle 1s infinite linear;
}
@keyframes circle{
 0%{ transform: rotate (0deg); }
 100%{ transform: rotate(360deg); }
 }
 achieve the following effects:
<div class='loader' ></div>
<style> span>
.loader {
 border: 16px solid #f3f3f3;< br > border-radius: 50%;
 border-top: 16px solid # 3498db;
 width: 80px;
 height: 80px;
 -webkit-animation: spin 2s linear infinite;
 animation: spin 2s linear infinite;< br >}

@-webkit-keyframes spin {
 0% { -webkit-transform: rotate( 0deg); }
 100% { -webkit-transform: rotate(360deg); }< br >}

@keyframes spin {
 0% { transform: rotate(0deg span>); }
 100% { transform: rotate(360deg); }
}
</style>
 36. Realization of text gradient effect
<div< /span> class='text_signature ' >fly63 front-end network, a website to learn front-end knowledge for free</div< /span>>
<style>
.text_signature {
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-image : linear-gradient(to right, #ec2239, #40a4e2,#ea96f5);
 width: 320px< /span>;
}
</style>
37. Beautiful border shadow
<div class='text_shadow'></div>
<style> 
.text_shadow{ 
 width:500px;
 height:100px;
 box- shadow: 0px 0px 13px 1px rgba( 51, 51, 51, 0.1);
}
< /style>
38. Beautiful background gradient 
<div  class='text_gradient'></div>
< style> 
.text_gradient{
 width:500px ;
 height:100px;
 background: linear-gradient(25deg< /span>, rgb(79, 107, 208), rgb(98 >, 141, 185), rgb(102, 175, 161), rgb(92, 210, 133)) rgb< /span>(182, 228, 253);
}
</< span >style>
39. Realize the effect of three-dimensional characters< /strong>
<div class ='text_solid'> Youke Frontend Network-web front-end technology learning platform</div>
<style> 
.text_solid{
 font-size: 32px;
 text-align: center;
 font-weight: bold;
  line-height:100px;
 text-transform:uppercase;
 position: relative;
 background-color: #333;
 color:#fff;
 text -shadow:
 0px 1px 0px #c0c0c0,
  0px 2px 0px #b0b0b0,
 0px 3px 0px #a0a0a0,
 0px 4px 0px #909090 ,
 0px 5px 10px rgba(0, 0, 0, 0.6);
}
</style>
40. Realization of full-screen background image
.swper{
 background-image: url(./img/bg.jpg);
 width:100%;
 height:100%;//If the height of the parent is not 100%, please use 100vh 
 zoom: 1;
 background-color: #fff;
 background-repeat: no-repeat;
 background-size: cover;
 -webkit-background-size: cover;< br > -o-background-size: cover;
 background-position: center 0;
.stroke {
 -webkit-text-stroke: < span >1px greenyellow;
 text-stroke: 1px greenyellow;
}
Method 2:
.stroke {
 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0 ,#000 0 -1px 0;
 -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
 -moz- text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
 *filter: Glow(color=#000, strength=1);
}
42. Realization of element transparency
< pre data-tool='mdnice editor' >.dom{
 opacity:0.4;
 filter:alpha(opacity=40); /* IE8 and earlier */
}
Use rgba() to set color transparency.
.demo{
 background:rgba span>(255,0,0,1);
}
Explanation: RGBA is the abbreviation of three words representing Red (red), Green (green), Blue (blue) and Alpha (opacity).
43. Solve the problem of 1px border thickening
 .dom{
 height: 1px;
 background: #dbdbdb;
 transform:scaleY(0.5);
}
Ps: The reason why 1px becomes thicker, for example, on a 2x screen, 1px pixels actually correspond to 2 physical pixels.
44. Operation of different CSS units
css I can also perform simple calculations myself, mainly using the calc function. Implement addition and subtraction operations with different units:
.div{ 
 width: calc(100% - 50px); 
}
 45. CSS achieves text blur effect
 .vague_text{
 color: transparent; 
 text-shadow: #111 0 0 5px;
}
< strong >46. Use a filter to make the icon gray
A single colored picture can change the color of the mouse when it is moved in, and change it when it is moved out gray effect.
<a href=''< /span> class='icon'><img src= '01.jpg' /></a>
< style>
.icon{
 -webkit-filter: grayscale (100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter:  grayscale(100%); 
 filter: grayscale(100%);< br > filter: gray;
}
.icon:hover{
 filter : none;
 -webkit-filter: grayscale(0%);
}
< span ></style>
47、 Image adaptive object-fit
When the image ratio is not fixed, if you want to make the image adaptive, you usually use background-size :cover/contain, but this only applies to background images. The object-fit attribute can be used in css3 to solve the problem that the image is stretched or zoomed. Preconditions used: The image's parent container must have width and height.
img{
 width: 100% span>;
 height: 100%;
 object-fit: cover;
}
fill: Default value. The content is stretched to fill the entire content box, and the original ratio is not guaranteed to be maintained. contain: Keep the original size ratio. The longer side of the length and height is the same size as the container, and the shorter side is proportionally scaled, and there may be a blank space. cover: Keep the original size ratio. The short side of the width and height is the same as the size of the container, and the long side is scaled proportionally. There may be some areas that are not visible. (Common) none: Keep the original size ratio. While maintaining the original size of the replaced content. scale-down: Keep the original size ratio. If the container size is larger than the image content size, keep the original size of the image without zooming in and distorting; the container size is smaller than the image content size, and the usage is the same as contain.
48. There is a gap problem with inline label elements
 Method 1: Set parent font-size to 0
.father{
 font-size:0 ;
}
Method 2: Set the value of word-spacing on the parent element to a suitable negative value
.father{
 word-spacing:- 2px
}
Other solutions: 1. Write inline elements as 1 line (affecting reading); 2. Use Float style (affects layout).
49. Solve the vertical-align attribute not taking effect
When using vertical-align:middle to achieve vertical centering, it is often found that it does not take effect. Here you need to pay attention to the conditions that need to be met for it to take effect:
**Environment: **The parent element sets line-height. Need to be consistent with height. Or set the display property to table-cell to convert block elements into cells. 
**Action object:** inline-block and inline elements in child elements.
<div class='box'>
 <img src='.est.jpg'/>
 <span>Inner Text</span>< /span>
</div>
<style>
.box{
 width:300px; 
 line-height: < span >300px;
 font-size: 16px; 
}
.box  img{
 width: 30px; 
 height:30px; 
 vertical-align:middle
}
.box span{
 vertical-align:middle
}
</style>
PS: vertical-align cannot be inherited and must be set separately for child elements. At the same time, it should be noted that the height of line-height is based on font-size (that is, the height of the font). If the text needs to change lines, an exception will occur. This article is over~
From: https://www.mdeditor.tw/pl/pSGX
Disclaimer: The copyright of the article belongs to the author. If there is any infringement, please contact the editor to delete it. 
Thank you ForwardWelcome to leave a message
< /section>