Что означает display block. Основные значения свойства display в CSS. Как превратить блочный тег в строчный и наоборот с помощью display inline и block
Свойство CSS Display нужен для установки типа html элемента относительно других элементов. Проще говоря это опция отвечает за то, как отображать элемент относительно других. Благодаря ему можно добиваться нужных "спецэффектов".
Синтаксис CSS Display
display : value ;
Где value может принимать значения:
- block - блочный элемент (автоматически создает перевод строки)
- inline - встроенный элемент (не создает перевода строки);
- inline-block - производная от inline. Он также не создает перевода строки, но элементу можно задать ширину и высоту;
- list-item - блочный элемент с маркером списка;
- run-in - устанавливает элемент как блочный или встроенный в зависимости от контекста;
- table
- равносильно таблице (тег
), с переносом строки;
- inline-table - производная от table. Элемент является встроенным, но соседние элементы его обтекают;
- table-caption - создания заголовка таблицы (аналог тега
); - table-cell - создания элемента ячейки таблицы (аналог тега
); - table-column - элемент определяющий столбец таблицы;
- table-row - элемент определяющий строку таблицы;
- none - элемент не отображается на странице и все другие элементы ведут себя так, как будто его нет вообще;
- inherit - наследование от элемента родителя;
Примечание
По умолчанию все элементы являются строчными display :inlineПримеры использования Display
Пример №1. Использование display:block
Как видите, строка перенеслась автоматически
В примере добавлено свойство border:1px solid #000 чтобы показать, какую область занимает блочный элемент.
Абзац №1. Рассматриваем элементы display. текст со свойством display:block Как видите, строка перенеслась автоматически
Пример №2. Использование display:none
Вот как это выглядит на странице:
Абзац №1. Рассматриваем элементы display:none. текст со свойством display:none Как видите, блок с текстом none отсутствует
Логично провести ассоциацию с атрибутом visibility: hidden , но в отличии от него, display:none не отводит места под объекты.
Это свойство является очень полезным, например, при создании эффектов выпадающего меню.
Пример №3. Использование display:inline-block
Как видите, блок с текстом none отсутствует
Вот как это выглядит на странице:
Абзац №1. Рассматриваем элементы. текст со свойством display:inline-block Как видите, блок вставлен прямо в контент
Здравствуйте, уважаемые читатели блога сайт! Настала очередь поговорить о таком важном правиле CSS как display. Основной упор сделаем на наиболее часто используемых параметрах этого свойства - block, inline и none . Естественно, все это будет рассмотрено на живых примерах, куда же без этого.
Данное средство каскадных таблиц стилей дает возможность без вмешательства в 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:
Заголовок
Текст
Тег spanВ итоге данные вэбэлементы отобразятся в браузере в полном соответствии со своими умолчательными параметрами CSS правила дисплей. Вся эта композиция на вебстранице будет иметь такой вид ( можете посмотреть в живую):
Заголовок H2 и тег P являются блочными (block), поэтому занимают по ширине всю доступную область. Один из важнейших структурных вебэлементов SPAN - строчный (inline), по этой причине его ширина ограничивается содержанием. Далее пропишем для P правило инлайн:
Текст
Теперь в нашем примере произойдут вот такие превращения:
Эти изменения вы можете проследить в отдельной вкладке. Как видим, текстовый элемент превратился в строчный и его ширина теперь определяется входящим контентом («Текст»). SPAN занял место в строке рядом с ним, поскольку пространство позволяет.
Абсолютно также можно провести обратную операцию и строчный вебэлемент сделать блочным. Применим теперь параметр блок к SPAN:
Тег span
После такого редактирования картина будет таковой:
Теперь элемент SPAN стал блочным. Это доказывает и его вид, поскольку он стал занимать все возможное пространство по ширине. И снова можете убедиться в корректности всех этих изысканий.
Display list-item - делаем списки из блочных элементов
Дальше поэкспериментируем немного в области создания , которые, как известно, составляются с помощью тегов UL, OL, LI. Мы же обойдемся без них, применим для выполнения этой задачи лишь правило display:list-item.
Для этого возьмем заголовок из предыдущего примера, а также несколько простых абзацев. Но так все-таки не остается видимой области для маркеров. Чтобы решить задачу в полном объеме, требуется задать отступы слева для всех пунктов списка с помощью свойства margin-left, указав ему конкретное значение (например, 25 пикселов):
Заголовок
Текст 1
Текст 2
Текст 3
Результирующий вид окажется таким:
Таким образом маркированный список готов . При необходимости вид самих маркеров можно настроить как угодно, применив правило CSS list-style. Вполне возможно произвести и обратное действие. То есть при наличии созданного на основе тех же UL и LI списка обратить его в стандартные абзацы, указав block для каждого элемента LI.
Как я отметил выше, у свойства CSS дисплей существует еще немало параметров, посредством которых можно, например, оформлять таблицы. Каждому вебэлементу соответствует определенный параметр display:
Но подробно расписывать данный аспект я не намерен, поскольку эта тема требует отдельной публикации, да и применяются данные значения весьма редко, не говоря уже о том, что даже популярные браузеры воспринимают табличные CSS правила по-разному, особенно это касается старых версий . Так что ограничусь пока общей информацией.
Правила display none и inline-block - для чего они нужны
Наверное, вы уже в курсе, что , причем любого, в обязательном порядке содержит тег HEAD, в содержание которого включена служебная информация, которая не видна на странице. Если мы вернемся к странице дефолтных параметров для HTML элементов, то увидим, что none является значением по умолчанию как раз для HEAD:
То есть, ежели конкретный вебэлемент обладает свойством display none, то он не только не будет виден на странице и никоим образом не повлияет на другие составляющие документа. Под него не будет даже резервироваться место при генерировании кода вебстраницы.
Для примера возьмем два заголовка H2, одному из которых присвоим правило дисплей со значением none. На полученный результат посмотрите сами:
Чтобы наглядно увидеть, как работает это CSS правило, попробуйте удалить:
Class1 {display:none;}
После этого оба заголовка будут видны. Понятно, что тег HEAD является одним из важнейших и системообразующих в HTML коде, но он и так не требует никакого вмешательства, поскольку для него предусмотрено значение none свойства дисплей по умолчанию. В каких же еще случаях возможно применение этого параметра?
Ну, значение none есть смысл применять только при желании реализовать какие-то динамические эффекты на вебстранице без привлечения скриптов. Скажем, когда при определенных действиях элемент появляется в зоне видимости. Возьмем пример выпадающего меню в упрощенном варианте.
Заключим H3 и UL в общий контейнер DIV. Полностью конструкция будет такой:
Выпадающий список
- Первый пункт
- Второй пункт
- Третий пункт
Далее надо указать стили для DIV через заданный class (), чтобы получить желаемый результат. Пропишем none к свойству дисплей, этим мы скроем меню из зоны видимости. А вот для того, чтобы обеспечить появление списка при подводе курсора мыши к заголовку, нужно еще воспользоваться помощью псевдокласса:hover (об этом будет отдельная статья), которому определим параметр свойства дисплей block:
Class1 ul {display:none;} .class1:hover ul{display:block;}
Конечно, можно более внимательно отнестись к оформлению элементов посредством добавления других стилевых правил. Однако, я намеренно не буду сейчас этого делать, чтобы не засорять CSS код и не отвлекать от сути вопроса. Теперь, если подвести курсор мышки к заголовку, то появится наш маркированный список:
Впрочем, если вы что-то упустили или не до конца поняли, можете онлайн , чтобы удалить темные пятна.
Что еще? Ах, да. Есть такой параметр как display:inline-block . Он придает тегу одновременно свойства блочного и строчного элемента. Если по отношению к соседним вебэлементам он будет вести себя в качестве строчного (рядом с ним могут находиться другие теги в строку), то для вложенных в него элементов он будет блочным (возможность определять его размеры и отступы).
Вопрос практического использования inline-block достаточно неординарный и требует отдельного внимания, что явно не укладывается в рамки настоящей статьи. Поэтому на данный момент ограничимся общей информацией.
Каковым же может быть резюме настоящей статьи. Главное преимущество применения свойства дисплей заключается в том, что мы можем менять виды отображения элементов на странице, не прибегая к правке HTML кода.
На вебстранице вполне может быть огромное число самых разнообразных тегов, поэтому это занятие может оказаться довольно трудоёмким. Вот здесь и выручит правило дисплей, значения которого можно прописать через файл стилей CSS, что и сэкономит драгоценное время.
.
Акакой-то текст
какой-то текст
- если не задано значение width, элемент растягивается на весь родительский контейнер.
какой-то текст
какой-то текст
- если задано значение width, ширина складывается из margin, border, padding, width (). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.
какой-то текст
width: 100%;
border: 4px double red;какой-то текст
- если не задано значение height, элемент растягивается на высоту, необходимую содержимому блоку, иначе высота складывается из margin, border, padding, height.
- при превышении указанной высоты/ширины содержимое отображается поверх блока, коли не указано иное с помощью свойства . В нашем случае красная рамка видна над голубой родительского блока.
Пример использования- маленькая
- с длинным текстом
Уберём ненужные отступы (padding, margin), маркер (list-style) и подчёркивание (text-decoration) и добавим рамку (border)
display: inline;
По умолчанию присвоен a, span, b, em и т.д.
<span class="svetlyi">Аspan >какой-то текст прямоугольник А переносится на новую строку какой-то текст
- width и height игнорируются. Его ширина - это ширина содержимого плюс margin, border и padding.
- margin-top и margin-bottom игнорируются.
- совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут "наезжать" друг на друга.
какой-то текст прямоугольник А переносится на новую строку и наезжает на соседние строки из-за установленного значения padding какой-то текст
- не может иметь . Но при этом поддаётся его воздействию, если данное свойство задано родителю-блоку.
Пробелы между тегами li нужно убирать. Когда разделяются слова пробелом, между ними появляется пустое пространство, здесь то же самое.
- маленькая
- с длинным текстом
display: inline-block;
По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.
Пример использования- маленькая
display: list-item;
По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство . В примере выше маркер отсутствует, поскольку у li display отличный от list-item.
display: run-in;
Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.
Акакой-то текстdisplay: run-in;
вторая строкакакой-то текст
display: table;
По умолчанию присвоен table.
- на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
- если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из margin, border, padding, width. При превышении указанной высоты/ширины содержимое отображается поверх блока.
какой-то текст
width: auto;
display: table;какой-то текст
- не поддаются влиянию блоки, если у родителя , только их содержимое.
- не действуют такие свойства, как .
- применимы свойства .
display: inline-table;
Аналогичен display: inline-block.
- применимы свойства .
display: table-row;
По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.
- на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
- элемент растягивается по длине содержимого.
- width, border, padding, margin, vertical-align игнорируются.
- можно изменить значение height.
- не поддаются влиянию блоки, если у родителя , только их содержимое.
display: table-cell;
По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.
- элементы следуют друг за другом.
- если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из border, padding, width. Но не более ширины контейнера и пропорционально всем длинам ячеек. Поэтому я советую, не задавать width для ячеек нижних строчек.
- высота всех ячеек в строке одинакова и составляет высоту самой высокой ячейки. Удобно при построении двух- и т.д. колоночных макетов, где требуются колонки одинаковой высоты.
- margin игнорируется. Это свойство заменяется border-spacing у родителя.
- на его содержимое можно воздействовать посредством и .
1112334556
Пример использованиямаленькая с длинным текстом в две строки
цена цена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;
Элемент становится невидимым, не сохраняя занимаемое место.
Пример использования- маленькая
- подпункт1
- подпункт2
- с длинным текстом
- маленькая
- подпункт1
- подпункт2
- с длинным текстом
- маленькая
- подпункт1
- подпункт2 длинный
- с длинным текстом
Каскадные таблицы стилей (CSS) позволяют организовать внешний вид и оформление интернет-страницы. Одним из наиболее часто употребляемых свойств и его значений является "display: none".
Определение свойства
Само свойство является многоцелевым и определяет тип отображения элемента в документе. В зависимости от выбранного значения определенный участок страницы может отображаться блочно, линейно, как пункты списка, как часть таблицы и т. д. Таким образом, благодаря свойству "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" строго по назначению — для изменения типа блока или его временного скрытия от глаз пользователя.
Свойство display отвечает за вывод и визуальное отображение элементов на странице. Также с помощью свойства display можно изменить . Свойство не наследуется.
Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.
В нормальном потоке блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.
Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.
Строчно-блочный элемент также генерирует строку текста, при этом низ элемента располагается на базовой линии строки текста и не разрывает строку. Содержимое элемента форматируется так же, как и для блочных элементов, а ширина блока равна ширине содержимого.
Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border , но не имеющие полей margin .
Таблица 1. Значения свойства display
display Значения: inline Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег . block Элемент генерирует структурный блок, как и тег .flex Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов. inline-block Элемент генерирует строковый блок. inline-flex Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов. inline-table Элемент определяет структурный блок, который генерирует строковый блок. list-item Элемент генерирует структурный блок, который отображается как элемент списка - .
table Элемент генерирует структурный блок. На странице ведет себя аналогично .
table-caption Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично . table-column Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — . table-column-group Элемент объединяет один или несколько столбцов. Аналог — . table-cell Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично и . table-header-group Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — . table-footer-group Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично table-row-group Элемент объединяет одну или несколько строк. Аналог — table-row Элемент является строкой ячеек. Пример — . none Элемент не генерирует никакой контейнер, полностью удаляясь со страницы. inherit Наследует свойство от родительского элемента. Еще на эту тему:
Другие статьи:
