Press shift question mark to access a list of keyboard shortcuts
Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Как элементы занимают место на странице, определяется их display .
Раньше в CSS было два широких типа отображения: элементы были inline или на block-level .
Блок против встроенного
Элементы блока начинаются с новой строки и заполняют ширину их родительского контейнера. Мы видели это в «Эпизоде 1: auto », когда смотрели на размеры auto .
inline элементы остаются в строке и занимают только ширину их содержимого.
HTML5
В HTML5 элементы классифицируются по-разному, самые широкие категории — «потоковый контент» и «фразовый контент». Существуют и другие категории для встраиваемого контента, интерактивного контента и контента, связанного с формой, но между этими разными категориями существует много перекрестных связей.
Вот список элементов содержимого потока. Такие элементы, как <div> , <article> , <section> и <form> являются блочными элементами, которые часто содержат множество других дочерних элементов. Но этот список также содержит <a> , <em> , <span> и <input> которые являются inline элементами — часто встречаются в бегущем тексте, где было бы нежелательно начинать их с новой строки.
Список фразовых элементов контента не содержит много блочных элементов из потокового контента, но он включает в себя такие вещи, как <em> , <span> и <input> которые также были в предыдущем списке.
Оказывается, что нет четкого сопоставления block с потоком контента и inline во фразировку контента, поэтому мы лучше посмотрим в другом месте.
Во-первых, стоит отметить, что в HTML все элементы являются inline по умолчанию, и их характеристики отображения в значительной степени определяются таблицей стилей пользовательского агента или задаются нами при написании CSS.
Если мы посмотрим на таблицу стилей пользовательского агента Chrome, то обнаружим следующий список элементов, у которых свойство display установлено в block . Здесь также есть несколько старых версий для обратной совместимости.
Итак, если в Chrome 44 блока и все элементы HTML по умолчанию встроены, остальные должны быть inline , верно?
Ну, не совсем так, поскольку для display больше значений, чем просто inline и block .
У нас есть display:none для сокрытия вещей. Также есть inline-block , table , inline-table , table-cell table-column table-column-group table-column table-column-group table-footer-group table-header-row table-row table-row-group table-row table-row-group , list-item , run-in и новые режимы макета, такие как flex , inline-flex , grid и inline-grid . Все это займет слишком много времени, поэтому давайте выберем наиболее часто используемые.
блок
<div> — это общее окно, которое по умолчанию имеет display:block . Поле — это полная ширина страницы и настолько высокая, насколько необходимо, чтобы вместить весь ее контент. Блоки могут быть разнесены с margin .
В соответствии
Напротив, <span> который является display:inline по умолчанию, занимает только ширину своего содержимого и не реагирует на такие свойства, как width , height и margin . Мы можем установить свойство display этого <span> для block и тогда все остальные свойства будут применяться.
span { display: block; width: 50%; margin: 1em auto; }
Встроенный блок-
Распространено желание одновременно получать преимущества как от block и от inline систем. К счастью, display:inline-block нас охватил.
.box { display: inline-block; width: 10%; margin-right: 1em; }
Встроенный список
inline блок — отличный способ превратить неупорядоченный список ссылок в горизонтальную навигацию. Мы также можем применить интервалы с отступами и добавить цвет фона для каждого из них, если захотим. Одна вещь, которую вы заметите, это то, что, хотя на предметах нет полей, между ними есть небольшое пространство. Это пространство можно удалить, установив нулевой font-size или удалив пробелы между тегами в разметке. Альтернативой является использование комментария HTML, чтобы закрыть пробел до и после каждого элемента.
Если этот процесс кажется немного неуклюжим, есть альтернативный подход с использованием float который мы рассмотрим в «Эпизоде 6» .
Стол и Стол-ячейка
Использование таблиц раньше было способом, которым была построена сеть. К счастью, это уже не так. Но иногда способ размещения элементов таблицы полезен. Вместо использования элемента таблицы мы можем использовать элемент <div> с display:table и дочерние элементы с display:table-cell .
Одно из преимуществ этого макета заключается в том, что ячейки таблицы имеют одинаковую высоту, чего в противном случае трудно достичь.
И элементы inline-block и table-cells реагируют на вертикальное выравнивание, и мы углубимся в это в «Эпизоде 22» .
Бонус Быстрый совет
Не все вещи равны, когда мы не хотим display контент.
display: none это не то же самое, что visibility: hidden
-
display: noneне выделяет места на странице; элемент удаляется из нормального потока, а пространство, которое он занимал, удаляется. -
visibility: hiddenвсе еще занимает свое первоначальное место на странице; предмет просто не виден. Это очень похоже на настройкуopacity: 0.
Например, смотрите код CSS ниже:
.display-test { display: none; } .vis-test { visibility: hidden; }
Сопровождение следующего HTML:
<div> <p>Lorem ipsum dolor sit amet ...</p> <p class="display-test">Ut enim ad minim veniam ...</p> <p>Lorem ipsum dolor sit amet, consectetur ...</p> </div> <div> <p>Lorem ipsum dolor sit amet ...</p> <p class="vis-test">Ut enim ad minim veniam ...</p> <p>Lorem ipsum dolor sit amet, consectetur ...</p> </div>
Текст .display-test будет иметь результат, отличный от .vis-test , как вы увидите в следующем CodePen:
Обратите внимание, что во втором поле есть пробел, где абзац был скрыт. В первом поле, которое использует display: none нет выделенного пространства display: none .