20+ css high-frequency practical clips, you can have small skills to improve happiness

Preface

" public account. Maybe you have never met before, but it is very likely that you are too late to meet.

modify the input placeholder style, multi-line text overflow, hide the scroll bar, modify the cursor color, horizontal and vertical center... What a familiar function! Front-end children's shoes will deal with them almost every day, let's summarize our CSS happiness snippets together! Next time you don’t use Baidu or Google, this is your harbor.

Click to view the source code address "Continuously updating"

1. Solve the 5px spacing of pictures

Do you often encounter inexplicable 5px spacing at the bottom of the picture? Don’t worry, here are 4 ways to make it disappear

Scheme 1: Set font-size: 0

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=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
</div>

css

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

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

img{
  width: 100%;
}

Scheme 2: Set display: block

effect 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=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
</div>

css

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

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

img{
  width: 100%;
  /*关键css*/
  display: block;
}

Scheme 3: Set vertical-align: bottom

effect 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=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
</div>

css

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

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

img{
  width: 100%;
  /*关键css*/
  vertical-align: bottom;
}

Scheme 4: Set line-height: 5px;

effect 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=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
</div>

css

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

.img-container{
  background-color: lightblue;
  /*关键css*/
  line-height: 5px;
}

img{
  width: 100%;
}

2. The element height follows the window

Sometimes it is hoped that the height of an element is the same as the window. If you set it as a percentage, then the html, body and other elements must also be set to height: 100% Is there an easier way?

Effect

html

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

css

*{
  margin: 0;
  padding: 0;
}

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

3. Modify the input placeholder style

first is a rewritten placeholder, the second is the original

effect

html

<input type="text" class="placehoder-custom" placeholder="请输入用户名搜索">
<input type="text" placeholder="请输入用户名搜索">

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;
}

4. Clever use of not selector

In some cases, all need certain styles, but the last one of not needed. At this time, using the not selector will be particularly convenient

As shown below: the last element has no bottom border

effect

html

<ul>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
</ul>

key css

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

5. Use flex layout to achieve smart fixed bottom

When the content is not enough, the rule indicates that it should be at the bottom. When the content is enough, the rule indicates that as the content sinks, everyone must have encountered similar needs and use flex to cleverly implement the layout.

html

<div class="container">
  <div class="main">我是内容区域</div>
  <div class="footer">规则说明</div>
</div>

css

 .container{
  height: 100vh;
  /* 关键css处 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main{
  /* 关键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;
}

6. Use caret-color to change the cursor color

When making form-related requirements, sometimes it is necessary to modify the color of the blinking mark. caret-color attribute perfectly supports this requirement.

html

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

css

.caret-color {
  /* 关键css */
  caret-color: #ffd476;
}

7. Remove the arrow at the end of type="number"

By default, there input type="number" , but many times we want to remove it, what should we do?

As shown in the figure: the first input box does not have the effect of removing the small arrow, the second one is removed.

effect

html

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

css

/* 关键css */
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

8. outline:none remove the input status line

When the input box is selected, it will have a blue status line by default, use outline:none to remove it with one click

effect

As shown in the figure: the first input box is removed, the second is not removed

html

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

css

.no-outline{
  outline: none;
}

9. Solve the IOS scroll bar stuck

On IOS machine, we often encounter the situation of element lag when scrolling, only one line of css is needed to make it support elastic scrolling

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

10.Draw a triangle

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>

css

.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;
}

11.Draw small arrows

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>

css

  .arrow {
    display: inline-block;
    margin-right: 10px;
    /* 基础样式 */
    width: 0;
    height: 0;
    /* 基础样式 */
    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;
  }
  /*下*/
  .arrow.bottom {
    transform: rotate(270deg);
  }
  /*上*/
  .arrow.top {
    transform: rotate(90deg);
  }
  /*左*/
  .arrow.left {
    transform: rotate(180deg);
  }
  /*右*/
  .arrow.right {
    transform: rotate(0deg);
  }

12. Picture size adaptive

vw vs padding

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>

css

.box, .box-vw{
  background-color: #f5f6f9;
  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;
  /* 图片的高宽比 */
  padding-bottom: 66.620879%;
}

img{
width: 100%;
}

13.Hide the scroll bar

first one can see the scroll bar, the second one has been hidden

effect

Note that here refers to the container can be scrolled, but the scroll bar is hidden as if transparent
html

<div class="box">
  <div>
    爱情会离开，朋友会离开，快乐会离开，但是考试不会,因为你不会就不会
  </div>
</div>

<div class="box box-hide-scrollbar">
  <div>只是因为在人群中多看了你一眼，你就--问我游泳健身了解一下？</div>
</div>

css

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

/* 关键代码 */
.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. Customize the style of text selection

first one is the default selected state, the second is the custom selected state

effect

html

<div class="box">
  <p class="box-default">
    昨天遇见小学同学，没有想到他混的这么差--只放了一块钱到我的碗里
  </p>
  <p class="box--custom">
    今年情人节，不出意外的话，一个人过，出意外的话--去医院过
  </p>
</div>

css

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

15. Prohibit selection of text

first one can be selected, the second one cannot be selected

effect

html

 <div class="box">
  <p>好不容易习惯了自己的长相--去理了个发，又换了一种丑法</p>
  <p>国庆节放假，想跟女朋友去旅游，请大家帮忙推荐下--哪里有女朋友</p>
</div>

css

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

16.Horizontal and vertical centering

effect


html

<div class="parent">
  <p class="child">每次临时抱佛脚的时候--佛祖他总是给我一脚</p>
</div>

css

.parent{
  padding: 0 10px;
  background-color: #f5f6f9;
  height: 100px;
  border-radius: 6px;
  font-size: 14px;
  // 以下是水平垂直居中关键代码
  display: flex;
  align-items: center;
  justify-content: center;
}

17. Single line of text overflows with ellipsis

At this point, it is estimated that the front end of the world knows how to write, so it is more valuable to look at the jokes prepared for you.

effect

html

<p class="one-line-ellipsis">不要轻易向命运低头，因为一低头就会看到赘肉 如果你愿意一层一层剥开我的心</p>

css

.one-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 非必须，只是为了制造一行放不下的效果 */
  max-width: 375px; 
}

18. Multi-line text overflow displays ellipsis

example

html

<p class="more-line-ellipsis">上帝对人都是公平的给了你丑外表--也会配给你低智商 如果你愿意一层一层剥开我的心，你会发现--我缺心眼啊！</p>

css

.more-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 设置n行，也包括1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

19. Clear float

A layout that seems to have a sense of age😄. Now most mobile terminals should not adopt this layout method.

It can be seen from the figure that the height of the outer layer is not collapsed, which is why the clearfix class is used

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>

css

body {
  padding: 15px;
  color: #324b64;
}
/* 关键代码 */
.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;
}

20. Use filter: grayscale(1) to make the web page present in mourning mode

The great revolutionary martyrs made great sacrifices for the birth of our motherland. In the corresponding festivals, our site will present a gray mourning mode to commemorate the martyrs.

effect

css

body{
  filter: grayscale(1);
}