A list of 49 common and easily forgotten CSS styles at work

Like the likes of the collection, I do not regularly share more wonderful content.

Source: Web front-end development

1. Ellipsis is displayed if the text exceeds the part

Single line text overflow display ellipsis (must have width)

p{
    width:200rpx;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
 }
Copy the code

Multi-line text overflow displays ellipsis

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

2. Automatic line wrap in Chinese and English

word-break:break-all; Word-wrap :break-word; word-wrap:break-word; word-wrap:break-word White-space :pre-wrap; white-space:pre-wrap; White-space :nowrap; white-space:nowrap; Force no line breaks, it all works

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

.wrap { white-space:nowrap; } // wrap {word-wrap: break-word; word-break: normal; } // force a newline. Wrap {word-break:break-all; }Copy the code

3. Text shadow

Text-shadow Adds a shadow to the font on the web page by setting the corresponding property value to the text-shadow property. The attributes and values are described as follows: text-shadow: [x-offset, y-offset,Blur,Color];

X-offset: indicates the position where the shadow resides at the horizontal offset of the font. Y-offset: indicates the position of the shadow at which the font is offset vertically. Blur: Indicates the Blur value of the shadow. Color: refers to the color of the shadow;

h1{
text-shadow: 5px 5px 5px #FF0000;

}
Copy the code

4. Set font styles to the 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 { /* Firefox 18- */
  color: red;
}
Copy the code

5, not fixed height width div vertical center method

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

.box-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; Margin - right: 0.25 em. // Adjust space slightly}. Box {display: inline-block; vertical-align: middle; }Copy the code

Method 2: Flex (not compatible with IE8 below)

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

Method 3: Transform (incompatible with IE8 below)

.box-wrap { width:100%; height:300px; Background: rgba (0,0,0,0.7); position:relative; } .box{ position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }Copy the code

Method 4: Set margin:auto (this method is strictly non-fixed width, but 50% of the parent width).

.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%;
    height:50%;
    margin:auto;
    background-color:#ff0;
}
Copy the code

6. Solve the IOS page slide jam

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

7. Set the scroll bar style

.test::-webkit-scrollbar{/* width: 10px; /* Height: 1px; }. Test ::-webkit-scrollbar-thumb {/* border-radius: 10px; background-color: skyblue; background-image: -webkit-Linear-gradient (45deg, rgba(255, 255, 255, 0.2) transparent 25%, transparent 50%, rgba(255, 255, 255, 255) transparent 25%, transparent 50%, rgba(255, 255, 255, 255) Rgba (255, 255, 255, 0.2) 75X transparent 75X transparent); }. Test ::-webkit-scrollbar-track {/* scrollbar-track */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background : #ededed; border-radius: 10px; }Copy the code

8, realize hidden scroll bar and can scroll at the same time

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

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

9. CSS draws triangles

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

The effect is as follows:

Implement 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;
}
Copy the code

The effect is as follows:

Note: If you want to draw a right triangle, set the left border to 0; If you want to draw a left right triangle, set the right border to 0 (the same applies to other cases). The above method makes all other borders transparent. Click and mouse in and out of transparent will also affect the effect. We can also use the CLIp-path property of CSS3

<div class="demo" style="width: 300px; height: 300px; margin: auto; background: red;" ></div> .demo{ -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%); }Copy the code

Also can cut all kinds of graphics you can refer to: www.cnblogs.com/moqiutao/p/…

Note: Internet Explorer and Firefox are not supported and webKit browsers are supported. In modern browsers, the -webkit- prefix is required

10. Merge Table borders

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

11. The CSS selects the NTH label element

First-child First-child selects the first label in the list. Last-child last-child means to select the last tag in the list nTH-child (3) means to select the third tag in the list nTH-Child (2n) means to select the even tag in the list nTH-Child (2n-1) This means that the odd number of labels in the selection list is nth-Child (n+3). This means that the selection list starts with the third label and ends with the last label. Nth-child (-n+3) This selects the list of labels from 0 to 3, i.e. labels less than 3. Nth-last-child (3) This represents the third-to-last tag in the selection list.

Usage:

li:first-child{}

12, mobile terminal soft keyboard into search mode

By default, this key on the soft keyboard is to, or confirm, etc. To change it to search, we need to add type declaration on the input:

<form action="#"> <input type=" placeholder "; name="search" /> </form>Copy the code

You need to wrap a form tag around it and set the action property so that the bottom right corner of the input method automatically changes to search. Also, if you use the search type, the search box will have a delete button by default.

13, onError processing picture exception

When using onError exception handling, if the picture of onError also has a problem, the picture display will fall into an infinite loop, so after assigning the exception picture, empty the address

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

14. The size of the background image

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

15. Spacing between words

Text-indent spacing for head, letter-spacing for spacing

P {text-indent: 10px; // Word-spacing spacing: 10px; } / / spacingCopy the code

16. Elements fill the entire screen

If heigth uses 100%, it will be determined by the height of the parent, so use 100vh units.

.dom{
  width:100%;
  height:100vh;
}
Copy the code

17. CSS implements text alignment at both ends

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

18. Realize vertical typesetting of text

.wrap { width: 25px; line-height: 18px; height: auto; font-size: 12px; padding: 8px 5px; word-wrap: break-word; // wrap {height: 210px; line-height: 30px; text-align: justify; writing-mode: vertical-lr; // From left to right writing mode: tB-lr; // from left to right //writing-mode: vertical-rl; -- From right to left //writing-mode: tB-rl; -- From right to left}Copy the code

19. Invalidate the element mouse event

Wrap {// If you press TAB to select the element, such as button, then press Enter to execute the corresponding event, such as click. pointer-events: none; cursor: default; }Copy the code

20. Disable user selection

.wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
Copy the code

21. Use hardware acceleration

In the browser, use the CSS to enable hardware acceleration to enable the Graphics Processing Unit (GPU) function and improve performance. Hardware acceleration is especially useful on mobile because it can effectively reduce resource utilization. At present, mainstream browsers will detect a page in a DOM element applied to some CSS rules will be turned on, the most significant feature of the element 3D transformation. If you don’t use 3D morphing, you can turn it on by:

.wrap {
    transform: translateZ(0);
}
Copy the code

22, page animation flicker problem

In Chrome and Safari, we can have page flickering effects when using CSS transforms or animations. This code can fix this:

.cube {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}
Copy the code

Another approach that works well in webKit-kernel browsers is

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

23, letter case conversion

P {text-transform: uppercase}; text-transform: lowercase}; text-transform: lowercase; Capitalize} // Capitalize the first letter P {font-variant: small-caps} // Change the font to small capitalize lettersCopy the code

24. Set a container to transparent

.wrap { filter:alpha(opacity=50); Moz - opacity: 0.5; - KHTML - opacity: 0.5; Opacity: 0.5; }Copy the code

25. Eliminate the Transition screen

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

26. Recognize ‘\n’ in the string and wrap it

In rich text, return a label that is not a newline character, and \n. Without regular transformations, line breaks can be implemented using the following style.

body {
   white-space: pre-line;
}
Copy the code

27. Remove the border where the a tag is clicked

A {outline: none; // Or outline: 0 text-decoration:none; // Remove the default underscore}Copy the code

28. The CSS displays the URL after the link

< a href = "/ / www.webqdkf.com" > network before class end < / a > < style > a: after {content: "(" attr (href)") "; } </style>Copy the code

29, Select content center display, drop-down content right aligned

select{
    text-align: center;
    text-align-last: center;
}
select option {
    direction: rtl;
}
Copy the code

30. Modify the cursor color in the input box without changing the font color

input{
    color:  #fff;
    caret-color: red;
}
Copy the code

Child element fixed width parent element width is spread

.wrap { white-space: nowrap; } // If the child of the parent element is a block-level element. Display: inline-block; }Copy the code

Center the image and text in div at the same time

This is the case without using flex layout. Through the vertival – align

.wrap { height: 100, line-height: 100} img {vertival-align: middle} // vertical-align The vertical-align attribute of the CSS is used to specify the vertical alignment of inline elements or table-cell elements. Only for inline elements, table cell elements effect, can't use it vertically aligned block-level elements / / vertical - align: baseline/top/middle/bottom/sub/text - top;Copy the code

33. Realize the width and height proportional adaptive rectangle

.scale { width: 100%; Padding - bottom: 56.25%; height: 0; position: relative; } .item { position: absolute; width: 100%; height: 100%; background-color: 499e56; } <div class="scale"> <div class="item"> Here is the container for all child elements </div> </div>Copy the code

The rotate attribute of transfrom is invalid under the SPAN tag

span {
  display: inline-block
}
Copy the code

35. CSS loads animations

Mainly through CSS rotation animation implementation:

.dom{ -webkit-animation:circle 1s infinite linear; } @keyframes circle{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }}Copy the code

The following effects are achieved:

<div class="loader"></div>
<style> .loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} </style>
Copy the code

Text gradient effect realization

<div > <style>. Text_signature {-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #ec2239, #40a4e2,#ea96f5); width: 320px; } </style>Copy the code

Nice border shadows

<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>Copy the code

Nice background gradient

<div class="text_gradient"></div>
<style>.text_gradient{
  width:500px;
  height:100px;
  background: linear-gradient(25deg, rgb(79, 107, 208), rgb(98, 141, 185), rgb(102, 175, 161), rgb(92, 210, 133)) rgb(182, 228, 253);
} </style>
Copy the code

To achieve the effect of stereo words

<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>Copy the code

Realization of full-screen background picture

.swper{ background-image: url(./img/bg.jpg); width:100%; height:100%; // If the parent height is not 100%, use 100vh zoom: 1; background-color: #fff; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; }Copy the code

Two ways to achieve text stroke

A:

.stroke {
      -webkit-text-stroke: 1px greenyellow;
     text-stroke: 1px greenyellow;
}
Copy the code

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);
}
Copy the code

Implementation of element transparency

The dom {opacity: 0.4; filter:alpha(opacity=40); /* IE8 and earlier */}Copy the code

Use Rgba () to set color transparency.

The demo {background: rgba (255,0,0,1); }Copy the code

Explanation: RGBA is short for Red, Green, Blue and Alpha.

43, solve the 1px border thickening problem

.dom{ height: 1px; background: #dbdbdb; The transform: scaleY (0.5); }Copy the code

Ps: The reason why 1px becomes thicker, for example, 1px pixels actually correspond to 2 physical pixels when the screen is doubled.

44, DIFFERENT units of CSS operations

CSS can also perform simple operations on its own, mainly using the calc function. Implement addition and subtraction in different units:

.div{ 
   width: calc(100% - 50px); 
}
Copy the code

45, CSS text blur effect

.vague_text{
  color: transparent; 
  text-shadow: #111 0 0 5px;
}
Copy the code

46. Turn the icon gray with a filter

A color picture can achieve the mouse into the color, move out of the gray effect.

<a href='' 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%);
  filter: gray;
}
.icon:hover{
  filter: none;
  -webkit-filter: grayscale(0%);
} </style>
Copy the code

47. Self-adaptive object-fit

Background-size :cover/contain background-size:cover/contain Css3 can use the object-fit property to solve the problem of images being stretched or scaled. Preconditions for use: the parent container of the image should be wide and high.

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
Copy the code

Fill: default value. Content stretching fills the entire content box with no guarantee of retaining the original proportions. Contain: contain the original size proportion. The length and height of the long side is the same size as the container, and the short side is equally scaled and may have white space. Cover: Keep the original size ratio. The short side in width and height is the same size as the container, and the long side is scaled equally. There may be some areas that are not visible. (Common) None: Retain the original size ratio. Keep the original size of the replacement content. Scale-down: keep the original size ratio. If the container size is larger than the content size of the picture, keep the original size of the picture without magnification and distortion; Contain a container smaller than the size of the image. Use the same as contain.

48. There is a gap problem in line label elements

Mode 1: Set parent font size to 0

father{
 font-size:0;
}
Copy the code

Method 2: Set word-spacing to an appropriate negative value on the parent element

.father{
   word-spacing:-2px
}
Copy the code

Other schemes: 1. Write the inline elements as 1 line (affecting reading); Use floating styles (which affect the layout).

49. The vertical-align attribute does not take effect

When vertical-align:middle is used to achieve vertical middle, it is often found that the situation does not work. Here we need to pay attention to the conditions for its effectiveness:

** The parent element sets line-height. It needs to be the same as height. Or set the display property to table-cell to convert block elements to cells. ** Objects: inline-block and inline elements in ** child elements.

<div class="box"> <img SRC =".\test.jpg"/> <span> Internal text </span> </div> <style>. line-height: 300px; font-size: 16px; } .box img{ width: 30px; height:30px; vertical-align:middle } .box span{ vertical-align:middle } </style>Copy the code

PS: vertical-align cannot be inherited and must be set separately for child elements. Note that the line height is based on the font size. If there is infringement contact xiaobian to delete this article ~