First, text style

1. Ellipses are displayed if the text is not displayed

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. Center the text vertically

Vertical center of single line of text

Solution: line-height method

Height is the same height as line-height

.box{
    width:200px;
    height:100px;
    line-height:100px;
}
Copy the code

Vertical center of multi-line text

Solution: vertical-align method

.box{
  width:500px;
  height:100px;
  vertical-align:middle;
  display:table-cell;
}
Copy the code

3. Indent first line

<p style="text-indent:2em;">This is a content text. This is a content text</p>
Copy the code

4. Sinking initials

p:first-letter{
     font-size:40px;
     float: left;
     color:red;
  }
Copy the code

5. Line wrap in Chinese and English

word-break:break-all;Works only in English, with letters as line breaks
word-wrap:break-word;Works in English only, with word wrapping as the basis
white-space:pre-wrap;Only for Chinese, force line breaks
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

6. Text shadows

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

Experience the

7. Set the font style for the input 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

Second, layout style

1. Div is vertically centered

  <div class="box-wrap">
     <div class="box"></div>
  </div>
Copy the code

Fixed height and width div centered vertically

.box{
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: red;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }
Copy the code

Method that does not fix the height and width of div vertically centered

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

2. Clear floats

Method 1: The parent div defines height

Principle: The parent div defines height manually, which solves the problem that the parent div cannot automatically get the height.

Advantages: simple, less code, easy to master

Disadvantages: only suitable for fixed height layouts, give exact height, if the height is not the same as the parent div, this can cause problems

Suggestion: Not recommended. Only recommended for a fixed height layout

Grading: painted painted fostered fostered fostered

<style type="text/css">
.div1{background:# 000080;border:1px solid red;/* Resolve code */height:200px; }.div2{background:# 800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.rightright{float:rightright;width:30%;height:80px;background:#DDD}
</style>

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
Copy the code

Method 2: end with an empty div tag clear:both

Principle: Add an empty div and use CSS’s improved clear: BOTH to clear the float so that the parent div can automatically get the height

Advantages: Simple, less code, good browser support, not prone to strange problems

Disadvantages: many beginners do not understand the principle; If the page has a floating layout, you add a lot of empty divs, which can be annoying

Suggestion: Not recommended, but this method has been used primarily to clear floats before

Painted painted score: u do do

<style type="text/css">
.div1{background:# 000080;border:1pxsolid red; }.div2{background:# 800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.rightright{float:rightright;width:30%;height:80px;background:#DDD}
/* Clear the float code */
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>

<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
Copy the code

Method 3: Parent div defines Overflow :hidden

Principle: Width or zoom:1 must be defined, and height cannot be defined. When using Overflow: Hidden, the browser will automatically check the height of the floating area

Advantages: Simple, less code, good browser support

Disadvantages: Cannot be used in conjunction with position, because the size beyond the position is hidden.

Suggestion: Only recommended for those who do not use Position or have a deep understanding of Overflow: Hidden.

Painted painted score: u do do

<style type="text/css">
.div1{background:# 000080;border:1px solid red;/* Resolve code */width:98%;overflow:hidden}
.div2{background:# 800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.rightright{float:rightright;width:30%;height:80px;background:#DDD}
</style>

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
Copy the code

Source: blog.csdn.net/qq_42354773…

3. Common Faults of the CSS

1. IOS page sliders are stuck

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

2. CSS scrollbars imitate ios

::-webkit-scrollbar{
    width: 5px;
    height: 5px;
  }
::-webkit-scrollbar-thumb{
    border-radius: 1em;
    background-color: rgba(50.50.50.3);
  }
::-webkit-scrollbar-track{
    border-radius: 1em;
    background-color: rgba(50.50.50.1);
  }

Copy the code

3. Hide the scroll bar while scrolling

.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

3. The CSS draws triangles

Implement a simple triangle

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 triangles with borders

<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 (do the same for other cases).

Source: www.jianshu.com/p/9a463d50e…

4. Merge table borders

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

5. The CSS selects the NTH label element

First-child First-child selects the first label in the list.
Last-child Last-child selects the last label in the list
Nth-child (3) indicates the third label in the selection list
Nth-child (2n) This indicates the selection of even tags in the list
Nth-child (2n-1) This indicates the selection of odd labels in the list
Nth-child (n+3) This indicates that labels in the list are selected from the third to the last.
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{}
Copy the code

6. Onerror Handles image exceptions

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'" />
Copy the code

7. The soft keyboard on the mobile terminal changes to the 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="search" placeholder="Please enter..." name="search" />
</form>

Copy the code

Enclose a form tag and set the action property so that the bottom right corner of the input method automatically changes to searchAlso, when the search type is used, the search box will have a delete button by default

To mask, you can use the following methods:

 input[type="search"]::-webkit-search-cancel-button{
     -webkit-appearance: none;
  }
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Common CSS collation at work

First, text style

1. Ellipses are displayed if the text is not displayed

Single line text overflow display ellipsis (must have width)

Multi-line text overflow displays ellipsis

2. Center the text vertically

Vertical center of single line of text

Vertical center of multi-line text

3. Indent first line

4. Sinking initials

5. Line wrap in Chinese and English

6. Text shadows

7. Set the font style for the input placeholder

Second, layout style

1. Div is vertically centered

Fixed height and width div centered vertically

Method that does not fix the height and width of div vertically centered

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

Method 2: Flex (not compatible with IE8 below)

Method 3: Transform (incompatible with IE8 below)

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

2. Clear floats

Method 1: The parent div defines height

Method 2: end with an empty div tag clear:both

Method 3: Parent div defines Overflow :hidden

3. Common Faults of the CSS

1. IOS page sliders are stuck

2. CSS scrollbars imitate ios

3. Hide the scroll bar while scrolling

3. The CSS draws triangles

Implement a simple triangle

Implement triangles with borders

4. Merge table borders

5. The CSS selects the NTH label element

6. Onerror Handles image exceptions

7. The soft keyboard on the mobile terminal changes to the search mode

Common CSS collation at work

First, text style

1. Ellipses are displayed if the text is not displayed

Single line text overflow display ellipsis (must have width)

Multi-line text overflow displays ellipsis

2. Center the text vertically

Vertical center of single line of text

Vertical center of multi-line text

3. Indent first line

4. Sinking initials

5. Line wrap in Chinese and English

6. Text shadows

7. Set the font style for the input placeholder

Second, layout style

1. Div is vertically centered

Fixed height and width div centered vertically

Method that does not fix the height and width of div vertically centered

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

Method 2: Flex (not compatible with IE8 below)

Method 3: Transform (incompatible with IE8 below)

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

2. Clear floats

Method 1: The parent div defines height

Method 2: end with an empty div tag clear:both

Method 3: Parent div defines Overflow :hidden

3. Common Faults of the CSS

1. IOS page sliders are stuck

2. CSS scrollbars imitate ios

3. Hide the scroll bar while scrolling

3. The CSS draws triangles

Implement a simple triangle

Implement triangles with borders

4. Merge table borders

5. The CSS selects the NTH label element

6. Onerror Handles image exceptions

7. The soft keyboard on the mobile terminal changes to the search mode

Related Posts

Front-end Docker image volume optimization

Front-end algorithm interview must brush questions series catalog (continuously updated)

Python uses Selenium to automatically log in to nuggets