Насколько хорошо вы знаете свойство css display?
Содержание:
- Краткая информация
- More Examples
- Строчные (линейные) элементы
- Резюме:
- Как проверить (узнать) Тиц и Пр сайта
- Значения свойства
- Контексты форматирования в CSS
- Сервис CatLair
- display: run-in
- Не inline и не block
- Display list-item — создание списков на основе блочных тегов
- CSS Advanced
- Display:contents. Примеры использования
- Использование inline-block элементов для создания кнопок
Краткая информация
| CSS (ЦСС) | CSS (ЦСС)2 |
|---|---|
| Значение по умолчанию | inline |
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Аналог ШТМЛ | Нет |
| Ссылка на спецификацию |
Синтаксис
display: block | inline | inline-table | list-item | none
| run-in | table | table-caption | table-cell | table-column-group | table-footer-group
| table-header-group | table-row | table-row-group
Аргументы
Список возможных значений этого атрибута, понимаемый разными браузерами очень
короткий — block, inline,
list-item и none.
Все остальные допустимые аргументы поддерживаются браузерами выборочно. В табл. 1
приведены некоторые популярные браузеры и их поддержка различных свойств.
| Аргумент | Описание | ИЕ6 | IE7 | IE8 | Op 8 | Op 9.2 | Ff 1.5 | Ff 2 | Ff 3 |
|---|---|---|---|---|---|---|---|---|---|
| block | Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. |
Да | Да | Да | Да | Да | Да | Да | Да |
| inline | Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. |
Да | Да | Да | Да | Да | Да | Да | Да |
| inline-block | Это значение генерирует блочный элемент, который обтекается другими элементами web-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. |
Да | Да | Да | Да | Да | Нет | Нет | Да |
| inline-table | Определяет, что элемент является таблицей как при использовании тега <TABLE>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, контентом. |
Нет | Нет | ? | Да | Да | Нет | Нет | Да |
| list-item | Элемент выводится как блочный и добавляется маркер списка. | Да | Да | Да | Да | Да | Да | Да | Да |
| none | Временно удаляет элемент из объекта. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента. |
Да | Да | Да | Да | Да | Да | Да | Да |
| run-in | Устанавливает элемент как блочный или встроенный в зависимости от конконтента. |
Нет | Нет | Да | Да | Да | Нет | Нет | Нет |
| table | Определяет, что элемент является блочной таблицей подобно использованию тега <TABLE>. |
Нет | Нет | ? | Да | Да | Да | Да | Да |
| table-caption | Задает заголовок таблицы подобно применению тега <CAPTION>. | Нет | Нет | ? | Да | Да | Да | Да | Да |
| table-cell | Указывает, что элемент представляет собой ячейку таблицы (тег <TD> или <TH>). |
Нет | Нет | ? | Да | Да | Да | Да | Да |
| table-column | Назначает элемент колонкой таблицы, словно был добавлен тег <COL>. |
Нет | Нет | ? | Нет | Да | Да | Да | Да |
| table-column-group | Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <COLGROUP>. |
Нет | Нет | ? | Нет | Да | Да | Да | Да |
| table-footer-group | Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <TFOOT>. |
Нет | Нет | ? | Да | Да | Да | Да | Да |
| table-header-group | Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <THEAD>. |
Нет | Нет | ? | Да | Да | Да | Да | Да |
| table-row | Элемент отображается как строка таблицы (тег <TR>). | Нет | Нет | ? | Да | Да | Да | Да | Да |
| table-row-group | Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <TBODY>. |
Нет | Нет | ? | Да | Да | Да | Да | Да |
Пример
ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
Результат данного примера показан ни рис. 1.
Рис. 1. Применение параметра display
Браузеры
Internet Эксплорер до версии 7 включительно:
- поддержка значений table-footer-group и table-header-group происходит только для тегов <THEAD> и <TFOOT>;
- для элементов <LI> понимает значение block как list-item;
- значение inline-block применяется только для встроенных элементов.
Опера 9.2 и старше, а также Файер фох версии 2.0 и младше:
- значение table-column применяется только для тега <COL>;
- значение table-column-group поддерживается только для тега <COLGROUP>.
More Examples
Example
A demonstration of how to use the contents property value. In the following
example the .a container will disappear, and making the child elements (.b)
children of the element the next level up in the DOM:
.a { display: contents; border:
2px solid red; background-color: #ccc; padding: 10px; width: 200px;}.b { border: 2px solid blue;
background-color: lightblue; padding: 10px;}
Example
A demonstration of how to use the inherit property value:
body { display: inline;}p { display: inherit;}
Example
Set the direction of some flexible items inside a <div> element in reverse
order:
div { display: flex; flex-direction: row-reverse;}
Строчные (линейные) элементы
Мы с Вами разобрали, что все браузеры обрабатывают элементы на веб-странице подобно блочному элементу, на самом деле не все так однозначно.
В CSS существует два типа элементов:
- блочные
- строчные / линейные (inline)
Важной особенностью блочных элементов является то, что они создают разрыв строки перед тегом и после него. Например, под эти критерии подходят такие элементы как таблицы (HTML тег
- и
- ), элементы списков (HTML тег
- ), абзацы (HTML тег
) и так далее
Что касается строчных (inline) элементов, то они не создают разрывов строк перед элементами и после них, а отображаются в одной строке с содержимым. Например, вы форматируете слово из предложения элементом <b> (определяет жирное начертание текста), то это слово по-прежнему будет располагаться на одной строке с текстом, который, заключен в блочный элемент <p> (абзац).
Но как вы понимаете, у этих типов элементов существуют и другие отличия. К обоим элементам можно применять цветовые и фоновые параметры, шрифты и границы, а вот внешние и внутренние отступы строчных элементов браузеры обрабатывают уже по-другому.
Давайте рассмотрим пример:
<!DOCTYPE html>
<html>
<head>
<title>Пример указания внешних и внутренних отступов для строчных элементов</title>
<style>
b {
margin: 50px; /* устанавливаем внешние отступы для всех сторон 50px */
padding: 50px; /* устанавливаем внутренние отступы для всех сторон 50px */
}
</style>
</head>
<body>
<p class = "primer1">Хорошо <b>живёт</b> на свете Винни Пух.</p>
<p>От того поёт он эти песни вслух.</p>
</body>
</html>
Мы добавили внутренние и внешние отступы со всех сторон по 50px, установили границу и задний фон к строчному элементу. Что мы видим в результате:
- Через установку верхнего или нижнего отступа увеличить высоту строчного элемента не получится.
- Браузер добавляет отступы только с левой и правой сторон элемента.
- Задний фон и граница элемента наслаивается на соседний элемент (см. 1 пункт).
Результат нашего примера:
Рис. 80 Пример указания внешних и внутренних отступов для строчных элементов.
Но как говорится на каждую хитрую строку найдется свой display : inline-block:
<!DOCTYPE html>
<html>
<head>
<title>Пример указания внешних и внутренних отступов для блочно-строчных элементов</title>
<style>
b {
display: inline-block; /* устанавливаем, что элементы выстраиваются в линейку (становятся блочно-строчные) */
margin: 50px; /* устанавливаем внешние отступы для всех сторон 50px */
padding: 50px; /* устанавливаем внутренние отступы для всех сторон 50px */
background-color: khaki; /* устанавливаем цвет заднего фона */
border: 1px solid; /* устанавливаем сплошную границу размером 1 пиксель (черный цвет по умолчанию) */
}
</style>
</head>
<body>
<p>Хорошо <b>живёт</b> на свете Винни Пух.</p>
<p>От того поёт он эти песни вслух.</p>
</body>
</html>
Это свойство хоть и оставляет элемент как строчный, но он будет восприниматься браузером как блочный, что позволит нам указывать для него все те свойства, которые мы указывали для блочных элементов, включая внешние и внутренние отступы. Такие элементы иногда называют как блочно-строчные.
Результат нашего примера:
Рис. 81 Пример указания внешних и внутренних отступов для блочно-строчных элементов.
Свойство display имеет очень широкое применение, ведь благодаря ему, мы можем заставить строчные элементы вести себя как блочные, или наоборот блочные элементы сделать строчными, и даже сделать элементы резиновыми (флекс), но об этом позднее.
Чтобы установить, что элемент будет восприниматься браузером как строчный, то необходимо использовать следующее объявление:
селектор {
display: inline;
}
Для того чтобы установить, что элемент будет восприниматься браузером как блочный, то необходимо использовать следующее объявление:
селектор {
display: block;
}
Забегая вперед, хочу сказать, что вы сможете свойством display со значением none при необходимости скрывать тот или иной элемент в зависимости от разрешения, или устройства пользователя (адаптивный дизайн). Кроме того, это свойство активно применяется при работе различных скриптов.
Резюме:
Подводя итоги, хочу сказать, что в данной статье мы выяснили, что за странные отступы браузер вставляет между инлайн-элементами, а так же рассмотрели много разных решений этой проблемы, и в итоге всё таки выяснили, что они не так страшны, как кажутся на первый взгляд. Как оказалось, с этой проблемой можно бороться (причём не одним способом) и побеждать её.
Все варианты воедино:
1. Результат с margin-left (Почти рабочее решение)2. Решение с font-size (Рабочее решение)3. Результат с letter-spacing (Работающее решение)4. Результат с word-spacing (Рабочее решение)5. Вариант с намеренно прижатыми элементами (Рабочее решение)6. Решение с незакрытыми тегами (Рабочее решение)
Аналогичную статью я недавно опубликовал на хабре
Как проверить (узнать) Тиц и Пр сайта
Вопрос, как определить Тиц и Пр сайта, возникает практически у всех начинающих вебмастеров сразу после того, как они узнают, что это такое и для чего они нужны. Как правило, поначалу вас будет ждать разочарование в виде нулевого значения, или, как пишет само зеркало рунета: «Индекс цитирования ресурса меньше 10».
Вообще самый простой и надежный способ проверить Тиц — это спросить у самого Яндекса. Для этого вам нужно будет добавить в адресную строку своего браузера следующий URL:
http://search.yaca.yandex.ru/yca/cy/ch/ktonanovenkogo.ru/
Только не забудьте заменить доменное имя «ktonanovenkogo.ru» на свое. Апдейт (читайте про все типы апдейтов Яндекса) индекса цитирования происходит примерно один раз в месяц или два. Как такового точного графика не существует. Как правило, ап приходит неожиданно, когда ты его совсем не ждешь (прямо-таки, как зима для наших коммунальных служб).
Вот список онлайн сервисов, где вы сможете узнать и проверить Пр и Тиц:
Я брожу по интернету через браузер Opera и использую для него просто замечательной SEO плагин — SEObar. Он позволяет видеть показатели открываемых в браузере ресурсов, определять открыты ли обратные ссылки на странице и многое другое из области оценки успешности продвижения и раскрутки сайта.
Так же для любого браузера можно установить, так называемый, Яндекс.Бар (тут про него читайте, хотя сейчас он называется Элементы Яндекса ), который среди прочих возможностей может проверять Тиц для открытой в данный момент в браузере странницы.
Определить пузомерки можно так же и с помощью различных Seo программ, из которых я бы выделил отдельно Site-Auditor (здесь читайте про Сайт Аудитор и проверку позиций в нем).
Счетчики, информеры и кнопки с отображением Тица и ПРа вашего сайта
Ну и, конечно же, для того, чтобы посетители могли узнать накопленные вами пузомерки, можно установить на своем сайте специальный счетчик или информер. Самый очевидный способ — это «кнопка Яндекса», которая выглядит как денежная купюра с номиналом равным значению индекса цитирования вашего ресурса. Например, для моего блога такая кнопка имеет вид:
<a href="http://yandex.ru/cy?base=0&host=https://ktonanovenkogo.ru/"><img src="http://www.yandex.ru/cycounter?https://ktonanovenkogo.ru/" width="88" height="31" border="0" /></a>
Вы можете вставить этот код кнопки (счетчика) в нужное место шаблона вашего web проекта. А заключив его в теги DIV и прописав в нем атрибут CLASS с названием параметра, вы можете затем его позиционировать с помощью свойств CSS относительно соседних элементов шаблона.
Например:
<div class="tic"><a href="http://yandex.ru/cy?base=0&host=https://ktonanovenkogo.ru/"><img src="http://www.yandex.ru/cycounter?https://ktonanovenkogo.ru/" width="88" height="31" border="0" /></a></div>
а в файле CSS для вашего шаблона оформления можно вставить свойства для данного класса:
.tic {
float:right;
margin: 5px 40px 5px 0px;
}
В результате получится примерно такой код счетчика:
Поясню CSS свойства для класса :
- float:right; (здесь читайте про Float и clear в CSS) — заставляет данный блок с кнопкой прижаться к соседнему элементу дизайна, расположенному справа.
- margin: 5px 40px 5px 0px; (читайте про padding, margin и border ) — задает отступ в пикселях данного блока с кнопкой относительно соседних блоков. Отступы перечисляются в таком порядке: сверху, справа, снизу, слева
а затем скопировать получившийся код и вставить его в шаблон своего ресурса:
Значения свойства
| Значение | Описание |
|---|---|
| none | Элемент исключается из общего потока, он не отображается на экране и под него не резервируется место на странице ( все элементы ведут себя как обычно, как будто этот элемент отсутствует в исходном коде). |
| block | Элемент воспринимается браузером, как блочный (например, как <div>), т.е. имеет разрыв строки до и после элемента и занимает всю доступную ширину. Появляется возможность применения свойств для блочных элементов. |
| inline | Элемент будет отображаться, как строчный (например, как <span>), содержимое блочных элементов, к которым было применено данное значение, будет начинаться с того места, где окончился предыдущий строчный элемент. |
| inline-block | Элемент отображается, как строчный, но появляется возможность применять к нему свойства, доступные только блочным элементам (например: margin, padding). |
| list-item | Элемент становится блочным и отображается, как элемент списка (тег <li>) с маркером перед началом содержимого. |
| table | Определяет блочный элемент, который ведёт себя как <table>. |
| table-caption | Элемент ведёт себя как <caption>. |
| table-cell | Элемент ведёт себя как <td>. |
| table-column | Элемент ведёт себя как <col>. |
| table-column-group | Элемент ведёт себя как <colgroup>. |
| table-footer-group | Элемент ведёт себя как <tfoot>. |
| table-header-group | Элемент ведёт себя как <thead>. |
| table-row | Элемент ведёт себя как <tr>. |
| table-row-group | Элемент ведёт себя как <tbody>. |
| flex | Преобразует элемент в блочный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами.
Примечание: появляется возможность пользоваться следующими свойствами:
|
| inline-flex | Преобразует элемент в строчный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами. |
| inline-table | Элемент будет вести себя как <table>, но не как блочный, а как строчно-блочный. То есть значение inline-table эквивалентно следующему CSS правилу:
table { display: inline-block;}
|
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
CSS Свойство:
display:
Результат:
A span element.
mySpan.
Another span element.
CSS Код:
span#mySpan { background-color: red; display: inline; }
Кликните на любое значение свойства, чтобы увидеть результат
Контексты форматирования в CSS
Итак, какие они вообще бывают, по состоянию на середину-конец 2014 года?
Из старых:
Инлайновый
Самый простой на первый взгляд, бездонный, если копнуть чуть глубже. Самый важный, поскольку ведает представлением того, что составляет основу веба ― текста и всего того, что дает этому тексту гордую приставку «гипер-»: картинок, ссылок, элементов форм, видео и прочих медиаобъектов…
Блочный
На первый взгляд еще проще инлайнового. Тоже самый важный, т.к. ведает размещением и оформлением блоков контента. В нем же «плавают» float-ы.
Табличный
Определяет поведение табличных элементов в их иерархии ― ячейки в строках, строки в группах, заголовки таблиц где-то рядом, всё это вместе в некой обертке особого типа и т.д. Недостающие по иерархии элементы заменяются анонимными боксами-«призраками» (чуть подробнее о них здесь).
И из новых:
Флексбоксовый
О флексбоксах и их непростой судьбе мы говорили уже давно, с тех пор появилось много хороших руководств по ним (, , , ) и многие успели опробовать их прелести. Одни особенности роднят их с блоками, другие (пропорциональное растягивание) ― с таблицами, третьи (многострочность) ― с инлайн-боксами. У флексбоксового контекста есть еще одна особенность, но о ней чуть позже.
Гридовый (сеточный)
Гриды (сеточная раскладка) ― еще один CSS-модуль, предназначенный специально для создания макетов, тоже с запутанной родословной и противоречивой репутацией. На момент написания статьи был не так популярен, как флексбоксы, поскольку был готов к использованию лишь в одном браузере (на удивлен), но всё меняется. Одна особенность роднит его с предыдущим.
Контекст форматирования Ruby
Что такое «Ruby-аннотации», вы можете узнать из статьи о соотв. элементах HTML5. В CSS для них тоже есть свой модуль… и больше знать о нем пока нам, пожалуй, (шутка: знания лишними не бывают).
Еще?
Есть ли еще контексты форматирования? Беглый поиск по разделу со спецификациями их не находит. Но, судя по детективно-табличной истории, даже сами авторы спецификаций могут до поры этого не знать!:) Возможно, именно вы сможете найти в какой-нибудь из затерянных спецификаций диковинного «зверя», о котором не знали сами члены W3C, так что удачной вам «охоты»!
Всё сразу одной таблицей (для наглядности)
| КФ | Для чего нужен | «Участники» | Важные особенности | Ссылки на стандарт |
|---|---|---|---|---|
| Инлайновый | Форматирование текста и всего, что находится прямо в нем | Элементы строки (текст, картинки, кнопки, инлайн-блоки, инлайн-таблицы и т.д.) | Всё «воспринимается как текст», напр., пробелы в коде часто отображаются как символы. Сложные правила вертикального выравнивания. | CSS Text 3 |
| Блочный | Оформление блоков текста (с отступами и врезками) | Блочные боксы (в т.ч. анонимные), float-ы | «Схлопывание» margin-ов, «проваливание» float-ов через верхние и нижние границы блоков, влияние float-ов в пределах контекста друг на друга. Не-блочные элементы неявно оборачиваются в анонимные блоки. Мало средств для выравнивания/центрирования по вертикали. | |
| Табличный | Представление табличных и «таблицеподобных» данных, изредка полезен и для раскладки блоков | Ячейки, строки, группы строк (как thead/tbody/etc.) и всё такое, в т.ч. анонимные | Иерархия табличной структуры (в строке могут быть только ячейки и т.п.), для недостающих элементов иерархии создаются анонимные обертки соотв. типа. Сложные и плохо документированные алгоритмы расчета размеров | к CSS2.1CSS Tables 3 (работа идет, но еле-еле) |
| Флексовый | «Гибкая» раскладка и взаимное выравнивание блоков с контентом, в т.ч. для динамичных и адаптивных макетов и их частей | Флекс-элементы (во флекс-контейнере) | Меняет поведение непосредственных потомков элемента, задающего этот контекст. В частности, свойство float игнорируется. Создает анонимные флекс-обертки для текста, оказавшегося непосредственно в контейнере. |
CSS Flexbox 1 Для истории:Flexbox 2011Flexbox 2009 |
| Гридовый (сеточный) | Расположение блоков в соответствии с заданным «каркасом» страницы или интерфейса | Грид-элементы (в грид-контейнере) | Практически полная независимость порядка отображения элементов от порядка в коде. Элементы могут влиять друг на друга сразу по двум направлениям. Создает анонимные грид-обертки для текста, оказавшегося непосредственно в контейнере. | CSS Grid 1 |
| Ruby | Подсказки для чтения текста иероглифами | Иероглифы основного текста и ruby-подсказки к нему | Вряд ли встретится вам, если вы не будете верстать учебники китайского или японского… но кто знает! | CSS Ruby 1 |
Расписывать контексты форматирования в деталях, как вы уже знаете, можно до бесконечности. Поэтому пока поставим в них точку, добавим в закладки ссылки с подробностями, и перейдем ко второй заявленной теме.
Сервис CatLair
Данный сервис можно назвать простым и элегантным. Он позволяет находить повреждённые пиксели также с помощью картинок с различными светами. Посередине сервиса находятся изображения темных котов, находящихся на фоне с различными цветами. Выбираем понравившийся, и просматриваем.
Заходим в CatLair
Итак, начинаем изучение сервиса:
-
К примеру, выбираем синий цвет. Для этого, нужно кликнуть по коту с синим фоном. Ищем битые сектора;
-
Подобным образом, можно найти любой другой цвет. Например, разноцветные полоски.
Хотя, из этого положения можно частично выйти, если перевернуть телефон горизонтально.
display: run-in
Вот и подобрались в загадочному свойству display: run-in. Сразу отмечу, что поддерживает это свойство только Opera 5. Почему же оно находится и в разделе элементов блокового уровня, и в разделе элементов строкового уровня? А потому что метод отображения этого свойства может быть как блоковым, так и строковым, в зависимости от некоторых условий. В спецификации W3С написано следующее:
- Если блоковый элемент (который не является плавающим и не является абсолютно позиционированным) следует за run-in блоком, то run-in блок становится первым строковым блоком этого блокового элемента
- В противном случае, run-in блок становится элементом блокового уровня.
Чисто ради спортивного интереса, вот скриншот из Opera 5.
display: compact вообще пока никем не поддерживается (Opera 5 с багом небольшим, правда, поддерживает, но это сути не меняет). Так что на этом свойстве и вовсе останавливаться не будем
Итак, подведем промежуточный итог. Переходить на таблицы, описываемые свойством CSS display: table и т.д. на данный момент не представляется возможным. Впрочем, этого нам и не надо, поскольку реализовать таблицу гораздо проще с помощью HTML. Вообще говоря, таблицы в CSS делались исключительно под XML, потому что там не заранее определенных тегов, то есть форматирование полностью возлагается на язык стилей.
Наша цель уйти от табличной верстки, как таковой. C блоками мы разобрались, а потому в следующей части можно будет непосредственно перейти к визуальной модели форматирования. Продолжение следует…
Не inline и не block
Во многих учебниках и руководствах для новичков про пишут, что он «строчный и блочный одновременно». Это неправда.
— не inline-элемент (который может разрываться между строками, для которого вертикальные -и и -ы не влияют на его положение, который игнорирует и и т.д.). И не блочный элемент (который пытается заполнить всю доступную ширину контейнера, -ы которого схлопываются с -ами соседей и даже потомков, в который могут вторгаться флоаты и т.д.). У него есть отдельные черты того и другого, но…
Пожалуй, проще всего понять, что такое на самом деле, обратившись к новой спецификации CSS Display 3 уровня.
- Внешнее поведение элемента — как он взаимодействует с соседями, т.е. в каком контексте форматирования он сам находится (или, как говорит спецификация, участвует);
- Внутреннее поведение элемента — как он влияет на размещение своих потомков, т.е. какой контекст форматирования действует в нем самом.
Для каждого поведения теперь есть отдельный набор ключевых слов, так что значения свойства display по новому стандарту будут составными. А старые значения с дефисом будут псевдонимами, алиасами для некоторых из таких комбинаций (говорю «будут», потому что браузеры еще не понимают составных значений, но в стандарт это уже заложено).
Какому же составному значению будет псевдонимом наш ? Думаете, «inline block» («инлайновый снаружи, блочный внутри»)? Вот и нет! его полное значение вот какое:
Display list-item — создание списков на основе блочных тегов
А теперь давайте попробуем с помощью Дисплей сделать ряд блочных тегов элементами списка. С этим нам поможет справиться правило display:list-item. Пусть у нас изначально будут присутствовать несколько абзацев и заголовок:
<h3 style="background:#FFC0C0;"> H3</h3> <p style="background:#C0FFC0"> Первый абзац (тег P) <p> <p style="background:#C0FFC0"> Второй абзац <p> <p style="background:#C0FFC0"> Третий <p>
Которые будут выглядеть примерно так:
Теперь, если мы добавим ко всем блочным тэгам абзаца CSS правило display:list-item, то браузер сгенерирует для всех этих элементов специальную область для маркера, в которых появятся эти самые маркеры используемые по умолчанию:
<h3 style="background:#FFC0C0;"> H3</h3> <p style="background:#C0FFC0;display:list-item;"> Первый абзац (тег P) </p> <p style="background:#C0FFC0;display:list-item;"> Второй абзац </p> <p style="background:#C0FFC0;display:list-item;"> Третий </p>
Но в таком виде вы никаких изменений не заметите. Область маркера добавляется перед областью блочного тега и чтобы ее увидеть, нужно каким-либо образом отодвинуть этот блок слева от края контейнера, в котором он живет. Сделать это можно с помощью все того же Margin, а именно прописав для нужных абзацев margin-left:20px (или заключив абзацы, например, в ) и тогда получим следующую картину:
Т.о. мы создали элементы маркированного Html списка без использования тегов LI (получился аналог UL). При желании, для настройки вида используемого маркера вы сможете использовать уже рассмотренное нами ранее CSS правило list style. Можно сделать и обратное, т.е. прописать для тэгов LI свойство display:block и сделать из списка обычные абзацы.
Еще среди возможных значений Display вы можете видеть огромное количество вариантов для задания внешнего вида таблицам и ее составным частям. У каждого элемента таблицы в Html коде проставлено свое значение Дисплей:
Касаться того, что именно они делают, я не буду, ибо вряд ли вам когда-нибудь это понадобится, а тема эта весьма сложна. Кроме того, даже IE 7 не поддерживает все эти значения Дисплей для таблиц, не говоря уже и о более старых версиях этого чудо-браузера.
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
Display:contents. Примеры использования
Меню с логотипом в одном флекс-контейнере
Возможно, вы уже видели пример Джейка Арчибальда, в котором два потомка флекс-элемента благодаря для их родителя превращаются в самостоятельные флекс-элементы. Вот похожий пример, более приближенный к жизни:
See the Pen PZaxoK by Ilya Streltsyn (@SelenIT) on CodePen.
Здесь причуда дизайнера заставила нас вставить логотип между пунктами меню, и вся эта конструкция должна равномерно растягиваться с равными промежутками. Без нам пришлось бы либо запихивать логотип внутрь меню (прощай, семантика…), либо делить само меню на две части и «колдовать» с отступами. А с ним мы делаем пункты меню и логотип равноправными флекс-элементами, а дальше магия флексбоксов — включая изменение визуального порядка элементов — делает всё за нас сама!
Дерево-таблица
Часто бывает нужно представить в табличном виде иерархические данные, например, значения какого-то интегрального показателя и его разбивку по составляющим. Пример из нашей сферы — результаты разных браузеров в популярном тесте html5test.com: суммарные баллы по разделам спецификации и их «разбивка» по подразделам.
Данные явно табличные, но вот беда — табличная модель HTML практически полностью исключает иерархичность. Максимум, что мы можем — выделить главные разделы таблицы в отдельные . Дальше дробить таблицу нельзя. Поэтому на странице самого теста пришлось плодить отдельные классы для строк таблицы каждого уровня вложенности, нетривиальную логику для их скрытия-раскрытия и т.п. Надо ли говорить, что без стилей и скриптов вся информация об иерархии теряется.
Иерархические структуры в HTML можно передавать с помощью вложенных списков. Что, если так и сделать, а табличное отображение придать с помощью CSS? Увы, табличная модель CSS унаследовала от HTML-таблиц не только структуру, но и ограничения: в боксе с могут «жить» только , а в тех — . Было бы здорово, если бы можно было вкладывать, но увы — алгоритм не разрешает. Вместо пропущенных элементов табличной иерархии достраиваются недостающие анонимные боксы, и получается обычная скучная вложенная таблица, лишенная главного табличного плюса — сквозной вертикальной связи по столбцам.
Но с эта задача решается в два счета (для примера приведено только начало таблицы):
See the Pen Demo of hierarchical data table using display:contents by Ilya Streltsyn (@SelenIT) on CodePen.
Мы просто сделали вид, что промежуточных уровней иерархии… нет вообще! И все строки таблицы (элементы ) подчинены главной таблице (обертке с ) напрямую. И все вертикальные связи сохранились!
Но вложенность никуда не исчезла — мы ведь не трогали DOM, мы лишь изменили display некоторых элементов. Поэтому мы по-прежнему можем, например, визуально разграничить элементы разных уровней отступами, основываясь на этой вложенности (в примере как раз это показано). Более того, теперь скрывать/раскрывать подуровни стало элементарно — как с обычным древовидным списком. Только обычно мы меняли display с none на block и обратно, а здесь — c none на contents и обратно. Не нужно больше циклами выискивать строки для скрытия по классам и т.п.! Удобно же, правда?
Решение проблемы подсеток в грид-раскладке
Отвязка визуальной структуры от DOM-структуры позволяет решить и ту проблему, на которую недавно сетовал Эрик Мейер в статье о грид-раскладке (мы как раз ее переводили): невозможность привязать элементы к гриду, создаваемому родителем их родителей. С это элементарно: как и в предыдущих примерах, с точки зрения визуальной структуры мы делаем так, что «дети» элемента не отображаются вообще, а его «внуки» отображаются так, как будто они «дети» — благодаря чему они автоматом подхватывают «магию» грид-раскладки, созданную внешним контейнером. В Firefox (либо Chrome c включенным флагом «Экспериментальные функции веб-платформы») можно увидеть это в действии.
Обратите внимание, что кода получается даже меньше, чем в решении Эрика с подсетками. Хак ли это? На мой взгляд — не больший, чем любая другая смена display на «неродное» значение
У многих задач бывает несколько правильных решений, и это — вполне стандартное применение стандартных средств языка. И уж точно не стоит откладывать выпуск практически готовой реализации грид-раскладки ради непременной реализации подсеток, когда есть такой изящный и наглядный обходной путь. В споре Эрика и Таба Аткинса лично я поддерживаю Таба. А вы что думаете?
Использование inline-block элементов для создания кнопок
Сделаем еще один небольшой сравнительный анализ. В примере ниже представлены ссылки, внешний вид которых с помощью css-стилей отображает их как кнопки. Но 2 из них имеют , одна — (по умолчанию заданный в спецификации для ссылки) и еще одна — . Над каждой кнопкой подписано, каким образом она была отформатирована.
При клике на каждую из ссылок-кнопок текст, написанный на ней будет увеличен. В результате и сама кнопки либо увеличится, либо останется неизменной.
Что касается кнопок с и , у которых размер был сформирован padding-ами, то при добавлении текста они просто расширяются. Оранжевая кнопка Sale, у которой размер имеет фиксированную ширину и высоту, увеличивается за счет добавленного текста вниз, хотя ни фон, ни рамка на этот текст не распространяются. Кнопка-ссылка с изначально занимает всю ширину родительского элемента, поэтому добавление текста не влияет на ее размер на больших экранах. А вот на маленьких в ней текст за счет фиксированной высоты тоже выходит за пределы фона вниз. Еще можно заметить, что для желтой кнопки с несколько иначе определяются отступы от заголовка сверху — она расположена чуть выше всех остальных кнопок, хотя margin ни для одной из них в свойствах задан не был. Форматирование кнопок определялось такими свойствами:
.readmore,
.sale,
.sale-block,
.inline {
color: #000;
text-decoration: none;
border-radius: 7px;
border: 3px solid;
}
.readmore {
display: inline-block;
padding: 10px 17px;
background-color: #6efc68;
border-color: #37ac32;
}
.inline {
background-color: #ffff37;
border-color: #ffc937;
padding: 10px 17px;
}
.sale,
.sale-block {
height: 35px;
line-height: 35px;
text-align: center;
}
.sale {
display: inline-block;
width: 135px;
background-color: #f7692a;
border-color: #c13c01;
}
.sale-block {
display: block;
background-color: #3ad9ff;
border-color: #0a6d84;
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.readmore, .sale, .sale-block, .inline{ color#000; text-decorationnone; border-radius7px; border3pxsolid; } .readmore{ displayinline-block; padding10px17px; background-color#6efc68; border-color#37ac32; } .inline{ background-color#ffff37; border-color#ffc937; padding10px17px; } .sale, .sale-block{ height35px; line-height35px; text-aligncenter; } .sale{ displayinline-block; width135px; background-color#f7692a; border-color#c13c01; } .sale-block{ displayblock; background-color#3ad9ff; border-color#0a6d84; } |
