Small CSS record and CSS record

Small CSS record and CSS record

1. Make the image and text unreproducible

-webkit-user-select: none; -ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;

 

2. Align the image vertically

.Logo{height: 109px;line-height: 109px;}.Logo img{vertical-align: middle;}

 

3. The block-level elements in the row are vertically centered. The basic idea is to use display: inline-block, vertical-align: middle, and a pseudo element to place the content block in the center of the container.

.parent::after, .son{    display:inline-block;    vertical-align:middle;}.parent::after{    content:'';    height:100%;}

 

4. word-break: break-all and word-wrap: break-word can automatically wrap the content of a container such as DIV.

Their differences:

1)Word-break: break-allFor example, if the div width is PX, its content will be automatically wrapped to PX. If there is a long English word (congratulation, etc.) at the end of the line, it will cut off the word, the end of the row is conra (front-end part of congratulation), and the next row is the back-end part of tulation (conguatulation.
2)Word-wrap: break-wordThe example is the same as above, but the difference is that it regards the entire congratulation word as a whole. If the end width of the row is insufficient to display the entire word, it will automatically put the entire word in the next line, instead of truncating words.

 

5. Remove the style that comes with your iPhone

/* Force remove the built-in style */input, button, select, textarea {outline: none;-webkit-appearance: none ;} /* force remove the style that comes with textarea */textarea {resize: none;-webkit-appearance: none ;}

 

6. Text from right to left

Syntax:
Writing-mode: Lr-tb | tb-rl
Parameters:
Lr-tb: Left-right, top-bottom
Tb-rl: top-bottom, right-left
For example:

div { writing-mode: tb-rl; }

 

7. The font-size: 0 clears the line break gap between the display: inline-block element and the letter-spacing and font-size elements.