CSS

Применение значения auto

Если одному из свойств width, margin-left или margin-right задано значение auto, а для оставшихся двух – определенные значения, то свойство, заданное как auto, определяет длину, необходимую, чтобы сделать ширину блока равной ширине родительского элемента. Иначе говоря, пусть сумма значений семи свойств должна равняться 400 пикселам, не заданы ни отступы, ни рамка, поле справа и ширина составляют 100px, а поле слева определено как auto. Ширина поля слева составит 200 пикселов:

p {margin-left: auto; margin-right: 100px;
width: 100px;} /* поле слева – 'auto' – приравнивается 200px */


В некотором смысле auto может компенсировать разницу между суммой всех остальных и требуемым общим значением. Но что если для всех этих трех свойств задано значение 100px и ни одному из них – auto? Если всем трем свойствам задано значение, отличное от auto, – или в терминах CSS: когда эти свойства форматирования сверхограничены (overconstrained), – свойству margin-right всегда принудительно присваивается значение auto. Это означает, что если для обоих полей ширины задано значение 100px, то агент пользователя переопределит правое поле и присвоит ему значение auto. Тогда ширина поля справа будет определена в соответствии с правилом о том, что значение auto дополняет общую ширину элемента до ширины его блока-контейнера:

p {margin-left: 100px; margin-right: 100px;
width: 100px;} /* правому полю принудительно присваивается значение 200px */


Если оба поля задаются явно, а значение auto определено для width, то свойству width будет присвоено значение, необходимое для достижения необходимой общей ширины (каковой является ширина содержимого родительского элемента):

p {margin-left: 100px; margin-right: 100px; width: auto;}


Самый распространенный, он эквивалентен заданию полей без объявления конкретной ширины:

p {margin-left: 100px; margin-right: 100px;} /* аналогичен предыдущему */
Теги:
auto
Добавлено: 17 Июля 2018 22:34:11 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...