Improve your Development efficiency with Efficient CSS

1. Clear the float

<div class="parent clearfix">
    <div class="left child">left</div>
    <div class="right child">right</div>
</div>
Copy the code

.clearfix:after {
  content: "\00A0";
  display: block;
  clear: both;
  line-height: 0;
}
.clearfix {
  zoom: 1;
}
Copy the code

2, vertical horizontal center

.css {
    display: flex;
    align-items: center;
    justify-content: center;
}
Copy the code

3. Ellipsis at the end of the text

Single truncation

.txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
Copy the code

Multi-line truncation

.txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
}
Copy the code

display:-webkit-box; Properties that must be combined to display the object as an elastic stretchable box model.

-webkit-box-orient; Properties that must be combined to set or retrieve the arrangement of child elements of a flex box object.

text-overflow:ellipsis; Optional property that can be used for multi-line text cases using the ellipsis “…” Hide out-of-range text.

Autoprefixer: off Disables the autoprefixer automatic deletion function

4, text blur effect

.child {
  color: transparent;
  text-shadow: 0 0 4px rgba(0.0.0.0.5);
}
Copy the code

5, animation to achieve simple loading effect

<div class="loading">Being loaded</div>
Copy the code

.loading:after {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: "\ 2026";
  -webkit-animation: ellipsis 2s infinite;
}

/* Animation section */
@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px; }}Copy the code

6. Customize text selection styles

<div class="element">Loading Loading Loading Loading Loading Loading Loading Loading Loading Loading Loading</div>
Copy the code

<! Font color select background color -->.element::selection {
  color: green;
  background-color: red;
}
.element::-moz-selection {
  color: green;
  background-color: red;
}
Copy the code

7, Input changes the placeholder default style

Input changes the placeholder default style.

<div class="wrap">
    <input type="text" placeholder="I am a placeholder ~">
</div>
Copy the code

input::-webkit-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-moz-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-ms-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
Copy the code

8, mobile terminal can click the element to remove the default border

On mobile browsers, when you click on a link or a clickable element defined in Javascript, there will be a blue border. How do I remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

9. Sinking initials

.wrap:first-letter {
  float: left;
  color: green;
  font-size: 30px;
}
Copy the code

CSS implements triangles

<div style="display: flex;">
    <div class="triangle-up">Equilateral triangle</div>
    <div class="triangle-down">nabla</div>
    <div class="triangle-left">The left triangle</div>
    <div class="triangle-right">A triangle</div>
</div>
Copy the code

.triangle-up { 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-bottom: 100px solid red; 
}
.triangle-down { 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-top: 100px solid red; 
}
.triangle-left { 
  width: 0; 
  height: 0; 
  border-bottom: 50px solid transparent;
  border-right: 100px solid red;
  border-top: 50px solid transparent;
}
.triangle-right {
  margin-left: 10px;
  width: 0; 
  height: 0; 
  border-bottom: 50px solid transparent;
  border-left: 100px solid red;
  border-top: 50px solid transparent;
}
Copy the code

11. Block element highlighting in Webkit mobile browsers

.css {
    -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

12. Remove the default border for some browser elements

Remove the default border for individual labels

img.input.button.textarea {
  border: none;
  -webkit-appearance: none;
}
textarea {
  /* Textarea cannot be expanded by default
  resize: none;
}
Copy the code

13. Cancel the operation buttons of some browser digital input controls

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
Copy the code

CSS newline

/* Enforces no line breaks */
.div {
  white-space: nowrap;
}
/* 自动换行 */
.div {
  word-wrap: break-word;
  word-break: normal;
}
/* Force line breaks for English words */
.div {
  word-break: break-all;
}
Copy the code

15. The picture is centered from top to bottom

<div>
    <img src="https://mp.weixin.qq.com/mp/qrcode?scene=10000004&size=102&__biz=MzI2MTMxNzI3OQ==&mid=2247483853&idx=1&sn=2d683d48d2471 21984a47db5268df05e&send_time=" alt="">
</div>
Copy the code

div {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
Copy the code

16. Small bars on either side of the title

<div class="title">The title</div>
Copy the code

.title {
  color: #e1767c;
  font-size: 30px;
  text-align: center;
  position: relative;
}
.title:before,
.title:after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%.0);
  transform: translate3d(-50%, -50%.0);
  border-top: 2px solid #e1767c;
  width: 40px;
}
.title:before {
  margin-left: -60px;
}
.title:after {
  margin-left: 60px;
}
Copy the code

17. Indent text

.text {
    text-indent: 20px;
}
Copy the code