About the role of auto in css_html/css_WEB-ITnose

There are many attributes in CSS that can set the value to auto. Auto means automatic, but what exactly is this automatic value? For example, how does margin:auto achieve centering? What exactly is the value of automatic here?

Reply to discussion (solution)

Hello:
The code to implement centering is like this: #main{margin: 0 auto;}

The principle is the order of the box model. If written completely, it is #main{margin: 0 auto 0 auto;}
which means: the top and bottom margins of the box are 0, and the left and right margins are auto. In this way, it is very simple to achieve the centering of the box. .

auto assigns a value based on the rendering of the browser. It means that the built-in value of the browser is assigned to it, or the inherited value is assigned to it

Auto is meaningless 'here'

It can only be discussed in the actual use environment.

Anyway, there are only a few places where you can use auto and you will understand what he means after each experiment

Anyway, let’s experiment boldly

css rendering calculation.

Hello:
The code to implement centering is as follows: #main{margin: 0 auto;}

The principle is the order of the box model. If written completely, it is #main{ margin: 0 auto 0 auto;}
It means: the top and bottom margins of the box are 0, and the left and right margins are auto. In this way, the box is easily centered.


Why does auto automatically center when left and right? How does the browser handle auto?

margin:0 10px 0 auto;

margin:0 auto 0 10px;

margin:0 auto 0 auto;

Let me try these three You can understand the display when changing the size of the browser window

margin: top, right, bottom, left;

Each position here has a corresponding value, and the standard used is margin :1px 1px 1px 1px; This means that the external complement values ​​around the top, right, bottom, and left are all 1px.

can also be abbreviated as margin:1px 1px; This way of writing means: the first 1px represents top and bottom, the second 1px represents right and left;

If the surrounding values ​​​​are It’s the same, it can also be abbreviated as margin:1px; This can represent the surrounding values;

Now back to your question: the usage of centering is margin:0 auto; This is obviously the representation, the upper and lower external values is 0, then the right side is automatic, and the left side is also automatic, so this object is in the middle.

you you