Свойство CSS display (block, inline, none) — способы отображения HTML элементов на вэбстранице. Параметры отображения html элементов на веб странице. CSS свойства visibility и display

В итоге данные вэбэлементы отобразятся в браузере в полном соответствии со своими умолчательными параметрами 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, что и сэкономит драгоценное время.

display является наиболее важным стилевым свойством в CSS для управления шаблоном. Каждый элемент имеет значение отображения по умолчанию в зависимости от того, к какому типу относится данный элемент. Для большинства элементов, значения отображения по умолчанию, как правило, будут block или inline . В оригинале, блочный элемент часто еще называют элементом блочного уровня(block-level element).У строчного же элемента нет альтернативного названия.

block

inline

span это стандартный строчный элемент. Строчный элемент может обернуть текст внутри абзаца вот так не нарушая его структуры. Наиболее распространенный строчный элемент это a так как вы используете его для ссылок.

none

Еще одно распространенное значение для отображения это none . Некоторые специализированные элементы, такие как script используют это значение по умолчанию. Оно широко используется с JavaScript, чтобы скрывать и показывать элементы вместо того, чтобы удалять и воссоздавать их снова.

Оно отличается от visibility . При задании свойству display значения none страница будет отображаться словно элемент не существует. visibility: hidden; просто скроет элемент, но элемент по прежнему будет продолжать занимать место, как если бы он был полностью виден.

другие display значения

Есть много более экзотичных стилевых значений для отображения, таких как list-item и table . Вот полный список . Позже мы обсудим inline-block и flex .

дополнение

Как я уже говорил, каждый элемент имеет тип отображения по умолчанию. Тем не менее, вы всегда можете переопределить это! Хотя это не имело бы смысла для того, чтобы сделать div строчным, вы можете использовать это, чтобы настроить отображение элементов с частной семантикой. Типичный пример – возможность выстраивания li элементов для горизонтального меню.