Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the role of auto in CSS". In daily operation, I believe that many people have doubts about the role of auto in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "what is the role of auto in CSS?" Next, please follow the editor to study!

Auto means adaptive, and auto is the default value for many dimension values, which is calculated automatically by the browser. The sum of the widths of margin, border, padding, and content in block-level elements constitutes the parent element width. When you use the auto attribute, the width of the parent element changes, and so does the width of the element.

What is the value of auto

The value of auto is the sum of the widths of margin, border, padding and content

+ but when the element is set to float, the width of the element becomes the width of the content, supported by the content, that is, the so-called wrapping.

Overflow | position:absolute | float:left/right can be encapsulated, and so can replacement elements.

* | position:relavtive | relative positioning occupies the original position, and the mode cannot be transformed, that is, it is not encapsulated.

Therefore, width:auto; cannot be used to make the element width adaptive to the browser width on wrapping elements. As shown in the following figure

What is the purpose of setting auto

-sometimes setting margin:0auto; doesn't work?

+ maigin:0auto; means that the upper and lower margins of the element are 0, and the left and right margins are adaptive according to the width of the parent element (body), that is, the left and right margins are centered horizontally. If this setting doesn't work, there are roughly two reasons.

+ (1) the width is not set for DIV, and if DIV does not have a width, it cannot refer to the width of the parent element for its own auto.

+ (2) DIV is encapsulated, that is, it is separated from the standard flow, just as the standard flow in which the parent object is located is compared to the surface, and the wrapping element is already in heaven. There is no parent element width to reference for auto.

At this point, the study on "what is the role of auto in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.