Свойство display | CSS справочник
CSS свойстваОпределение и применение
CSS свойство display определяет как должен отображаться определенный элемент HTML.
Поддержка браузерами
Браузер Internet Explorer 8 требует наличия декларации !DOCTYPE в документе.
CSS синтаксис:
display:"inline | block | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit";
JavaScript синтаксис:
object.style.display = "block"
Значения свойства
| Значение | Описание |
|---|---|
| inline | Элемент отображается как строчный (inline) элемент (например — <span>). Это значение по умолчанию. |
| block | Отображает элемент как блочный элемент (например — <h2> ). |
| flex | Элемент отображается как блочный flex-контейнер. |
| grid | Элемент отображается как блочный grid-контейнер. |
| inline-block | «Блочно-строчные» элементы — позволяет задавать размеры, рамки, отступы, как и блочным элементам, ширина зависит от содержания (не растягивается на всю ширину контейнера), выравниваются вертикально как и строчные элементы. |
| inline-flex | Элемент отображается как строчный flex-контейнер. |
| inline-grid | Элемент отображается как строчный grid-контейнер. |
| inline-table | Определяет, что элемент является таблицей, но при этом встраивается в другие элементы, а не является блочной таблицей (элемент обтекает другими элементами). |
| list-item | Элемент ведет себя как элемент списка — <li>. |
| table | Элемент ведет себя как блочная таблица — <table>. |
| table-caption | Элемент ведет себя как наименование таблицы — <caption>. |
| table-column-group | Элемент ведет себя как группа столбцов — <colgroup>. |
| table-header-group | Элемент ведет себя как «шапка таблицы» — <thead>. |
| table-footer-group | Элемент ведет себя как «подвал таблицы» — <tfoot>. |
| table-row-group | Элемент ведет себя как «тело таблицы» — <tbody>. |
| table-cell | Элемент ведет себя как ячейка таблицы — <td>. |
| table-column | Элемент ведет себя как часть группы столбцов — <col>. |
| table-row | Элемент ведет себя как строка таблицы — <tr>. |
| none | Элемент не будет отображаться в документе (под него не резервируется место на странице). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Использование блочно-строчных элементы</title>
<style>
div {
display : inline-block; /* элементы будут отображаться как "блочно-строчные" */
width : 200px; /* задаём ширину блока */
background-color : orange; /* задаём цвет заднего фона */
text-align : center; /* выравниваем текст по центру внутри элементов */
background-color : 3px solid green; /* задаём для элементов сплошную границу зелёного цвета размером 3px */
margin-bottom : 10px; /* устанавливаем внешний отступ снизу от элементов */
}
</style>
</head>
<body>
<divБлок 1</div>
<divБлок 2</div>
<divБлок 3</div>
<divБлок 4</div>
<divБлок 5</div>
<divБлок 6</div>
<divБлок 7</div>
<divБлок 8</div>
<divБлок 9</div>
<divБлок 10</div>
<divБлок 11</div>
<divБлок 12</div>
</body>
</html>
В этом примере мы разместили 12 элементов, для которых указали ширину равную 200 пикселям, с помощью свойства display указали, что эти элементы отображаються как блочно-строчные (inline-block). Обратите внимание, что в этом случае элементы выстраиваються в линейку, кроме того, в зависимости от ширины окна, количество элементов в строке будет изменяться.
Результат нашего примера:
Пример использования блочно-строчных элементов.CSS свойстваВсе для начинающего вебмастера | Блочная верстка div — основы
Содержание
Любая веб-страница состоит из расположенных на ней элементов, и практически всегда за их размещение отвечает блочная верстка div. Конечно, существует еще и табличная верстка с использованием тегов <table>, <tr>, <td>, и существуют даже споры о том, какую лучше использовать систему — блочную или табличную. Однако в действительности в в настоящее время вы не встретите ни одного из современных, популярных и удобных сайтов, использующих только табличную верстку. В лучшем случае она используется только для того, для чего она и предназначена — то есть для создания таблиц, но никак не для формирования самой структуры сайта.
Дело в том, что div верстка сайта позволяет задавать множество css-свойств, недоступных для таблиц. Кроме того, самый главный недостаток табличной системы состоит в том, что таблица не будет показана на экране до тех пор, пока она не будет полностью загружена браузером. Если весь сайт сделан в таблице, то он появится на дисплее лишь после того, как будет полностью загружен весь html-код страницы.
Тег DIV и свойство float
Основа блочной системы — это тег <div></div>, который является контейнером для контента. Внутри него также могут содержаться другие контейнеры <div></div>.
Использовать тег DIV — не сложнее, чем редактировать теги MP3. Как правило, стандартная структура сайта формируется следующим образом: существует основной контейнер <div> (часто ему присваивается класс с названием wrapper, container, main и т.д.). Внутри этого контейнера располагаются блоки меню, контентной части, сайдбара.
По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».
Рассмотрим это свойство на примере с двумя блоками.
<div>Блок для контента</div> <div>Блок для сайдбара</div>
Этот код даст следующий результат:
Свойство clear
Важно учитывать, что свойство float распространяется не только на сам блок, в котором оно прописано, но и на последующий элемент, который будет идти за этим блоком. То есть если мы к вышеописанным двум блокам добавим еще один блок, не указывая ему никаких свойств, то он расположится не с новой строки, а начнется справа от второго блока.
Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.
Дополним вышеуказанный пример новым элементом:
<div>Блок для контента</div> <div>Блок для сайдбара</div> <div>Новый блок, расположенный снизу</div>
Результат:
Отступы в блочной верстке
Помимо расположения блоков, немаловажным является задание отступов как между блоками, так и внутри них. Для этого, соответственно, используются свойства margin и padding.
Отступы задаются отдельно для верхней, правой, нижней и левой частей элемента. Их можно задать одной строкой путем перечисления четырех значений:
margin: 20px 10px 0 40px
Блок с такими параметрами будет располагаться на 20 пикселей ниже вышестоящего элемента, на десять пикселей от правостоящего элемента, будет иметь нулевой отступ снизу и будет иметь отступ размером в 40 пикселей слева.
Если все те же самые показатели указать в свойстве padding, то это будут внутренние отступы для контента по отношению к границам блока, в которых он расположен.
Можно также задавать отдельные свойства для отдельных граней с помощью margin-top, margin-bottom, margin-left, margin-right (и аналогично для padding). В таком случае, если какая-то из граней не будет указана, то отступ с ее стороны будет равен нулю или будет определен общими свойствами css, заданными для блоков на странице.
Блочная модель CSS — свойства блоков CSS (padding, border, margin).
Блочная модель CSS в английском языке называется Box model (box — это коробка). Этот перевод немного помогает понять суть блочной модели. Суть в том, что при формировании страницы на экране используются блоки — прямоугольные области экрана.
Блочная модель CSS — это одна из основ для понимания CSS, модель форматирования документа.
Перед изучением CSS вы должны были изучить HTML, а значит вам должно быть известно что теги HTML делятся на блочные элементы и строчные элементы.
- Блочные элементы — теги создающие блок, то есть они занимают всю доступную ширину (от края до края), высота блочного элемента зависит от его содержимого, блочный элемент всегда занимает новую строку. Примеры блочных элементов — теги <p> и <div>.
- Строчные элементы — теги которые не создают своих блоков, а влияют на отображение содержимого блока. Пример таких тегов — <a>, <em>, <img> и другие.
Давайте на примере рассмотрим отличия этих групп элементов.
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
div
{
width: 400px; /* Ширина блока */
height: 200px; /* Высота блока */
background-color: yellow
}
p { background-color: yellow }
</style>
</head>
<body>
<div>Блок тега div.</div>
<p>Блок тега p. Этот <em>кусок текста</em> выделен тегом em.<p/>
</body>
</html>Этот пример наглядно показывает что теги <p> и <div> создают свои блоки. Каждый блок начался с новой строки. Для блока <div> была задана ширина и высота, а блок <p> занял всю ширину экрана, его высота равна высоте его содержимого. Чтобы это было видно, для обоих элементов установлен жёлтый фоновый цвет.
Тег <em> просто отформатировал текст внутри блока <p>.
Подробнее про блоки.
Любой блочный элемент имеет установленный набор свойств, которые можно менять при помощи CSS.
Основа блока — его контент или содержание, ширина поля контента задаётся свойством width, а высота свойством height. Но у блока есть и другие поля, они как листья капустны накладываются друг на друга.
Проще показать это в виде рисунка.
Мы видим, что кроме самого поля контента, у блока есть ещё три свойства:
- Внутренний отступ — padding — по английский «набивка». Набивка — то, что набито, чем заполнена внутренность чего-либо. padding — это часть блока от края контента до границы.
- Граница — border — по английский и есть «граница». Границу блочного элемента можно установить разными стилями: сплошной линией, точками, пунктиром; можно установить цвет границы. Подробно о том, как управлять свойством border речь пойдёт ниже.
- Внешний отступ — margin — по английски «маржа». В экономическом значении маржа значит разницу между себестоимостью и ценой.
В рамках этой статьи свойство outline мы рассматривать не будем. Только отмечу: на размер блока это свойство не влияет.
Остальными свойствами можно управлять при помощи CSS устанавливая их размер и некоторые другие стилевые значения. Давайте рассмотрим это на примере.
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
div
{
width: 400px; /* Ширина блока */
height: 100px; /* Высота блока */
border-style: solid; /* Граница - сплошная линия */
border-width: 3px; /* Толщина границы */
border-color: black; /* Цвет границы */
background-color: yellow
}
p { background-color: yellow }
</style>
</head>
<body>
<div>Блок тега div.</div>
<p>Блок тега p. Этот абзац имеет знаяения свойств по умолчанию.<p/>
<p>Стиль: padding: 10px.<p/>
<p>Стиль: margin: 30px.<p/>
</body>
</html>Результат должен быть такой:
Рисунок 2. Работа примера №2.Мы видим чёрную (black) рамку толщиной 3px вокруг блока, созданного тегом <div>. Первый абзац отформатирован по умолчанию, за исключением фонового цвета. Во втором абзаце установлен внутренний отсуп (padding) размером 10px, видно что вокруг текста площадь заливки фоновым цветом увеличилась. Третий абзац не имеет внутреннего отступа, но задан внешний отступ margin размером 30px. Мы видим что расстояне между этим и вторым абзацем больше, чем между вторым и первым — это работает внешний отступ.
Границы и отступы не являются обязательными свойствами блока, значения всех их может быть равно нолю.
Как устанавливаются фоновые цвета для этих свойств?
- Внутренний отступ — padding — всегда имеет цвет фона самого элемента, заданного в свойстве background-color.
- Граница — border — её цвет задаётся свойством border-color.
- Внешний отступ — margin — он всегда прозрачен, поэтому цвет этой области совпадает с фоновым цветом элемента родителя (в нашем случае это белый фоновый цвет элемента <body> установленный по умолчанию).
Расширенные возможности управления свойствами блока
Кроме управления всеми сторонами блока одновременно, есть позможность управлять каждой стороной каждого свойства отдельно. Вот рисунок, который демонстрирует свойства CSS для такого управления стилями блока.
Рисунок 3. Блочная модель CSS.Рассмотрим подробнее свойства блоков и приведём примеры их использования.
Внутренний отступ — padding
Внутренний отступ — padding — расстояние от внутреннего края границы до условного прямоугольника, ограничивающего контент блока. Так как внутренний отступ может быть разным у каждой стороны блока, то говорят «верхний внутренний отступ» или «отступ сверху». Стоит отметить что в разных книгах по CSS для свойства padding используются различные переводы, в некоторых он называется просто отступ, в других поле, а отступом называют свойство margin.
Основная функция внутреннего отступа — создать пустое пространство между содержимым блока и границей, например чтобы текст не прилегал вплотную к границе. Внутренние отступы делают внешний вид страницы более привлекательным, а текст, оформленный с их использованием будет более читабельным.
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
div
{
background-color: #F3F3D6;
border-style: solid; /* Граница - сплошная линия */
border-width: 4px; /* Толщина границы */
border-color: #6D6D38; /* Цвет границы */
padding: 10px; /* Внутренние отступы */
}
</style>
</head>
<body>
<div>
Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.
</div>
</body>
</html>Результат должен быть такой:
Рисунок 4. Работа примера №3.Мы видим красиво оформленный блок с внутренними отступами до границы.
Граница — border
Границы — это линии вокруг внутреннего содержимого элемента. Границу можно установить для всех сторон блока, или для любого числа. Для границы можно задать толщину, стиль и цвет. Для создания рамки (границы), как писалось ранее, в CSS существует свойство border. В этом свойстве можно прописать все характеристики рамки (толщину, стиль и цвет). А для создания границ на отдельных сторонах блока нужно воспользоваться свойствами border-top, border-right, border-bottom и border-left.
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
div
{
background-color: #F3F3D6;
border-left: 4px solid #6D6D38;
padding: 10px;
}
</style>
</head>
<body>
<div>
Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.
</div>
</body>
</html>Результат выполнения кода должен быть такой:
Рисунок 5. Работа примера №4.Внешний отступ — margin
Отступ — это пространство от границы блока до его внешнего края. Отступы устанавливаются свойством margin. Как и в случае с внутренними полями и границами, отступы можно задавать для любой стороны блока. Например, свойство margin-left управляет отступом блока с левой стороны.
Особенности внешних отступов.
- Внешний отступ всегда прозрачен. Он не принимает цвет фона или фоновое изображение установленное для блока, к которому он относится. Однако, он принимает фон родительского элемента.
- Внешние отступы суммируются. Если между блоками заданы отступы по 25px, то расстояние между ними будет не 50px, а 25px, так как внешние отступы накладываются друг на друга.
- Для внешнего отступа можно задавать отрицательное значение. Такое значение сдвигает блок, например объявление margin-left: -20px сдвинет блок влево на двадцать пикселей.
- Отступы можно задавать в процентах, такие отступы вычисляются от размера блока контента. Это будет делаться в отношении как горизонтальных, так и вертикальных отступов.
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
div {
background-color: #F3F3D6;
padding: 10px;
}
p {
background-color: yellow;
border: 1px solid #6D6D38;
margin: 20px
}
</style>
</head>
<body>
<div>
<p>Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.</p>
</div>
<p>Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.</p>
<p>Странник оглянулся вокруг. Во всех направлениях до горизонта была пустыня.</p>
<p></p>
</body>
</html>Рассмотрим этот пример подробней. Результат его выполнения должен быть такой:
Рисунок 6. Работа примера №5.Для тега <p> тут задана рамка толщиной 1px. Это сделано для того, чтобы было видно где начинается область внешнего отступа этого тега.
Один тег <p> помещён в блок <div> с установленным фоновым цветом. Видно что внешний отступ тега <p> принял фоновый цвет тега <div>. А теги <p> находящиеся вне этого блока, имеют белый цвет внешнего отступа, соответствующий фоновому цвету блока <body> по умолчанию.
Последний, пустой абзац, имеет высоту height: 20px, он помещён в пример только для того, чтобы было лучше видно что расстояние между абзацами составляет 20px и равно высоте этого пустого абзаца. В таблице стилей для тега <p> задано объявление margin: 20px, видно что внешние отступы абзацев сливаются и расстояние между абзацами равно не 40px, а 20px.
Ширина блока
Ширина блока — составная величина, она складывается из суммы значений нескольких свойств:
- width — ширина содержимого блока;
- padding-left и padding-right — внутренний отступ слева и справа от содержимого;
- border-left и border-right — толщина границы слева и справа;
- margin-left и margin-right — внешний отступ слева и справа.
Значения некоторых свойств могут быть равны нолю, тогда они не влияют на ширину блока.
На рисунке 7 блок обозначен чёрной пунктирной линией.
Рисунок 7. Ширина блока.Если в блоке значение width не задано в таблице стилей, то оно устанавливается по умолчанию как auto. В этом случае поле контента займёт всю доступную ширину (родительский блок или, если его нет, окно браузера), но размеры всех отступов и граница при этом сохранятся.
Посчитаем ширину блока на примере следующего стиля:
width: 400px; /* Ширина блока */
padding: 5px; /* Отступ до границы */
border-width: 3px; /* Толщина границы */
margin: 7px; /* Внешний отступ */Сложим все слагаемые, составляющие ширину блока:
Ширина блока = 400 + 5*2 + 3*2 + 7*2 = 430px.
Устаревшая блочная модель
Исторически так сложилось, что метод расчёта ширины блока описанный выше использовался не всегда. На данный момент он является стандартом, принятым концерном W3C. Но раньше свойство width не было равно полю контента, а представляло собой постранство блока, которое включает свойство border. Источником такой блочной модели была компания MicroSoft и на её основе работал браузер Internet Explorer до версии 7. На рисунке продемонстрировано сравнение двух блочных моделей.
Рисунок 8. Две блочные модели.В сети сохранилось огромное количество старых документов, которые создавались в старой блочной модели, которую также называют «режим совместимости». Поэтому списывать её со счетов не стоит.
Важно знать: если в документе на задан <!DOCTYPE>, то браузеры переходят в режим совместимости.
Свойство box-sizing
При расчёте ширины блока при использовании в свойстве width процентов в качестве единицы измерения могут возникнуть определённые проблемы. Проценты — это относительная величина, а это делает её несколько непредсказуемой, особенно если внутренний отступ и граница заданы в абсолютных единицах. В итоге возможен вариант, когда суммарная ширина блока превысит ширину окна браузера, а это приводит к появлению горизонтальной полосы прокрутки.
Подробно вникать в суть проблему не будем, это не уровень этой статьи. Тут только отмечу, что устаревшая система иногда оказывается полезной. Для возможности менять алгоритм блочной модели в CSS3 ввели полезное свойство box-sizing. При значении border-box ширина блока начинает включать поля и границы, но не внешние отступы. Таким образом, назначая свойству box-sizing значение border-box, мы можем задавать ширину блока width в процентах и спокойно указывать свойства border и padding нужной нам величины, не боясь, что изменится ширина блока.
Высота блока
При формировании высоты блока используется та же формула, что и при формировании ширины блока. Высота блока — это сумма высоты поля контента, границы, внутреннегот и внешнего отступов (верхних и нижних конечно же). Если значение свойства height не указано, то по умолчанию устанавливается значение auto, в этом случае высота поля контента вычисляется автоматически и зависит от самого контента.
На рисунке 9 показаны все свойства, из которых складывается суммарная высота блока, обозначенного чёрным пунктиром.
Рисунок 9. Высота блока.Хотя формула определения высоты блока и его ширины весьма похожи принципиально, но при работе с блоками в этом плане есть существенные различия.
Давайте сразу передём к примеру и рассмотрим случай, в котором свойствам блока width и height назначены значения 200%.
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
div {
width: 200%; /* Ширина блока */
height: 200%; /* Высота блока */
background-color: #F3F3D6;
}
</style>
</head>
<body>
<div>
Блок с шириной и высотой = 200%.
</div>
</body>
</html>Блоку также задан фоновый цвет, чтобы была видна его площадь. Вот как он выглядит:
Рисунок 10. Работа примера №6.Мы видим что по горизонтали образовалась полоса прокрутки, размер которой в два раза превышает размер окна браузера, т.е. блок по ширине всегда равен 200% от родительского элемента — окна браузера. Но во вертикали такого эффекта нет. Использование процентов для указания высоты не имеет смысла, так как высота высота родителя по умолчанию не существует и её надо указывать.
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
body {
height: 50px; /* Высота блока */
}
div {
width: 200%; /* Ширина блока */
height: 100%; /* Высота блока */
background-color: #F3F3D6;
}
</style>
</head>
<body>
<div>
Блок с шириной = 200% и высотой = 100%.
</div>
</body>
</html>Тут родительскому элементу для <div> — тегу <body>, установлена высота величиной 50px, и высота для <div> установлена 100%. То есть этот тег имеет высоту 50px.
Рисунок 11. Работа примера №7.Видно, что площадь окрашенная в цвет #F3F3D6 увеличилась. Если окно браузера ещё уменьшить по высоте, то появится вертикальная полоса прокрутки, чего в прошлом примере не было.
Если в этом примере Но как сделать так, чтобы задать блоку параметр height в процентах и это работало. Попробуйте изменить прошлый пример и для селектора body установить свойство height равное 100%. Такой пример работат не будет. Почему? Потому что для тега <body> высота определяется относительно его родителя — тега <html>, а там высота не задана. Значит 100% от ничего равно ничего. Чтобы решить эту проблему нужно написать такой стиль:
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
html, body {
height: 100%; /* Высота блока */
}
div {
width: 200%; /* Ширина блока */
height: 200%; /* Высота блока */
background-color: #F3F3D6;
}
</style>
</head>
<body>
<div>
Блок с шириной и высотой = 200%.
</div>
</body>
</html>Только установив высоту в 100% для тегов <html> и <body> мы сможем установить высоту в процентах для тега <div> и она будет работать.
Рисунок 12. Работа примера №8.При работе с высотой блока следует помнить о ещё одной особенности, если контент превышает размер блока, то он выходит за его рамки. Вот пример такого кода:
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
div {
width: 300px; /* Ширина блока */
height: 100px; /* Высота блока */
border: 1px solid #6D6D38;
background-color: #C7DCEF;
}
</style>
</head>
<body>
<div>
Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.
<br><br>
Странник оглянулся вокруг. Во всех направлениях до горизонта была пустыня.
</div>
</body>
</html>На примере видно, что текст вышел за границы блока.
Рисунок 13. Работа примера №9.Избежать подобного очень просто — достаточно не задавать высоту контента (height). Впрочем, иногда нужно строго определить высоту блока. В этом случае можно использовать свойство overflow со значением auto. Это свойство будет в блоке создавать полосу прокрутки в случае, если размер контента привысит размер блока.
Добавим в стиль примера №9 свойство overflow со значением auto и результат будет таким:
Рисунок 14. Свойство overflow со значением auto.У свойства overflow есть другое значение, которым также можно регулировать высоту блока — hidden (англ. скрытый). Это значение просто скрывает всё, что не влазит в установленные размеры блока.
Рисунок 14. Свойство overflow со значением hidden.Минимальная и максимальная ширина элемента
В этой статье также уместно вспомнить свойства min-width и max-width устанавливающие минимальную и максимальную ширину элемента соответственно.
Свойство min-width работает так: если пользователь меняет размеры окна браузера, то ширина блока не становиться меньше минимальной, а в таком случае появляется полоса прокрутки. Значение ширины элемента будет зависеть от значений свойств width, max-width и min-width.
В таблице приведены правила расчёта браузерами ширины блока при использовании этих свойств.
| Значения свойств | Ширина | ||||
|---|---|---|---|---|---|
| min-width | < | width | < | max-width | width |
| min-width | > | width | > | max-width | min-width |
| min-width | > | width | < | max-width | min-width |
| min-width | < | width | width | ||
| min-width | > | width | min-width | ||
| min-width | > | max-width | min-width | ||
| min-width | < | max-width | max-width | ||
Таблицу следует читать так: если значение width меньше значения min-width, то ширина элемента принимается равной min-width.
Свойство max-width — устанавливает максимальную ширину элемента. Пример использования свойства max-width:
<!DOCTYPE html>
<html>
<head>
<title>Блочная модель CSS</title>
<style>
div {
border: 1px solid #6D6D38;
background-color: #C7DCEF;
max-width: 70%
}
</style>
</head>
<body>
<div>
Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.
<br><br>
Странник оглянулся вокруг. Во всех направлениях до горизонта была пустыня.
</div>
</body>
</html>Минимальная и максимальная высота элемента
Аналогично есть свойства для назначения минимальной и максимальной высоты элемента: min-height и max-height.
Свойство align-items | CSS справочник
CSS свойстваОпределение и применение
CSS свойство align-items производит выравнивание всех элементов внутри флекс контейнера вдоль поперечной оси, или производит выравнивание всех элементов макета сетки по оси столбца grid-контейнера.
Для того, чтобы произвести выравнивание всех элементов макета сетки по оси строки, вы можете воспользоваться свойством justify-items.
Обращаю Ваше внимание на то, что если элемент не является флекс, или grid-контейнеромом, то свойство align-items не окажет на такой элемент никакого эффекта.
Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS «Верстка по Flexbox (работа с контейнерами)».
Схематичное отображение работы свойства align-items отображено на следующем изображении:
* — для элементов сетки макета (grid-элементы) допускается использование сокращенных значений start и end, для флекс элементов необходимо использовать полные значения flex-start и flex-end.
Поддержка браузерами
CSS синтаксис:
/* флекс контейнер */ align-items: "stretch | center | flex-start | flex-end | baseline | initial | inherit"; /* grid-контейнер*/ align-items: "stretch | center | start | end | baseline | initial | inherit";
JavaScript синтаксис:
object.style.alignItems = "stretch"
Значения свойства
| Значение | Описание |
|---|---|
| stretch | Флекс элементы растягиваются по размеру контейнера вдоль поперечной оси, элементы сетки макета растягиваются вдоль столбца. Это значение по умолчанию. |
| center | Элементы располагаются по центру строки контейнера (середина поперечной оси, или оси столбца). |
| flex-start | Элементы располагаются в начале строки контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start, для флекс элементов необходимо использовать полное значение flex-start |
| flex-end | Элементы располагаются в конце строки контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end, для флекс элементов необходимо использовать полное значение flex-end. |
| baseline | Элементы распологаются по их базовой линии. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства align-items (для флекс контейнера)</title>
<style>
.container {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
height: 300px; /* устанавливаем высоту контейнера */
background: bisque; /* устанавливаем цвет заднего фона */
-webkit-align-items: center; /* для поддержки ранних версий браузеров */
align-items: center; /* флекс элементы располагаются по центру контейнера (середина поперечной оси) */
}
.container > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь флекс контейнера )
width: 20%; /* устанавливаем ширину блока */
}
.container:hover { /* стили при наведении на контейнер */
-webkit-align-items: center; /* для поддержки ранних версий браузеров */
align-items: center; /* флекс элементы распологаются по их базовой линии */
}
.container div:nth-of-type(1) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере) */
background : orange; /* устанавливаем цвет заднего фона */
height : 50px; /* устанавливаем высоту блока */
font-size : 20px; /* устанавливаем размер шрифта */
}
.container div:nth-of-type(2) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере) */
background : tan; /* устанавливаем цвет заднего фона */
height : 150px; /* устанавливаем высоту блока */
font-size : 18px; /* устанавливаем размер шрифта */
}
.container div:nth-of-type(3) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере) */
background : yellow; /* устанавливаем цвет заднего фона */
height : 80px; /* устанавливаем высоту блока */
font-size : 12px; /* устанавливаем размер шрифта */
}
.container div:nth-of-type(4) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем четвертый <div> в контейнере) */
background : blue; /* устанавливаем цвет заднего фона */
height : 25px; /* устанавливаем высоту блока */
font-size : 10px; /* устанавливаем размер шрифта */
}
.container div:nth-of-type(5) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем пятый <div> в контейнере) */
background : lime; /* устанавливаем цвет заднего фона */
height : 90px; /* устанавливаем высоту блока */
font-size : 40px; /* устанавливаем размер шрифта */
}
</style>
</head>
<body>
<div class = "container">
<div>1. Text</div>
<div>2. Text</div>
<div>3. Text</div>
<div>4. Text</div>
<div>5. Text</div>
</div>
</body>
</html>
В этом примере мы разместили блочный флекс контейнер, внутри которого мы разместили пять элементов <div>, которым задали ширину равную 20% от ширины родительского элемента.
С помощью свойства align-content указали, что флекс элементы располагаются по центру контейнера (середина поперечной оси). Кроме того, с помощью псевдокласса :hover указали, что при наведении на наш контейнер значение свойства align-items изменяется на baseline, в результате чего флекс элементы распологаются по их базовой линии.
Результат примера:
Пример использования свойства align-items (для флекс контейнера).В следующем примере мы рассмотрим использование свойства align-items для grid-контейнеров:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства align-items (для grid-контейнера)</title>
<style>
body {
display: flex; /* элемент отображается как блочный flex-контейнер */
flex-wrap: wrap; /* указывает, что флекс элементы внутри контейнера распологаются в несколько горизонтальных рядов (в случае переполнения) */
}
.grid-container,
.grid-container2,
.grid-container3,
.grid-container4,
.grid-container5 {
display: inline-grid; /* элемент отображается как строчный grid-контейнер */
grid: auto / repeat(4, 1fr); /* определяем количество и ширину строк и столбцов в макете сетки */
height: 120px; /* устанавливаем высоту контейнера */
width: 30%; /* устанавливаем ширину контейнера */
background: rgb(0,150,208); /* устанавливаем цвет заднего фона */
margin: 10px; /* устанавливаем внешние отступы */
text-align: center;
}
div > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>)
background: rgb(241,101,41); /* устанавливаем цвет заднего фона */
border: 1px solid; /* устанавливаем сплошную границу размером 1 пиксель */
}
.grid-container {
align-items: stretch; /* элементы сетки макета растягиваются вдоль столбца */
}
.grid-container2 {
align-items: start; /* элементы располагаются в начале строк контейнера */
}
.grid-container3 {
align-items: end; /* элементы располагаются в строк строк контейнера */
}
.grid-container4 {
align-items: center; /* элементы располагаются по центру строки контейнера */
}
.grid-container5 {
align-items: baseline; /* элементы распологаются по их базовой линии */
}
.fontSize40 {
font-size: 40px;
}
</style>
</head>
<body>
<div class = "grid-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<div class = "grid-container2"><div>A</div><div>B</div><div>C</div><div class = "fontSize40">D</div><div>E</div><div>F</div><div>G</div><div class = "fontSize40">H</div></div>
<div class = "grid-container3"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<div class = "grid-container4"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<div class = "grid-container5"><div>A</div><div>B</div><div>C</div><div class = "fontSize40">D</div><div>E</div><div>F</div><div>G</div><div class = "fontSize40">H</div></div>
</body>
</html>
В этом примере мы разместили пять строчных grid-контейнеров шириной 30% от родительского элемента <body> внутри которых мы разместили по восемь элементов <div>. Для элемента <body> мы указали, что он является многострочным флекс контейнером.
С помощью свойства grid для всех строчных grid-контейнеров мы указываем значение auto, которое определяет, что размер строк определяется размером контейнера и размером содержимого элементов в строке. Через косую черту с помощью функциональной нотации repeat() мы размещаем в макете сетки по четыре столбца в каждом контейнера, используя допустимое значение длины в «гибких» единицах измерения fr. В этом случае каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту.
С помощью свойства align-items