Значение свойств CSS auto.

Еще одно значение свойств CSS, которое, во первых используется довольно часто, во вторых оно используется для многих элементов по умолчанию. Т.е. если вы не указали значение для какого-то стиля CSS напрямую, то чаще всего, по умолчанию, он будет иметь значение auto.

Что значит это значение?

Я подготовил небольшой пример, на котором можно посмотреть, как это работает.

<p style="width:auto; border:1px solid #ccc;">Абзац</p>

auto - происходит от слова "автоматический".

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

Например, свойство width, которое отвечает за ширину элемента, по умолчанию, имеет значение свойства CSS width - auto. В примере, это свойство и значение просто продублированы.

Также с помощью свойства border для абзаца добавлена рамка границ, чтобы они были наглядно видны. 

Если открыть панель разработчика браузера и перейти в режим Computed (см. видео) и начать уменьшать размеры области просмотра браузера, мы с вами увидим, как браузер автоматически пересчитывает значение свойства width для выбранного абзаца.

Браузер автоматически рассчитывает значение для этого свойства, т.к. у него есть значение свойства CSS auto.

Если мы укажем какое-то конкретное значение для свойства width.

<p style="width:300px; border:1px solid #ccc;">Абзац</p>

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

Вот такой смысл работы значения свойств CSS auto. Аналогичным образом это работает и для остальных свойств CSS, которые могут принимать это значение. 

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


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