What are the practical CSS tips

This article introduces the relevant knowledge of "what are the practical CSS tips?" in the operation of actual cases, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

What are the practical CSS tips?

1. Text horizontal center

To place a paragraph of text at the horizontal midpoint of the container, simply set the text-align property:

Text-align:center

two。 Container horizontal center

First set the container to an explicit width, and then set the horizontal value of margin to automatic.

Div#container {width:760px;margin:0 automatic;}

3. Text is vertically centered

The vertical center of a single line of text, as long as the line height and the container height are called substitutes.

For example, there is a row of numbers in the container.

1234567890

Then CSS wrote:

Div#container {height: 35 pixels; row height: 35px;}

If there are n lines of text, set the line height to one nth of the height of the container.

4. Container is vertically centered

For example, if there are two containers, one large and one small, how to center the small container vertically?

First, the large container is positioned as relative.

Div#big {position:relative;height:480px;}

Then, position the small container as absolute, move its upper-left corner down the y-axis by 50%, and finally move its edge to the top by 50% of its height.

Div#small {position: absolute; maximum: 50%; height: 240pixel; margin:-120px;}

5. Adaptive picture width

How to adjust the coaxial picture to automatically adapt to the width of the small container? CSS can write as follows:

Img {Max width: 100%}

What are the tips for CSS?

1.3D button

To make the button 3D, just set its upper left border to light and the lower right border to dark.

Div#button {background: # 888; border: 1px solid line; border color: # 999 "777" 777 "999;}

2.font attribute Shortcut

The format of font shortcut writing is:

Body {font:font-stylefont-variantfont-weightfont-sizeline-heightfont-family;}

So,

Body {font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight: normal; font-variant: lowercase; Font style: italic; Line height: 150%;}

Can be written as:

Body {Font: italic lowercase letters are normal 13pxDUP 150% ArialGradeHelveticaDifferent sansMurserif;}

This is the end of the content of "what are the practical CSS tips"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!