Главная › Новости

CSS display (block, inline, none) - виды HTML элементов на вебстранице

Опубликовано: 02.11.2017

CSS display block, inline, inline block Tutorial | CSS lernen für Anfänger

Здравствуйте, уважаемые читатели блога 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: