Block html: Блочные элементы | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Содержание

display | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	2.0+	7.0+	1.0+	1.0+	2.1+	1.0+

Краткая информация

Значение по умолчанию	inline
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visuren.html#display-prop

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display
Значение	Описание	IE6	IE7	IE8	Cr2	Cr8	Op9.2	Op10	Sa3.1	Sa5	Fx3	Fx4
block	Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline	Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block	Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table	Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
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>.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>display</title>
  <style>
   .example {
    border: dashed 1px #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Шрифт текста */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы вокруг */
   }
   .  exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Устанавливаем как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер текста */
    margin: 0; /* Убираем отступы вокруг */
    white-space: nowrap; /* Отменяем переносы текста */
   }
  </style>
 </head> 
 <body> 
  <p>Пример</p>
  <p>
  &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
  &lt;html&gt;<br>
  &lt;body&gt;<br>
  &lt;b&gt;Формула серной кислоты:&lt;/b&gt;
  &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
  SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
  &lt;/sub&gt;&lt;/i&gt;<br>
  &lt;/body&gt;<br>
  &lt;/html&gt;</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

[window.]document.getElementById(«elementID»).style.display

Браузеры

Internet Explorer до версии 7 включительно:

поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
для элементов <li> понимает значение block как list-item;
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

значение table-column применяется только для тега <col>;
значение table-column-group поддерживается только для тега <colgroup>.

Chrome 2.0, а также Safari версии 3 и старше, iOS:

значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Форматирование

CSS по теме

display

Статьи по теме

DIV-ные колонки одинаковой высоты на CSS
Блочные элементы
Можно ли оборачивать ссылкой блок?
Ошибка с блочными ссылками в IE6
Почти стандартный режим
Почти стандартный режим
Создание тени по типу «луковой шелухи»
Список с русскими буквами
Строчно-блочные элементы
Строчные элементы
Строчные элементы

Рецепты CSS

Как разместить элементы списка горизонтально?
Как сделать блок со скругленными уголками без рисунков?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Как сделать, чтобы слой целиком был ссылкой?
Как создать рамку со скругленными уголками без изображений?

Изучение CSS Разметки

Вы можете создать сетку коробок, которая впишется по ширине браузера и будет отлично обертываться при изменении размеров окна последнего. Это стало возможным в течении длительного времени, используя

float, но сейчас с inline-block осуществить это еще проще. inline-block элементы, такие же как и inline элементы, но у них есть ширина и высота. Давайте взглянем на примеры обоих подходов.

Сложный путь (использование float)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я всплываю!

</div>

<div>

Я использую clear, поэтому я не всплываю над коробками, которые выше меня.

</div>

Легкий путь (использование inline-block)

Вы можете достичь того же эффекта, используя значение inline-block для display свойства.

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div>

Я inline block!

</div>

<div>

Я inline block!

</div>

<div>

Я inline block!

</div>

<div>

Я inline block!

</div>

<div>

Я inline block!

</div>

<div>

Я inline block!

</div>

<div>

Я inline block!

</div>

<div>

Я inline block!

</div>

<div>

Я inline block!

</div>

<div>

Я inline block!

</div>

<div>

Мне не нужно использовать clear в этом случае. Найс!

</div>

Вы должны проделать дополнительную работу для поддержки в IE6 и IE7 с использованием inline-block. Иногда люди говорят насчет inline-block срабатывания именуемого hasLayout, хотя вам всего лишь нужно знать , что это касается поддержки старых браузеров. Следуйте по предыдущей ссылке если вам важна поддержка в IE6 и IE7. Если это вас не интересует , то давайте двигаться дальше.

Назад Далее

15 / 19

Встроенные и блочные элементы HTML (с примерами)

В этом руководстве вы узнаете о встроенных и блочных элементах HTML вместе с примерами.

Элементы HTML можно разделить на две категории:

Встроенные элементы: , , , и т. д.
Блочные элементы:
,
, , <рисунок> и т.д.

Встроенные элементы HTML

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

 Вот как работает span.

Вывод браузера

Если у нас есть несколько тегов span, они помещаются в одну строку. Например,

  Следующие интервалы будут встроенными; Span 1 и Span 2.

Вывод браузера

Некоторые примеры встроенных элементов:

HTML бирка
HTML тег
HTML тег

Большинство тегов форматирования HTML также являются встроенными. Например:

HTML тег
HTML тег
HTML тег и т. д.

Блочные элементы HTML

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

Примером блочного элемента является HTML-тег абзаца .

 Так работают блочные элементы.

Вывод браузера

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

 Абзацы
 Блочные элементы.

Вывод браузера

Некоторые часто используемые блочные элементы:

HTML
тег
Заголовки HTML —
HTML
тег, и т. д.

CSS со встроенными и блочными элементами HTML

Свойства CSS высота и ширина не влияют на встроенные элементы.

  Следующий диапазон является встроенным элементом.
<стиль>
  охватывать {
    высота: 200 пикселей; /* Не влияет на элемент */
    ширина: 200 пикселей; /* Не влияет на элемент */
  }

Вывод браузера

Строковые элементы также не имеют верхнего и нижнего полей, они учитывают только левое и правое поля.

 12
  34
  <стиль>
    охватывать {
      поле сверху: 10px;
      нижняя граница: 10px;
      поле слева: 10px;
      поле справа: 10px;
      граница: 1px сплошной черный;
    }

Вывод браузера

Встроенные элементы учитывают отступы во всех направлениях.

 Это диапазон
<стиль>
  охватывать {
    отступ: 10 пикселей;
    граница: 1px сплошной черный;
  }

Вывод браузера

Блочные элементы соответствуют свойствам height и width . Мы можем изменить как высоту, так и ширину блочных элементов с помощью CSS.

 Этот абзац является блочным элементом.
<стиль>
  п {
    высота: 200 пикселей; /* Это работает */
    ширина: 200 пикселей; /* Это работает */
  }

Вывод браузера

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

1
2

Вывод браузера

Блочные элементы также учитывают верхние и нижние поля и направления отступов. Например,

 Блокировать
Заблокировать
<стиль>
  дел {
    граница: 1px сплошной черный;
    отступ: 10 пикселей;
    поле: 10 пикселей;
  }

Вывод браузера

Блочные и встроенные элементы

Блочные и встроенные элементы
Вернуться на страницу недели 4 »
В HTML 4. 01 существовало две основные категории HTML-элементов:
Элементы блочного уровня
Линейные элементы
Элементы уровня блока
Элементы блочного уровня по умолчанию занимают максимально возможное место. Каждый элемент уровня блока будет начинать новую строку на странице, располагаясь вниз по странице. В дополнение к вертикальной укладке элементы блочного уровня также будут занимать как можно больше места по горизонтали.
Элемент p является примером элемента блочного уровня. Каждый новый тег абзаца будет отображаться на отдельной строке по вертикали. Абзацы с более длинным содержимым будут растягиваться до самого края страницы.
Примеры элементов блочного уровня:
<р>

,
,

Все заголовки
<артикул> , <раздел> , <дел>
Демо
См. демонстрацию базового уровня блока
См. базовую демонстрацию блочного уровня с контурами
Встроенные элементы
Встроенные элементы отображаются в линию. Они не переносят текст после них на новую строку.
Якорь (или ссылка) является примером встроенного элемента. Вы можете разместить несколько ссылок подряд, и они будут отображаться в строке.
Примеры встроенных элементов:
<а>
, , , , ,
<диапазон>
Демо
См. демонстрацию базового встроенного уровня
См. демонстрацию базового встроенного уровня с контурами
Посмотреть все вместе
См. демонстрацию с выделенными блочными и встроенными элементами
Почему это важно?
Поведение элемента при стилизации с помощью CSS будет меняться в зависимости от режима отображения элемента (блочный или встроенный) . Некоторые свойства CSS по-разному реагируют на каждый тип отображения. Мы узнаем больше об этом поведении, когда начнем размещать страницы в CSS.
Пока запомните это:
Строчные элементы не могут содержать элементы блочного уровня
Например, вы не можете обернуть вокруг двух абзацев:
← Неправильно
Подчеркнутый абзац.

Еще один выделенный абзац.
← Неправильно
Правильный способ сделать это — поместить встроенный элемент внутрь каждого блочного элемента :

Подчеркнутый абзац.

Еще один выделенный абзац.

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

Книга рецептов
Сначала поешьте, потом говорите.
No related posts.

display | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

CSS по теме

Статьи по теме

Рецепты CSS

Изучение CSS Разметки

Сложный путь (использование float)

Легкий путь (использование inline-block)

Встроенные и блочные элементы HTML (с примерами)

Встроенные элементы HTML

Блочные элементы HTML

CSS со встроенными и блочными элементами HTML

Блочные и встроенные элементы

Элементы уровня блока

Демо

Встроенные элементы

Демо

Посмотреть все вместе

Почему это важно?

Одно исключение (новое в HTML5)

Книга рецептов

Добавить комментарий Отменить ответ