Страницы

Поиск по вопросам

вторник, 9 июля 2019 г.

Как работает auto в CSS?

Как высчитывается значение auto в CSS? Написано, что зависит от того, где это auto стоит. То есть, если написано width:auto — это один принцип расчета, если margin-top:auto, margin-bottom:auto — другой… В голове каша с этим auto. Например, если задать блоку position: absolute + задана ширина width:**px + задать margin-top:auto, margin-bottom:auto+ задать top: 0px, bottom: 0px, left: 0px, right: 0px - блок выровняется по середине по высоте. Если же убрать, например, top: 0px, то margin по вертикали вообще пропадет и не будет выравнивания по высоте.
То есть, у меня нет понимания системы работы auto. Может быть, кто-то из вас уже систематизировал это дело. Помогите, пожалуйста, систематизировать то, как в каком случае работает auto в CSS


Ответ

Значение определённого свойства auto работает в зависимости от применяемого свойства и контекста (значений других свойств).
Это всё записано в стандартах, к примеру в этом по поводу margin и height для абсолютно позиционируемых элементов. Там об этом записано так
For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint: 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below. If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
Это значит, что если top, height и bottom установлены не в auto (это значение по умолчанию для этих свойств), то margin-top, margin-bottom занимают оставшееся пространство (the two margins get equal values в спецификации).

Комментариев нет:

Отправить комментарий