Что означает значение "auto" в свойстве CSS.


что означает auto значение свойства CSS. Что происходит, когда значение свойства CSS установлено в auto?

3 60
css

3 ответа:

значение указанного свойства корректируется автоматически в соответствии с содержанием или контекстом элемента.

например, элемент уровня блока с height: auto будет расти выше, так как он содержит больше текста. Например, элемент блока с margin: 0 auto увеличит левое и правое поля до тех пор, пока оно не станет центрированным вдоль оси y окна просмотра.

это действительно зависит от свойства вы даете значение, различные свойства ведут себя по-разному в зависимости от содержания и контекста.

авто означает автоматически присоединяется. Наиболее распространенная причина, по которой я использую auto:

margin: 0 auto;

в центре элемента.

Пожалуйста, обратите внимание: если размер не объявлен, то он не будет работать.

Пример 1: div не центрирован, авто не работает

<style>
    .cont {
        margin: 0 auto;
    }
</style>
<div class="cont"></div> 

Пример 2: div центрируется на странице

<style>
    .cont {
        width: 1000px;
        margin: 0 auto;
    }
</style>
<div class="cont"></div> 

это действительно depnds на этот атрибут, который вы используете.Например, набор ширины блока автоматически расширит полное пространство его родительского элемента.Но установка высоты блока автоматически только расширит необходимое пространство его содержимого.

<style>
    #outer{
        width: 500px;
        height: 500px;
        border: solid 2px black;
    }
    #inner{
        width: auto;
        height: auto;
        background-color: aqua;
    }
</style>
<div id="outer">
<div id="inner">content</div>
</div>