Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Посмотреть всю серию здесь .
расшифровка
Auto — это CSS-значение, которое имеет множество применений.
Это значение по умолчанию для многих свойств блочной модели, таких как widthheightmarginbackground-size
.box {
width: auto;
height: auto;
margin: auto;
background-size: auto auto;
}
Это также значение по умолчанию для свойств позиции, таких как topbottomleftrightz-index
.box {
position: relative|absolute|fixed;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: auto;
}
Есть и другие более неясные места, которые можно использовать auto, такие как overflowcursortable-layoutcolumn-width
.box {
overflow: auto;
cursor: auto;
table-layout: auto;
column-width: auto;
}
Вообще говоря, значение auto автоматически вычисляется пользовательским агентом, и конкретный эффект зависит от содержимого и контекста, в которых он используется.
Давайте посмотрим на пример …
.box {
width: auto;
height: auto;
}
Ширина высота
При использовании значения по умолчанию auto, применяемого к ширине и высоте элемента <div>
Стоит отметить, что ширина и высота auto
При этих обстоятельствах, когда размер окна изменяется, доступная ширина для <div>
Это поведение по умолчанию для любого элемента уровня блока, и мы подробнее рассмотрим это в «Эпизоде 4: display .
Поле
Хотя auto
Очень распространенный шаблон дизайна в Интернете — центрировать блок контента, и часто весь сайт выше определенной ширины. Это может быть достигнуто путем установки max-widthmargin:auto
Когда мы используем margin-left:auto Когда мы делаем то же самое с правой стороны, то же самое происходит в противоположном направлении, и коробка перемещается настолько далеко назад, насколько это возможно.
.box {
max-width: 50%;
margin: 0 auto;
}
Поскольку с каждой стороны теперь равные поля, поле остается в центре страницы.
Жаль, что этот трюк не работает с вертикальным центрированием, но об этом мы поговорим в следующем видео.
Ширина 100%
<div>width:autowidth:autowidth:100%
Если у нас есть <div>auto
Если мы изменим width:autowidth:100% Это потому, что width:100%<div>
Это делает ширину нашего <div>
Обходной путь должен использовать либо autobox-sizing: border-box Следующий эпизод посвящен CSS Box Model, поэтому обязательно ознакомьтесь с ним для получения дополнительной информации. Иногда использование изменения box-sizing
Позиция
Другое место, где auto может прийти на помощь, это использование CSS позиционирования.
Представьте себе ситуацию с элементом, расположенным в верхнем левом углу поля. Предположим, что при определенной ширине мы хотим, чтобы этот же элемент находился в правом нижнем углу.
Я изменил цвет фона, чтобы показать, что медиа-запрос действительно запускается, но кажется, что установка bottomright:0
Это потому, что topleftbottomright
Чтобы это работало, мы сначала должны убрать эффект topleftauto
.box {
position: absolute;
left: auto;
right: 0;
}
Теперь все работает как положено.
Следите за нашей статьей Quick Tip в ближайшее время!