Що означає значення `auto` у властивості CSS.

79

Що означає autoзначення властивості CSS. Що станеться, коли для значення властивості CSS встановлено значення auto?

css

4

Поведінка autoCSS залежить від атрибута, якому ви призначаєте. Вам доведеться навести приклад того, який атрибут вас цікавить, якщо ви хочете отримати більш конкретну відповідь.

— cdhowie

89

Значення зазначеної властивості регулюється автоматично відповідно до змісту або контексту елемента.

Наприклад, елемент на рівні блоку з height: autoросте вище, оскільки містить більше тексту. В іншому прикладі, елемент блоку з margin: 0 autoбуде збільшувати ліве та праве поле, поки він не стане центром вздовж осі y області перегляду.

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

— BoltClock
джерело

7

@MarceloBarbosa: Ні, навіть у властивостях, які приймають обидва значення, авто не завжди означає 100%. Наприклад, ширина 100% змушує елемент вбудованого блоку становити 100% від його ширини контейнера, навіть якщо на тому самому рядку є інші елементи (натомість ці елементи переміщуються до наступного рядка). Авто ширина змушує вбудований блок стискатися відповідно до його вмісту, що, безумовно, не є 100%.

— BoltClock

Як я можу змусити елементи рівня блоку, які дають 100% в один рядок?

— Алстон,

Чи є значення “auto” типовим для всіх? Чи може кожна властивість мати значення "авто"?

— Робш

@robsch: Ні, незалежно від того, чи має властивість можливим значенням авто, не кажучи вже про початкове значення, повністю залежить від властивості. Для більшості властивостей автоматичне зведення значення не має сенсу.

— BoltClock

13

авто означає автоматичне налаштування. Найпоширенішою причиною, по якій я використовую авто, є:

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>

— радбікс
джерело

2

Це дійсно залежить від того атрибута, який ви використовуєте. Наприклад, автоматичне встановлення ширини блоку розширить повний простір його батьківського елемента, але автоматичне встановлення висоти блоку лише розширить необхідний простір його вмісту.

<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>

— Аптон Ю.
джерело