Display block что это

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Настала очередь поговорить о таком важном правиле CSS как display. Основной упор сделаем на наиболее часто используемых параметрах этого свойства — block, inline и none. Естественно, все это будет рассмотрено на живых примерах, куда же без этого.

Данное средство каскадных таблиц стилей дает возможность без вмешательства в HTML код задавать тип отображения элементов на странице. Я уже писал о том, что наиболее популярные HTML теги подразделяются на блочные и строчные. Однако, на самом деле типов, определяющих вид того или иного элемента на странице, гораздо больше.

Мы разберем на конкретных практических примерах превращение строчных вебэлементов в блочные и в обратном порядке, а также посмотрим, как можно реализовать динамический эффект посредством чистого CSS с помощью display none без использования скриптов.

«>

Кроме этого, попробуем создать списки на основе блочных вэбэлементов, используя list-item. Все эти изыскания имеют вполне конкретную и реальную сферу применения, поэтому такой практикум трудно переоценить. В общем, приступаем.

Как превратить блочный тег в строчный и наоборот с помощью display inline и block

Для придания гибкости при верстке как раз с помощью свойства display, которое имеет достаточно много значений (кроме указанных в начале) можно менять характеристики тех или иных вебэлементов.

Для каждого тега, соответствующего конкретному элементу, даны начальные значения по умолчанию. Подробная информация по этому вопросу предоставлена на специальной странице валидатора W3C (Default style sheet for HTML 4). Скажем, здесь целый список HTML тегов, которым соответствует значение block:

«>

Кстати, если display вообще не указан, то для конкретного тега будет применено именно дефолтное значение. В этом случае при необходимости изменить вид HTML вебэлемента следует просто прописать ему нужный параметр display. Это еще раз подтверждает тесную связь между языком гипертекстовой разметки и каскадными таблицами стилей.

Если мы посмотрим на перечень всех значений для свойства дисплей в таблице валидатора W3C, то обнаружим следующее:

«>

Здесь перечислены все возможные параметры для дисплей. В том случае, если не указано конкретное значение, по умолчанию будет действовать display inline, что соответствует тегу строки. Потому на странице спецификации «Defolt style sheet for HTML 4» теги, которые по умолчанию являются строчными, вообще отсутствуют в списке.

Как вы помните, в общем случае CSS правила дают команду браузеру, как отображать тот или иной вебэлемент. Скажем, для блочных и строчных это выглядит так: display:block и display:inline соответственно.

Однако, присвоенные (в том числе дефолтные) значения свойства дисплей не являются непререкаемой догмой и могут быть изменены. Сейчас и посмотрим, каким образом можно преобразовать блочные в строчные элементы, и наоборот.

Возьмем для примера часто встречающиеся при создании вебсайтов теги, для удобства придав каждому цветовой оттенок фона с помощью CSS свойства background:

<H2 style="background:#E8987A;">Заголовок</H2>  <p style="background:#AD814F;">Текст</p>  <span style="background:#60D4AE;">Тег span</span>

В итоге данные вэбэлементы отобразятся в браузере в полном соответствии со своими умолчательными параметрами CSS правила дисплей. Вся эта композиция на вебстранице будет иметь такой вид (здесь можете посмотреть в живую):

«>

Заголовок H2 и тег P являются блочными (block), поэтому занимают по ширине всю доступную область. Один из важнейших структурных вебэлементов SPAN — строчный (inline), по этой причине его ширина ограничивается содержанием. Далее пропишем для P правило инлайн:

<p style="display:inline;background:#AD814F;">Текст</p>

Теперь в нашем примере произойдут вот такие превращения:

«>

Эти изменения вы можете проследить в отдельной вкладке. Как видим, текстовый элемент превратился в строчный и его ширина теперь определяется входящим контентом («Текст»). SPAN занял место в строке рядом с ним, поскольку пространство позволяет.

Абсолютно также можно провести обратную операцию и строчный вебэлемент сделать блочным. Применим теперь параметр блок к SPAN:

<span style="display:block;background:#60D4AE;">Тег span</span>

После такого редактирования картина будет таковой:

«>

Теперь элемент SPAN стал блочным. Это доказывает и его вид, поскольку он стал занимать все возможное пространство по ширине. И снова можете убедиться в корректности всех этих изысканий.

Display list-item — делаем списки из блочных элементов

Дальше поэкспериментируем немного в области создания HTML списков, которые, как известно, составляются с помощью тегов UL, OL, LI. Мы же обойдемся без них, применим для выполнения этой задачи лишь правило display:list-item.

Для этого возьмем заголовок из предыдущего примера, а также несколько простых абзацев. Но так все-таки не остается видимой области для маркеров. Чтобы решить задачу в полном объеме, требуется задать отступы слева для всех пунктов списка с помощью свойства margin-left, указав ему конкретное значение (например, 25 пикселов):

<h2 style="background:#E8987A;">Заголовок</h2>  <p style="background:#AD814F;display:list-item;margin-left:25px;">Текст 1<p>  <p style="background:#AD814F;display:list-item;margin-left:25px;">Текст 2<p>  <p style="background:#AD814F;display:list-item;margin-left:25px;">Текст 3<p>

Результирующий вид окажется таким:

«>

Таким образом маркированный список готов. При необходимости вид самих маркеров можно настроить как угодно, применив правило CSS list-style. Вполне возможно произвести и обратное действие. То есть при наличии созданного на основе тех же UL и LI списка обратить его в стандартные абзацы, указав block для каждого элемента LI.

Как я отметил выше, у свойства CSS дисплей существует еще немало параметров, посредством которых можно, например, оформлять таблицы. Каждому вебэлементу HTML таблицы соответствует определенный параметр display:

«>

Но подробно расписывать данный аспект я не намерен, поскольку эта тема требует отдельной публикации, да и применяются данные значения весьма редко, не говоря уже о том, что даже популярные браузеры воспринимают табличные CSS правила по-разному, особенно это касается старых версий Интернет Эксплорера. Так что ограничусь пока общей информацией.

goldbusinessnet.com

Определение свойства

Само свойство является многоцелевым и определяет тип отображения элемента в документе. В зависимости от выбранного значения определенный участок страницы может отображаться блочно, линейно, как пункты списка, как часть таблицы и т. д. Таким образом, благодаря свойству «display», можно изменять тип самого блока в документе.

Что касается связки «свойство-значение display: none», то она позволяет удалить элемент или блок из документа. При этом место под данный кусок страницы не резервируется, то есть он выпадает из потока. Все элементы, которые находятся за «удаленным», попросту не видят его и игнорируют размеры и положение такого блока. Для возвращения скрытого объекта необходимо обратиться к документу через скрипты, которые просто изменят значение свойства на необходимый формат. При этом произойдет автоматическое форматирование страницы с учетом нового объекта на ней.

Разница между свойствами «display» и «visibility»

Несмотря на то что в итоге оба свойства скрывают элемент от пользователя, их принцип действия значительно отличается. Как уже было сказано выше, параметр «display: none» полностью удаляет элемент из документа. Блок выпадает из страницы, тем самым не занимая в ней место. При этом сам объект по прежнему остается в HTML-коде.

В свою очередь, свойство «visibility: hidden» прячет элемент от пользователя, но не удаляет его из модели документа. Таким образом, на странице остается зарезервированное место под данный блок. То есть поток документа будет воспринимать и учитывать расположение и размеры элемента со свойством «visibility: hidden» ровно так же, как и без него.

Такая разница организации структуры документа этими двумя свойствами позволяет добиться необходимого результата для правильного отображения страницы.

Использование CSS — display: none

Интернет-документ позволяет использовать несколько вариантов для определения свойства элемента. В первую очередь display: none может быть прописан в отдельном файле каскадных таблиц стилей. Такой способ является наиболее продвинутым и правильным, так как позволяет вынести все селекторы, классы и их свойства в отдельный документ. Подобная модель дает возможность очень быстро находить и изменять параметры страницы.

В заголовке документа

Вторым вариантом является определение стилей в заглавной части документа между тегами style. Эффективность такого способа гораздо меньше. Его рекомендуется применять только лишь в крайних случаях, так как при наличии большого числа стилей читаемость страницы веб-дизайнером значительно ухудшается. А это приводит к возникновению ошибок и замедлению процесса разработки интернет-документа. Такой подход рекомендуется использовать только в случае добавления в этот тег малого числа стилей или для отладки документа.

Следует помнить, что если такой способ организации стилей расположен в документе ниже, чем импорт отдельной таблицы стилей, то пересекающиеся свойства будут переписаны теми, что находятся в теле документа html.

Блок div. Display: none

Еще одним способом является добавление непосредственно в тег элемента кода «style=display: none;». Подобный подход зачастую применяют при работе с различными фреймворками, цель которых — снижение числа свойств непосредственно в таблице стилей и отображение их в самом интернет-документе. Кроме того, подобная запись часто возникает при просмотре страницы «инспектором кода». Важно помнить, что используя этот подход, можно изменить свойство и его значение, прописанные в таблице стилей. Поэтому стоит быть осторожным, так как в итоге можно создать себе дополнительные проблемы и потратить некоторое время на поиск и устранение ошибки в коде страницы.

JavaScript

Стоит также упомянуть и о дополнительной возможности изменения этого свойства.

о относится уже не к таблице стилей и html-коду, а к скриптовому языку. Поэтому для его применения необходимо иметь хоть какие-то знания в этой области. Для того чтобы убрать элемент из потока документа, можно использовать свойство JavaScript «display=none». Оно позволяет изменить структуру документа при наступлении определенного события. Также благодаря использованию скриптов можно динамически («на лету») изменить параметр свойства и тем самым обновить вид страницы без необходимости ее перезагрузки. Такой подход является полезным при организации выпадающих меню, модальных окон и форм.

SEO

В области оптимизации веб-контента под поисковые машины существует много суеверий и неясных моментов. Так, многие начинающие СЕОшники считают использование свойства «display» плохой манерой. Объясняют они это тем, что поисковики, видя скрытый контент, начинают считать страницу спамом. В их словах есть доля логики, но не более того. На данный момент времени свойство скрытия объекта используется достаточно часто для форматирования выпадающих меню и скрытия частей документа, которые в данный момент не интересны пользователю (например, при выборе одной категории информация о других удаляется). Такой подход используют достаточно мощные интернет-порталы (один из них — «Амазон»). Таким образом, поисковые роботы не могут считать использование свойства «display: none» спамом.

Другое дело, когда такой подход используется для скрытия отдельных слов и символов. Несмотря на то что сейчас поисковые роботы еще не имеют совершенных алгоритмов распознания подобного «спама» в документах, вероятность того, что страница будет поймана на этом, достаточно высока. Поэтому рекомендуется использовать свойство «display» строго по назначению — для изменения типа блока или его временного скрытия от глаз пользователя.

fb.ru

Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».

Inline-block, заманчивое значение для свойства display, которое обещает очень много, а выполняет совсем мало. Очень часто я получал PSD-файлы, подобные этому:

и плакал.

Обычно такой способ отображения не вызывает проблем. Фиксированная ширина, фиксированная высота, float: left и готово. Если бы не одно, но! Дизайн должен отображаться корректно при любом количестве содержимого. В нашем случае, если в одном из блоков окажется чуть больше данных, то он «сломает» всю сетку.

Так как первый элемент выше следующих, пятый становится не под ним, как нам того хотелось бы, а «обтекает» по правому краю. В общем, нам необходима эластичность таблицы, но в правильной, семантичной верстке.

Начнем с простого примера, где у пунктов списка для свойства display установлено значение inline-block:

<ul>  <li>  <h4>This is awesome</h4>  <img src="1450821541436477177797"  alt="lobster" width="75" height="75"/>  </li> ... <ul>  <style>  li {  width: 200px;  min-height: 250px;  border: 1px solid #000;  display: inline-block;  margin: 5px;  } </style>

Результат выглядит корректно в Firefox 3, Safari 3 и в Opera:

Кажется, будто что-то не так с вертикальным выравниванием. Говоря по правде, никаких ошибок нет, это как раз корректное поведение браузера, но совсем не тот результат, которого мы бы хотели.

А происходит здесь следующее, базовая линия (baseline) каждого элемента <li> выравнивается с базовой линией родительского элемента <ul>. Вы спросите, что такое базовая линия? Лучше один раз увидеть, чем сто раз услышать:

Базовая линия на рисунке выше обозначена линией, идущей через основание символов. Значением по-умолчанию для свойства vertical-align у inline и inline-block элементов является baseline. Это значит, что базовая линия элементов выравнивается с базовой линией родителя. На рисунке ниже представлен пример такого выравнивания:

Как видите, каждая базовая линия блоков на рисунке выше выравнена по базовой линии текста «This is the baseline», который не является элементом <li>. Это просто текстовый узел, находящийся непосредственно в <ul>, помещенный туда в качестве индикатора расположения базовой линии элемента <ul>.

Получить желаемый изначально вариант выравнивания довольно просто, достаточно для свойства vertical-align указать значение top и получить в результате отличную сетку:

Вот только это не работает в Firefox 2, IE 6 и 7:

Для начала займемся Firefox 2.

Firefox 2 не поддерживает значение inline-block, зато отлично понимает специфичное для Мозиллы значение -moz-inline-stack для свойства display. Оно приводит к результатам, подобным действию inline-block. Когда мы добавляем его перед display: inline-block, то Firefox 2 игнорирует вышеуказанное, так как не понимает его, и использует -moz-inline-stack. Другие браузеры используют inline-block, игнорируя непонятное для них -moz-inline-stack.

<style>  li {  width: 200px;  min-height: 250px;  border: 1px solid #000;  display: -moz-inline-stack;  display: inline-block;  vertical-align: top;  margin: 5px;  } </style>

К сожалению, это вызывает небольшой баг:

Честно, я не знаю, что является его причиной. К счастью, лечится он довольно просто обертыванием всего содержимого элемента <li> дополнительным <div>.

<li>  <div>  <h4>This is awesome</h4>  <img src="1450821541436477177797"  alt="lobster" width="75" height="75"/>  </div> </li>

Теперь перейдем к IE 7. Он тоже не поддерживает inline-block, но мы можем использовать трюк, благодаря которому элементы <li> будут выводиться на экран так, будто используют значение inline-block. Как? Будем использовать hasLayout, волшебное свойство IE, делающее доступными многие манипуляции. Вы не можете явно указать для элемента hasLayout: true или сделать это каким-либо подобным простым образом, однако можете запустить механизм, указав zoom: 1.

Технически элементы с hasLayout, установленным в значение true сами отвечают за рендеринг самих себя и дочерних элементов. Объедините это с min-height и width, и получите результат, очень близкий к display: block. Это как магический порошок, заставляющий исчезать все появляющиеся при отображении проблемы.

Когда мы добавим zoom: 1 и *display: inline (звездочка является хаком для IE 6 и IE 7) для элементов <li>, то научим IE 7 отображать их совсем как inline-block:

<style>  li {  width: 200px;  min-height: 250px;  border: 1px solid #000;  display: -moz-inline-stack;  display: inline-block;  vertical-align: top;  margin: 5px;  zoom: 1;  *display: inline;  } </style>

Почти готово. Остался лишь IE 6:

IE 6 не поддерживает min-height, но взамен мы можем использовать его неверное обращение к свойству height. Установим для _height (обратите внимание на подчеркивание спереди) значение в 250px и получим все элементы <li> с нужной высотой. Если же содержимое превысит указанную величину, то просто растянет свой контейнер. Все остальные браузеры проигнорируют _height.

Финальный CSS и HTML выглядит так:

<style>  li {  width: 200px;  min-height: 250px;  border: 1px solid #000;  display: -moz-inline-stack;  display: inline-block;  vertical-align: top;  margin: 5px;  zoom: 1;  *display: inline;  _height: 250px;  } </style>  <li>  <div>  <h4>This is awesome</h4>  <img src="1450821541436477177797"  alt="lobster" width="75" height="75"/>  </div> </li>

habr.com

display: block;

По умолчанию присвоен p, div, form, ul, h1 и т.д.

1. на строку, на которой расположился блок, уже нельзя добавить другой элемент, даже когда остаётся пустое пространство. Искл., при применении свойств position, float, transform.
   

   <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; text-align: center; } </style>  <div class="temnyi">  <div class="svetlyi">А</div> </div>

2. если не задано значение width, элемент растягивается на весь родительский контейнер.
3. если задано значение width, ширина складывается из margin, border, padding, width (подробнее). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.
4. если не задано значение height, элемент растягивается на высоту, необходимую содержимому блоку, иначе высота складывается из margin, border, padding, height.
5. при превышении указанной высоты/ширины содержимое отображается поверх блока, коли не указано иное с помощью свойства overflow. В нашем случае красная рамка видна над голубой родительского блока.
6. не действуют такие свойства, как vertical-align.
7. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.

      Пример использования

display: inline;

По умолчанию присвоен a, span, b, em и т.д.

1. элементы следуют друг за другом.
   

   <div class="temnyi">  <span class="svetlyi">А</span> </div>

2. width и height игнорируются. Его ширина — это ширина содержимого плюс margin, border и padding.
3. margin-top и margin-bottom игнорируются.
4. совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут «наезжать» друг на друга.
   

   <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { padding: 10px; background-color: rgba( 255, 255, 255, 0.7); } </style>

5. не может иметь text-align. Но при этом поддаётся его воздействию, если данное свойство задано родителю-блоку.

      Пример использования

display: inline-block;

По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.

1. элементы следуют друг за другом.
2. имеет width и height, margin-top и margin-bottom.
3. если не задано значение width (max-width), растягивается по ширине самого длинного элемента внутри. Удобно при использовании модального окна, где нужно уйти от фиксированных размеров, поскольку картинки могут быть совершенно разными.

   <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; text-align: center; font-size: 150%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; display: inline-block; padding: 10px; } </style>  <div class="temnyi">  <div class="svetlyi">  <img src="URL-изо"/>  название изо  </div> </div>

4. на него можно воздействовать посредством text-align и vertical-align.
   

   <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; } .temnyi div { background-color: #fff; width: 20%; margin: 5px; display: inline-block; vertical-align: top; } .temnyi div:nth-child(2) { width: 10%; } .temnyi div:nth-child(3) { width: 30%; } .temnyi div:nth-child(4) { width: 20%; } .temnyi div:nth-child(5) { width: 30%; } .temnyi div:nth-child(6) { width: 40%; } </style>  <div class="temnyi">  <div> 111 </div>  <div> 2 </div>  <div> 33 </div>  <div> 4 </div>  <div> 55 </div>  <div> 6 </div> </div>

   Для сравнения тот же пример, но с float. Здесь нет разделения на две строки, блок 5 стоит под блоком 4.

      Пример использования

display: list-item;

По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство list-style. В примере выше маркер отсутствует, поскольку у li display отличный от list-item.

display: run-in;

Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.

<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; text-align: center; display: run-in; } </style>   <div class="svetlyi">А</div>  <div class="temnyi">какой-то текст</div>

display: table;

По умолчанию присвоен table.

1. на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из margin, border, padding, width. При превышении указанной высоты/ширины содержимое отображается поверх блока.
3. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.
4. не действуют такие свойства, как vertical-align.
5. применимы свойства border-collapse и border-spacing.

display: inline-table;

Аналогичен display: inline-block.

1. применимы свойства border-collapse и border-spacing.

display: table-row;

По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.

1. на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
2. элемент растягивается по длине содержимого.
3. width, border, padding, margin, vertical-align игнорируются.
4. можно изменить значение height.
5. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.

display: table-cell;

По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.

1. элементы следуют друг за другом.
2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из border, padding, width. Но не более ширины контейнера и пропорционально всем длинам ячеек. Поэтому я советую, не задавать width для ячеек нижних строчек.
3. высота всех ячеек в строке одинакова и составляет высоту самой высокой ячейки. Удобно при построении двух- и т.д. колоночных макетов, где требуются колонки одинаковой высоты.
4. margin игнорируется. Это свойство заменяется border-spacing у родителя.
5. на его содержимое можно воздействовать посредством text-align и vertical-align.

<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; display: table; border-collapse: separate; border-spacing: 10px 7px; } .temnyi > div { display: table-row; } .temnyi > div > div { background-color: #fff; width: 20%; vertical-align: middle; display: table-cell; text-align: center; } .temnyi > div > div:nth-child(2) { width: 10%; } .temnyi > div > div:nth-child(3) { width: 30%; } .temnyi > div > div:nth-child(4) { width: 20%; } </style>  <div class="temnyi">  <div>  <div> 111 </div>  <div> 2 </div>  <div> 33 </div>  <div> 4 </div>  </div>  <div>  <div> 55 </div>  <div> 6 </div>  </div> </div>

      Пример использования

display: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)

По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.

display: none;

Элемент становится невидимым, не сохраняя занимаемое место.

      Пример использования

shpargalkablog.ru

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

Значение block

• Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float).
• Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: <div>, заголовок <h1>, параграф <p>.

Блоки прилегают друг к другу вплотную, если у них нет margin.

Значение inline

• Элементы располагаются на той же строке, последовательно.
• Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: <span>, <a>.

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними <span> и <a> есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке (inline), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

• Располагается в строке.
• Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

• Элемент всегда прямоугольный.
• Работают свойства width/height.

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Например:

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display.

Для таблицы целиком table, для строки – table-row, для ячейки – table-cell и т.д.

Пример использования:

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

С точки зрения современного CSS, обычные <table>, <tr>, <td> и т.д. – это просто элементы с предопределёнными значениями display:

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV, это допустимо.

При этом он ведёт себя как ячейка TD, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align.

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

list-item

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

run-in

Если после run-in идёт block, то run-in становится его первым инлайн-элементом, то есть отображается в начале block.

Если ваш браузер поддерживает это значение, то в примере ниже h3, благодаря display:run-in, окажется визуально внутри div:

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in.

Вот, для примера, правильный вариант отображения run-in, оформленный другим кодом:

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in. На момент написания этой статьи только IE поддерживал display:run-in.

flex-box

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

learn.javascript.ru

block

Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.

inline

Элемент отображается как строчный. Использование блочных элементов, таких, как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.

inline-block

Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.

inline-table

Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.

inline-flex

Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

flex

Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.

list-item

Элемент выводится как блочный и добавляется маркер списка.

none

Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.

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>.

webref.ru

Использование inline-block элементов для создания кнопок

Сделаем еще один небольшой сравнительный анализ. В примере ниже представлены ссылки, внешний вид которых с помощью css-стилей отображает их как кнопки. Но 2 из них имеют display: inline-block, одна — display: inline (по умолчанию заданный в спецификации для ссылки) и еще одна  — display: block. Над каждой кнопкой подписано, каким образом она была отформатирована.

При клике на каждую из ссылок-кнопок текст, написанный на ней будет увеличен. В результате и сама кнопки либо увеличится, либо останется неизменной.

Что касается кнопок с display: inline-block и display: inline, у которых размер был сформирован padding-ами, то при добавлении текста они просто расширяются. Оранжевая кнопка  Sale, у которой размер имеет фиксированную ширину и высоту, увеличивается за счет добавленного текста вниз, хотя ни фон, ни рамка на этот текст не распространяются. Кнопка-ссылка с display: block изначально занимает всю ширину родительского элемента, поэтому добавление текста не влияет на ее размер на больших экранах. А вот на маленьких в ней текст за счет фиксированной высоты тоже выходит за пределы фона вниз. Еще можно заметить, что для желтой кнопки с display: inline несколько иначе определяются отступы от заголовка сверху — она расположена чуть выше всех остальных кнопок, хотя margin ни для одной из них в свойствах задан не был. Форматирование кнопок определялось такими свойствами:

Использование inline-block элементов для создания колонок

Сейчас существует масса способов сделать колонки, например, на основе Flexbox-модели, но свойство display: inline-block также можно использовать для этой цели. И здесь можно столкнуться с некоторыми особенностями поведения строчно-блочных элементов, о которых вы вряд ли задумывались когда-нибудь.

Например, у нас есть такая html-разметка: внутри родительского элемента с классом wrap есть 3 колонки с классами .col с заголовком и 3-мя абзацами. Можно воспользоваться аббревиатурой Emmet:

Нажимаем Tab и получаем разметку:

Для всех элементов добавим свойство box-sizing: border-box, чтобы ширина элементов не зависела от padding и border, а для родительского элемента .wrap зададим следующие максимальную ширину и внешние отступы:

Для 3-х колонок ширина их контейнера представляет собой 100%. Мы хотим, чтобы между колонками были отступы по 2%. Поскольку нам необходимы отступы только между первой и второй, а затем между второй и третьей, но не после 3-й колонки, то пространство контейнера следует разделить следующим образом: 100% — 4% margin = 96%. Далее 96%/3= 32% — получаем width каждой колонки. Затем используем это для свойств наших колонок с классом .col:

Обязательно нужно отключить правый margin для последней колонки, что мы и сделали с помощью псевдокласса :last-child.

И вот, что мы получим в итоге:

Вуа-ля — и нет 3-х колонок, которые выстроились в одну линию. Вместо этого есть 2 колонки в одном ряду + одна в нижнем ряду. Совсем не то, что нужно. В чем же причина «сваливания» последней колоки?

Дело в том, что поскольку display: inline-block предполагает все-таки частично строчное размещение текста, то в конце каждой колонки у нас образуется еще один пробельный символ, в который превращаются все знаки в HTML (пробелы, табуляция, переносы слов), в каком бы количестве они не встречались в тексте. Именно этот пробельный символ, размер которого зависит от размера шрифта, и добавляет нам несколько пикселей между колонками, которые «выбивают» третью из них вниз. 

Чтобы этого избежать, имеет смысл воспользоваться функцией calc(), которая появилась в стандарте CSS3 и давно уже поддерживается современными браузерами. Важным моментом в ее использовании является установка пробелов ДО и ПОСЛЕ знака минус:

Результат уже намного лучше:

Для того чтобы колонки с разным количеством текста не выбивались из одной линии, необходимо использовать свойство vertical-align чаще всего со значением top. Добавим его к нашим css-свойствам:

В результате получим колонки разной высоты, но выровненные по верхней линии:

html-plus.in.ua

Синтаксис свойства CSS visibility

Вот, как использовать свойство CSS visibility:

Значение по умолчанию для свойства CSS visibility — visible. Также можно использовать:

Данное значение используется в HTML-таблицах.

Синтаксис свойства CSS display

Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline, мы задаем для него поведение строчного элемента:

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block, он будет вести себя как блочный элемент.

Пример применения свойства display для отображения / скрытия меню

Я использовал элемент div, который содержит маркированный список <ul>, элементы списка и гиперссылки. Ссылки представляют собой пункты меню.

Для разработки этого меню использовался ряд других свойств CSS. Свойство display изначально задано не было. Это означает, что меню будет отображаться.

При клике по ссылке скрыть меню для события клика используется код JQuery, чтобы применить свойство display: none к родительскому элементу div:

Посмотреть онлайн демо-версию и код

Родительский div содержит меню, которое представляет собой сочетание элементов ul, li и <a>. При использовании display: none элемент div будет скрыт, как и все меню. Когда меню исчезает, ссылки перемещаются вверх, занимая пространство меню, потому что при использовании HTML display none элемент, к которому применено свойство, больше не будет занимать отведенное для него пространство.

Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial. Это сделает меню видимым, а ссылки сместятся вниз.

Демо-версия меню с использованием свойства visibility

Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility, чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery:

При нажатии на ссылку скрыть меню, меню скрывается. При клике по ссылке показать меню, добавляется свойство visibility: visible, и меню снова отображается:

Посмотреть онлайн демо-версию и код

В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются (в отличие от HTML display).

Пример использования свойства CSS visibility для HTML-таблицы

В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap. Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:

Посмотреть онлайн демо-версию и код

Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger, active, warning и т.д. Строки таблицы пронумерованы от 1 до 5 (первый столбец слева).

Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:

Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:

Посмотреть онлайн демо-версию и код

Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden.

Применение свойства CSS display к таблице

Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display, чтобы скрыть строку в таблице:

Посмотреть онлайн демо-версию и код

Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span, тег ссылки и т.д.

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

Чтобы изменить поведение строчного элемента на поведение блочного:

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div, а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

• Родительский div очерчен черной рамкой и занимает всю доступную ширину;
• span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
• Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span.

Перевод статьи «CSS display and visibility: 6 examples to show/hide HTML elements» был подготовлен дружной командой проекта Сайтостроение от А до Я.