20+ CSS High frequency practical clips, happiness tips you can have oh

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

Modify input placeholder styles, multi-line text overflows, hide scrollbars, modify cursor colors, center horizontal and vertical… What a familiar feature! Front end children’s shoes will deal with them almost every day, together to sum up our CSS happy little fragment! Next time do not need Baidu, do not need Google, here is your harbor.

Click to view the source address “Under Continuous Update”

1. Address the 5px space between images

If you’ve ever encountered an extra 5px space at the bottom of an image, here are 4 ways to make it disappear

Option 1: Set the parent elementfont-size: 0

The effect

html

<div class="img-container">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101 _yfocq. Png&refer=http%3A%2F%2Fc-ssl.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1636215521 & t = 20356 3292576c66ba434651680281e8a" alt="">
</div>

Copy the code

css

html.body{
  margin: 0;
  padding: 0;
}

.img-container{
  background-color: lightblue;
  font-size: 0;
}

img{
  width: 100%;
}

Copy the code

Scenario 2: Set imgdisplay: block

The effect same as above

html

<div class="img-container">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101 _yfocq. Png&refer=http%3A%2F%2Fc-ssl.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1636215521 & t = 20356 3292576c66ba434651680281e8a" alt="">
</div>

Copy the code

css

html.body{
  margin: 0;
  padding: 0;
}

.img-container{
  background-color: lightblue;
}

img{
  width: 100%;
  Key CSS / * * /
  display: block;
}

Copy the code

Scenario 3: Set imgvertical-align: bottom

The effect same as above

html

<div class="img-container">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101 _yfocq. Png&refer=http%3A%2F%2Fc-ssl.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1636215521 & t = 20356 3292576c66ba434651680281e8a" alt="">
</div>

Copy the code

css

html.body{
  margin: 0;
  padding: 0;
}

.img-container{
  background-color: lightblue;
}

img{
  width: 100%;
  Key CSS / * * /
  vertical-align: bottom;
}

Copy the code

Option 4: Set the parent elementline-height: 5px;

The effect same as above

html

<div class="img-container">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101 _yfocq. Png&refer=http%3A%2F%2Fc-ssl.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1636215521 & t = 20356 3292576c66ba434651680281e8a" alt="">
</div>

Copy the code

css

html.body{
  margin: 0;
  padding: 0;
}

.img-container{
  background-color: lightblue;
  Key CSS / * * /
  line-height: 5px;
}

img{
  width: 100%;
}

Copy the code

2. Element height follows window

Sometimes you want the height of an element to be the same as the window. If the percentage is set, then the HTML, body and other elements should also be set to height: 100%. Is there an easier way to do this?

The effect

html

<div class="app">
  <div class="child"></div>
</div>

Copy the code

css

* {margin: 0;
  padding: 0;
}

.child{
  width: 100%;
  Key CSS / * * /
  height: 100vh;
  background-image: linear-gradient(180deg.#2af598 0%.#009efd 100%);
}

Copy the code

3. Modify the Input placeholder style

The first is placeholder, which has been overwritten, and the second is native

The effect

html

<input type="text" class="placehoder-custom" placeholder="Please enter username search">
<input type="text" placeholder="Please enter username search">
Copy the code

css

input{
  width: 300px;
  height: 30px;
  border: none;
  outline: none;
  display: block;
  margin: 15px;
  border: solid 1px #dee0e9;
  padding: 0 15px;
  border-radius: 15px;
}

.placehoder-custom::-webkit-input-placeholder{
  color: #babbc1;
  font-size: 12px;
}

Copy the code

4. Use the Not selector wisely

The NOT selector is especially handy in cases where all elements need some style except the last one

The last element has no bottom border

The effect

html

<ul>
    <li>
      <span>The cell</span>
      <span>content</span>
    </li>
    <li>
      <span>The cell</span>
      <span>content</span>
    </li>
    <li>
      <span>The cell</span>
      <span>content</span>
    </li>
    <li>
      <span>The cell</span>
      <span>content</span>
    </li>
</ul>

Copy the code

The key of CSS

li:not(:last-child) {border-bottom: 1px solid #ebedf0;
}

Copy the code

5. Use Flex layout for smart bottom fixing

When there is not enough content, the rule description should be at the bottom. When there is enough content, the rule description should be at the bottom. As the content sinks down, you must have encountered a similar need for clever layout using Flex.

html

<div class="container">
  <div class="main">I'm the content area</div>
  <div class="footer">Rule description</div>
</div>

Copy the code

css

 .container{
  height: 100vh;
  /* Key CSS */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main{
  /* Key CSS */
  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;
}

Copy the code

6. Use caret-color to change the cursor color

When making form-related requirements, sometimes you need to change the color of the flash icon. The Caret-Color property supports this requirement perfectly.

html

<input type="text" class="caret-color" />

Copy the code

css

.caret-color {
  /* Key CSS */
  caret-color: #ffd476;
}

Copy the code

7. Removetype="number"Tail arrow

By default, input type=”number” has a small arrow at the end, but many times we want to remove it. What should we do?

Figure: The first input box does not remove the small arrow effect, the second one is removed.

The effect

html

<input type="number" />
<input type="number" class="no-arrow" />

Copy the code

css

/* Key CSS */
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
Copy the code

8. outline:noneRemove the input status line

If the input box is selected, there will be a blue status line by default. Use Outline: None to remove it

The effect

Figure: First input box removed, second not removed

html

<input type="number" />
<input type="number" class="no-arrow" />

Copy the code

css

.no-outline{
  outline: none;
}
Copy the code

9. Solve the IOS scroll bar lag

On IOS machines, where element scrolling is often stalling, a single line of CSS is all it takes to enable elastic scrolling

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

10. Draw triangles

The effect

html

<div class="box">
  <div class="box-inner">
    <div class="triangle bottom"></div>
    <div class="triangle right"></div>
    <div class="triangle top"></div>
    <div class="triangle left"></div>
  </div>
</div>
Copy the code

css

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* Base style */
  border: solid 10px transparent;
}
  / * * /
.triangle.bottom {
  border-top-color: #0097a7;
}
  / * * /
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/ * * / left
.triangle.left {
  border-right-color: #00bcd4;
}
/ * * / right
.triangle.right {
  border-left-color: # 009688;
}
Copy the code

11. Draw small arrows

The effect

html

<div class="box">
  <div class="box-inner">
    <div class="triangle bottom"></div>
    <div class="triangle right"></div>
    <div class="triangle top"></div>
    <div class="triangle left"></div>
  </div>
</div>
Copy the code

css

  .arrow {
    display: inline-block;
    margin-right: 10px;
    /* Base style */
    width: 0;
    height: 0;
    /* Base style */
    border: 16px solid;
    border-color: transparent #CDDC39 transparent transparent;
    position: relative;
  }

  .arrow::after {
    content: "";
    position: absolute;
    /* Overlays the background by displacement */
    right: -20px;
    top: -16px;
    border: 16px solid;
    border-color: transparent #fff transparent transparent;
  }
  / * * /
  .arrow.bottom {
    transform: rotate(270deg);
  }
  / * * /
  .arrow.top {
    transform: rotate(90deg);
  }
  / * * / left
  .arrow.left {
    transform: rotate(180deg);
  }
  / * * / right
  .arrow.right {
    transform: rotate(0deg);
  }
Copy the code

12. Picture size adaptation

vw vs padding

The effect

html

<div class="box">
  <div class="img-container">
    <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
  </div>
</div>

<div class="box">
  <div class="img-container">
    <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
  </div>
</div>

<div class="box-vw">
  <div class="img-container">
    <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
  </div>
</div>
Copy the code

css

.box..box-vw{
  background-color: #f5f6f9;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}

.box:nth-of-type(2) {width: 260px;
}
/* vw solution */
.box-vw .img-container{
  width: 100vw;
  height: 66.620879 vw;
  padding-bottom: inherit;
}
/* padding scheme */
.img-container{
  width: 100%;
  height: 0;
  /* The width ratio of the image */
  padding-bottom: 66.620879%;
}

img{
width: 100%;
}
Copy the code

13. Hide scroll bars

The first one can see the scroll bar, the second one is hidden

The effect

Note that the container can be scrolled, but the scrollbar is hidden as if it were transparent

html

<div class="box">
  <div>Love will leave, friends will leave, happiness will leave, but not exams, because you will not not</div>
</div>

<div class="box box-hide-scrollbar">
  <div>Just because I saw you in a crowd, you -- you asked me about swimming and fitness?</div>
</div>
Copy the code

css

.box {
  width: 375px;
  overflow: scroll;
}

/* Key code */
.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;
}

Copy the code

14. Customize the style of text selected

The first is the default selected state, and the second is the custom selected state

The effect

html

<div class="box">
  <p class="box-default">Yesterday I met my primary school classmate, I didn't think he was so bad -- only put a dollar into my bowl</p>
  <p class="box--custom">This valentine's Day, if there is no accident, a person, if there is an accident - go to the hospital</p>
</div>
Copy the code

css

.box-custom::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

Copy the code

15. Disable text selection

The first one can be selected, but the second one can’t

The effect

html

 <div class="box">
  <p>Finally, I got used to the way I looked -- I had my hair cut, and then I looked ugly in another way</p>
  <p>National Day holiday, want to travel with girlfriend, ask everyone to help recommend next -- where have girlfriend</p>
</div>
Copy the code

css

.box p:last-child{
  user-select: none;
}

Copy the code

16. Center horizontally and vertically

The effect

html

<div class="parent">
  <p class="child">Every time I cram at the last minute -- Buddha he always gives me a kick</p>
</div>
Copy the code

css

.parent{
  padding: 0 10px;
  background-color: #f5f6f9;
  height: 100px;
  border-radius: 6px;
  font-size: 14px; // Here are the key horizontal and vertical center codesdisplay: flex;
  align-items: center;
  justify-content: center;
}

Copy the code

17. Single-line text overflow displays ellipsis

At this point, the front-end of the world probably knows how to write, so it’s better to have a laugh at your jokes.

The effect

html

<p class="one-line-ellipsis">Do not easily bow to fate, because a bow will see the fat if you are willing to peel a layer of my heart</p>
Copy the code

css

.one-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Not necessary, just to create a line of effect */
  max-width: 375px; 
}

Copy the code

18. Multi-line text overflow displays ellipsis

The sample

html

<p class="more-line-ellipsis">If you are willing to peel open my heart layer by layer, you will find that -- I am an idiot!</p>
Copy the code

css

.more-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* Sets n lines, including 1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

Copy the code

19. Clear the float

A layout that seems to have a sense of time 😄. This layout should now be largely eliminated on mobile devices.

As you can see from the figure, the outer height did not collapse, which is why the ClearFix class was used

The effect

html

<div class="box clearfix">
  <div class="float-left"></div>
  <div class="float-left float-left2"></div>
  <div class="float-left float-left3"></div>
</div>
Copy the code

css

body {
  padding: 15px;
  color: #324b64;
}
/* Key code */
.clearfix{
  zoom: 1;
}
.clearfix::after{
  display: block;
  content: ' ';
  clear: both;
}

.box {
  padding: 10px;
  background-color: #f5f6f9;
  border-radius: 6px;
  font-size: 12px;
}

.box >div{
  width: 29%;
  height: 100px;
}

.float-left{
  background-color: #faa755;
  float: left;
  margin-right: 10px;
}

.float-left2{
  background-color: #7fb80e;
}

.float-left3{
  background-color: #b2d235;
}

Copy the code

20. Use Filter: Grayscale (1) to render the page in mourning mode

The great revolutionary martyrs made great sacrifices for the birth of our country, and during the corresponding holidays, our site will be gray mourning mode to honor the martyrs.

The effect

css

body{
  filter: grayscale(1);
}

Copy the code