1. prohibit a Click to highlight , These are unofficial attributes , But it's very practical
 
html,body{ -webkit-touch-callout: none; // Disable or display system default menu -webkit-user-select:
none; // Disable long press copy selection -webkit-tap-highlight-color: rgba(0,0,0,0);// Do not touch a Tag highlight This is particularly practical }
 

2.   Row level , Block level elements centered
      The way we used to center text was text-align: center; line-height:x;
      What if the height of the parent element is unknown line-height I'm not sure , Here are three lines of code for you The width of the parent element should no longer be considered
section{ // Parent element display: -webkit-box; -webkit-box-align: center;
-webkit-box-pack: center; }
 

3. No wrapping Extra ellipsis

html structure :
<div class='word'> see ! I only show one line , Extra is indicated by an ellipsis </div>
 css:
.world{ display:block; // If it's a block level element, you don't need to add it white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
 

4. No linefeed energy upgrade
If the requirement is to make two lines of text redundant, use ellipsis ?
Here's a big move
.world{ font-size:2.4rem; line-height:130%; height: 7.0rem; line-height: 130%;
overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp: 2; // Number of lines displayed -webkit-box-orient: vertical; }
 

5. Control by percentage line-height;
  Mobile end should be used as little as possible px, More accurate percentage control
 line-height:100%;// No space between two lines of text

  use : When you get the design PSD Time Let's see the size first , such as 24px; Spacing of text , such as 10px; that line-height=100%+(10/24)*100%;
Such line spacing is the most accurate and responds to a variety of devices

 

6. use flex replace float

html structure
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
css
ul{ display: -webkit-box; display: box; display: -webkit-flex; display: flex;
display: -webkit-flex-box; display:flex-box; } li{ -webkt-flex:1; flex:1;
-webkit-box-flex:1; box-flex:1; }
7. Slash text
We know that the line on the text is text-decoration: line-through; But there is no slash attribute by default , This is often used for e-commerce websites, such as slashing the original price
Here we use before
.diagonal:before{ position: absolute; content: ""; left: 0; top: 42%; right:
-10%; border-top: 2px solid; border-color: #333; transform: rotate(8deg);
-webkit-transform: rotate(8deg); }
8. Font size usage vw
Changes in the use of brand names px->em->rem->vw
None of the first three can achieve the effect of response vw Is set based on the percentage of the device screen such as .a{ font-size:10vw;// Size is 10% of screen width Of course, few words of this size
} because vw The font size set is changed according to the screen size So it's going to get bigger on the big screen According to available basis Demand usage
9. painting 1px Thin thread of

html:
<div class='border1px'></div>
css
.border1px{ position: relative;} .border1px:after{ content:""; position:
absolute; bottom:0px; left:0px; right:0px; border-bottom:1px solid red;
border-left:1px solid red; -webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0; }
10.display:inline-block Clearance removal
.wrapper{
  font-size:0
} .inlineblock{ display: inline-block; letter-spacing: normal; word-spacing:
normal; }

<div class='wrapper'> <div class="inlineblock"></div> </div>
You must know more Let's share

 

Technology
©2019-2020 Toolsou All rights reserved,
C Language programming to find a student's grade java Realize the function of grabbing red packets Random forest R Language implementation QCustomPlot series (5)- Real time dynamic curve Software testing BUG describe use C++ I want to talk to you “ Prototype mode ” ( copy / copy constructor )JS How to operate China's longest high speed rail officially opened ! The fastest way to finish the race 30.5 hour Zimi apologizes :33W Gan charger delayed due to force majeure 2021 year 2 Chinese programming language ranking