Html display block inline: Свойство display | Справочник HTML CSS

Содержание

display - Веб-технологии для разработчиков

displayChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android
Полная поддержка
10.1
Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
contentsChrome Полная поддержка 65
Полная поддержка 65
Нет поддержки 58 — 65
Отключено From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 79Firefox Полная поддержка
37
Полная поддержка 37
Нет поддержки 36 — 53
Отключено From version 36 until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 52
Полная поддержка 52
Нет поддержки 45 — 52
Отключено From version 45 until version 52 (exclusive): this feature is behind the
Enable experimental Web Platform features
preference.
Safari Полная поддержка 11.1WebView Android Полная поддержка 65Chrome Android Полная поддержка 65
Полная поддержка 65
Нет поддержки 58 — 65
Отключено From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 57Opera Android Полная поддержка 47
Полная поддержка 47
Нет поддержки 43 — 47
Отключено From version 43 until version 47 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 11.3Samsung Internet Android Полная поддержка 9.0
contents: Specific behavior of unusual elements when display: contents is applied to themChrome Полная поддержка 58Edge Полная поддержка 79Firefox Полная поддержка
59
IE Нет поддержки НетOpera Полная поддержка 45Safari Нет поддержки НетWebView Android Полная поддержка 65Chrome Android Полная поддержка 58Firefox Android Полная поддержка 59Opera Android Полная поддержка 43Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 9.0
<display-outside>Chrome
Полная поддержка
1
Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1
Safari iOS Полная поддержка 1
Samsung Internet Android Полная поддержка 1.0
display-outside.run-in ЭкспериментальнаяChrome Нет поддержки 1 — 32
Нет поддержки 1 — 32
Замечания Before Chrome 4, run-in was not supported before inline elements.
Edge Нет поддержки НетFirefox Нет поддержки НетIE Полная поддержка 8Opera Нет поддержки 7 — 19Safari Нет поддержки 1 — 8
Нет поддержки 1 — 8
Замечания Before Safari 5, run-in was not supported before inline elements.
WebView Android Нет поддержки ≤37 — ≤37Chrome Android Нет поддержки 18 — 32Firefox Android Нет поддержки НетOpera Android Нет поддержки 10.1 — 19Safari iOS Нет поддержки 1 — 8
Нет поддержки 1 — 8
Замечания Before Safari 5, run-in was not supported before inline elements.
Samsung Internet Android Нет поддержки
1.0 — 2.0
flexChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 21
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 20
Полная поддержка 20
Замечания Firefox 28 added multi-line flexbox support.
Нет поддержки 18 — 28
Отключено
From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Частичная поддержка 11
Частичная поддержка 11
Замечания IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers.
Частичная поддержка 8Замечания Альтернативное имя
Замечания IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers.
Альтернативное имя Использует нестандартное имя:
-ms-flexbox
Opera Полная поддержка 16
Полная поддержка 16
Полная поддержка 15
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 15
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 6.1
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка ≤37
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 20
Полная поддержка 20
Замечания Firefox 28 added multi-line flexbox support.
Нет поддержки 18 — 28
Отключено From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 16
Полная поддержка 16
Полная поддержка 14
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 14
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 7
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 2.0
Полная поддержка 2.0
Полная поддержка 1.5
С префиксом Требует вендорный префикс: -webkit-
flow-rootChrome Полная поддержка 58Edge Полная поддержка 79Firefox Полная поддержка 53IE Нет поддержки НетOpera Полная поддержка 45Safari Полная поддержка 13WebView Android Полная поддержка 58Chrome Android Полная поддержка 58Firefox Android Полная поддержка 53Opera Android Полная поддержка 43Safari iOS Полная поддержка 13Samsung Internet Android Полная поддержка 7.0
gridChrome Полная поддержка 57Edge Полная поддержка 16
Полная поддержка 16
Полная поддержка 12
С префиксом Требует вендорный префикс: -ms-
Firefox Полная поддержка 52IE Частичная поддержка 10С префиксом Замечания
Частичная поддержка 10С префиксом Замечания
С префиксом Требует вендорный префикс: -ms-
Замечания Internet Explorer implements an older version of the specification.
Opera Полная поддержка 44Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 52Opera Android Полная поддержка 43Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0
Полная поддержка 6.0
Замечания Samsung Internet added this earlier than the corresponding Chrome version would indicate.
inline-blockChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 8
Полная поддержка 8
Частичная поддержка 6
Замечания Until Internet Explorer 8, inline-block is only for natural inline elements.
Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка

Display (block, none, inline) в CSS — задаем тип отображения Html элементов на вебстранице

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы поговорим про довольное важное правило языка стилевой разметки под названием Display. Самые часто используемые его значения вы уже, наверное, встречали в CSS коде: display block, none или inline. В этой статье мы попробует рассмотреть все это подробнее и на примерах.

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

Display block и inline — как блочный сделать строчным

Как мы с вами уже узнали из курса по языку Html, на веб страницах формируются элементы с помощью тегов, которые в свою очередь обрабатывает парсер Html используемого вами браузера и отображает их на экране вашего компьютера. То, как будут выглядеть эти элементы (созданные на основе Html тегов), определяется в современной верстке языком стилевой разметки CSS.

Даже если вы никаких специальных стилей не задавали для каких-либо тегов, то они все равно будут отображаться браузером с учетом тех правил, которые были приняты для них по умолчанию. Где же можно посмотреть на эти самые CSS стили по умолчанию для всех Html тегов? Ну, все в том же валидаторе W3C на этой странице. Если прокрутить ее оглавление до конца, то там вы увидите ссылку «Default style sheet for HTML 4», где и будет приведена нужная нам информация.

К чему все это? Я уже неоднократно при описании тех или иных Html тегов акцентировал ваше внимание на том, к какому именно типу относится этот тег — строчный или же блочный. В зависимости от этого мы предполагали наличие определенного поведения у данных элементов — либо они будут стремиться занять все доступное им место по ширине (блочные), либо не будут (строчные).

Но я так и не объяснил откуда берется такое разделение и где можно узнать к какому именно типу относится конкретный тег. Так вот, узнать это как раз можно на упомянутой нами странице спецификации CSS под названием «Default style sheet for HTML 4» и отвечает за все это безобразие специальное правило Display.

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

Здесь вы можете увидеть все те же теги абзацев P, заголовков h2-H6, контейнеров Div и других блочных элементов. Если посмотреть на список CSS свойств и допустимых для них значений в валидаторе W3C, то для display мы увидим следующее:

Если не указано другого, то по умолчанию будет использоваться вариант «display:inline» (т.к. именно это значение прописано в столбце «Initial value»), что будет соответствовать формированию строчных элементов. Поэтому в приведенной на странице спецификации «Default style sheet for HTML 4» те теги, которые должны отображаться как строчные (например, span), вообще не описаны или для них не указано значение Дисплей, ибо по умолчанию они и так будут строчными.

Правило Дисплей отвечает за то, как данный элемент надо строить и отображать браузеру. Оно говорит обозревателю, что из себя представляет тег и как его надо показывать. Имеется возможность показывать как элемент строки (display: inline) или как блок (block), показывать как таблицу (table) или как часть таблицы (inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption). Это правило очень важное.

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

Давайте рассмотрим простой пример с тремя тэгами, один из которых по умолчанию будет строчным (span), а два других — блочными (h4 и P). Для большей наглядности я залил область отведенную для этих элементов фоном с помощью Background:

<h4> h4 по умолчанию будет отображать браузером как блочный</h4>
<span> Span - типичный пример строчного тега </span>
<p> P - еще один по умолчанию блочный <p>

В результате браузер отобразил все элементы в полном соответствии с их умолчательными значениями правила Display:

Как видите, первый блок h4 (с умолчательным значением block) занимает весь доступный ему размер по горизонтали (равно как и третий элемент P), ну а строчный Span (с умолчательным значением display:inline) занимает по ширине ровно столько места, сколько нужно для размещения заключенного в него контента.

Ну, а теперь давайте из изначально блочного тега h4 сделаем строчный с помощью добавления к нему display inline (я уменьшил текст в первых двух элементах для получения большего эффекта наглядности):

<h4> h4</h4>
<span> Span</span>
<p> P - еще один по умолчанию блочный тэг <p>>

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

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

Точно так же можно из строчного тега Span сделать блочный с помощью добавления display:block:

<h4> h4</h4>
<span> Span</span>
<p> P - еще один по умолчанию блочный Html элемент <p>

И в результате наше наглядное пособие отобразит произошедшую метаморфозу (что это?):

Span стал занимать всю область,доступную ему по ширине в не зависимости от количества контента заключенного в этот тэг.

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

А теперь давайте попробуем с помощью Дисплей сделать ряд блочных тегов элементами списка. С этим нам поможет справиться правило display:list-item. Пусть у нас изначально будут присутствовать несколько абзацев и заголовок:

<h4> h4</h4>
<p> Первый абзац (тег P) <p>
<p> Второй абзац <p>
<p> Третий <p>

Которые будут выглядеть примерно так:

Теперь, если мы добавим ко всем блочным тэгам абзаца CSS правило display:list-item, то браузер сгенерирует для всех этих элементов специальную область для маркера, в которых появятся эти самые маркеры используемые по умолчанию:

<h4> h4</h4>
<p> Первый абзац (тег P) </p>
<p> Второй абзац </p>
<p> Третий </p>

Но в таком виде вы никаких изменений не заметите. Область маркера добавляется перед областью блочного тега и чтобы ее увидеть, нужно каким-либо образом отодвинуть этот блок слева от края контейнера, в котором он живет. Сделать это можно с помощью все того же Margin, а именно прописав для нужных абзацев margin-left:20px (или заключив абзацы, например, в тег цитаты blockquote) и тогда получим следующую картину:

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

Еще среди возможных значений Display вы можете видеть огромное количество вариантов для задания внешнего вида таблицам и ее составным частям. У каждого элемента таблицы в Html коде проставлено свое значение Дисплей:

Касаться того, что именно они делают, я не буду, ибо вряд ли вам когда-нибудь это понадобится, а тема эта весьма сложна. Кроме того, даже IE 7 не поддерживает все эти значения Дисплей для таблиц, не говоря уже и о более старых версиях этого чудо-браузера.

Display none и inline-block — динамика посредством CSS

Другое дело display: none. Если вы посмотрите на все те же умолчательные стили для Html элементов на странице «Default style sheet for HTML 4», то увидите, что «none» прописано по умолчанию для тега Head:

Что это означает? Это означает то, что если у элемента прописан display: none, то он никак не отображается на вебстранице и никаким образом не участвует в построении этого документа (под него даже не резервируется место).

Именно так и должен вести себя тэг Head, который предназначен исключительно для размещения внутри себя служебных данных (не отображаемых на вебстранице, например, там прописывается путь до иконки favicon.ico и до файла таблиц каскадных стилей с помощью служебных гиперссылок Link) и скриптов.

Так же правило display:none можно использовать, например, для создания выпадающего меню. Помните, когда я рассказывал про селекторы псевдоклассов и псевдоэлементов, то мы упоминали про такой псевдокласс, как hover. С помощью него можно было задать правила, которые бы начинали работать только при наведении курсора мыши на нужный нам Html элемент.

Никто не мешает вам сделать выпадание содержимого списка при наведении на него мышкой (выпадающее меню). В обычной ситуации для выпадающего содержимого списка будет прописано display:none, ну, а с помощью псевдокласса hover можно будет приписать для этого же содержимого display:block и тогда меню будет раскрываться при наведении на него курсора мыши.

Т.о. получается, что значение «none» имеет смысл использовать только для реализации какой-то динамики на вебстранице (видно — невидно), а писать его просто так никакого смысла не имеет, разве что только в случае уже упомянутого чуть выше тега Head, но опять же это значение для него используется браузерами по умолчанию.

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

Вообще, «inline-block» — это тема для отдельного разговора, тем более, что он не поддерживается полностью даже IE7. Но при желании вы можете ознакомиться с возможностями этого CSS правила из материалов этой статьи.

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Рубрика: CSS за 10 уроков

Когда и зачем использовать inline-block

Когда использовать inline-block?

От автора: значение display inline-block является классическим! Оно не ново, и поддержка браузеров — это не то, о чем вам стоит беспокоиться. Я уверен, что многие из нас достигают этого интуитивно. Но давайте поставим точку в этом вопросе. Для чего это на самом деле полезно? Когда вы выбираете его среди других, возможно, похожих, вариантов?

Кнопки

Самый распространенный ответ, который я услышал, был: я всегда использую его для кнопок.

В конечном итоге, я думаю, что это имеет смысл, но это способствует тому, что я вижу, как небольшое недоразумение. Идея заключается в том, что вы хотите получить элементы, которые выглядят как кнопки (которые могут быть обработаны с помощью <a>, <button> или, возможно <input>), чтобы встроить их — но иметь поля и отступы. Это небольшое недоразумение: display: inline; элементы тоже могут иметь margin и padding, и они, вероятно, ведут себя так, как вы ожидаете.

Сложность в том, что:

Граница в направлении блока для встроенных элементов полностью игнорируется

Когда использовать inline-block?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Отступ встроенных элементов не влияет на высоту строки текста.

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

Отступ встроенных кнопок вырывает их из контейнера, что немного странно.

Ситуация ухудшается, когда появляется обтекание с помощью встроенных кнопок:

Так что да, inline-block для кнопок имеет смысл. Но…

Не забывайте о inline-flex и inline-grid

Со значениями display inline-flex и inline-grid вы получите все то же хорошее поведение, что и у inline-block, но элементы (часто кнопки) могут выиграть от более мощной встроенной системы макетов. Возьмем пример кнопок с иконками, например:

<a href="#"crayon-table">

<a href="#"crayon-table">

.button svg {

  vertical-align: middle;

}

что никогда не работает правильно…

Эти иконки расположены на один или два пикселя ниже центра, по крайней мере, на мой взгляд.

Но это легко исправить с помощью inline-flex:

.button { display: inline-flex; align-items: center; }

.button {

  display: inline-flex;

  align-items: center;

}

Идеально выровненные иконки (и когда-нибудь мы сможем измерить размеры, используя единицы измерения lh!)

С помощью inline-flex или inline-grid вы получаете всю мощь флекс-бокс или системы сетки внутри блока, который располагается в линейном направлении.

Блоки, которые все равно можно переносить

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

Идея встроенных блоков, которые ведут себя как столбцы, которые можно переносить (даже до 1 столбца), актуальна и по сей день, потому что это трюк, который можно использовать в HTML электронных письмах, чтобы реализовать многостолбцовые макеты, которые сворачиваются в один столбец на маленьком экраны без необходимости медиа-запросов (которые не поддерживаются некоторыми почтовыми клиентами).

Пример Дэна.

transform для встроенных элементов

Встроенные элементы не могут принимать transform. Так что если вам это нужно, следует использовать inline-block.

Когда использовать inline-block?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Колонки-потомки, которые не разрываются посредине

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

Это странная уловка, которую я не могу сказать, что на 100% понимаю, но если вы добавите display: inline-block; для этих блоков (и, вероятно, width: 100%; — убедитесь, что они остаются по ширине столбца), то они не разорвутся и отступы будут сохранены.

Демонстрация

Быстрый способ сделать список горизонтальным

Это был еще один мега-популярный ответ на мой оригинальный твит. Элементы списка укладываются вертикально, как элементы уровня блока. Они на самом деле не блоки. Они являются display: list-item;, что на самом деле важно, как мы их видим. Популярный вариант использования — «когда я хочу выложить список по горизонтали».

Итак, у вас есть список…

<ul> <li>Three</li> <li>Little</li> <li>Piggies</li> </ul>

<ul>

  <li>Three</li>

  <li>Little</li>

  <li>Piggies</li>

</ul>

Вы хотите разместить их подряд…

li { display: inline-block; }

li {

  display: inline-block;

}

И вы получили это.

Я быстро прослушал это в VoiceOver, и список inline-block по прежнему объявляется как список, но не объявляются пункты, что имеет смысл, поскольку их там нет. В том-то и дело с изменением самих display элементов списка list-item: они теряют свою, хм, списочность.

Альтернативой было бы сделать родительский контейнер flexbox…

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

Демонстрация

Центрированные списки

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

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

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

ul { width: max-content; margin: 0 auto; text-align: left; }

ul {

  width: max-content;

  margin: 0 auto;

  text-align: left;

}

Есть еще одна сложная вещь с inline-block. Как и элементы inline, любой пробел между ними по сути представляет собой пространство. Таким образом, два элемента inline-block шириной 50% не помещаются на линии, если между ними есть пробелы. Хорошо, что есть хитрости, чтобы это исправить.

Я говорю «привык», потому что, если бы вы собирались сегодня создать систему столбцов, вы почти наверняка использовали бы flexbox или grid — или вообще не создавали бы «систему», потому что простое использование их синтаксиса в значительной степени сводит на нет необходимость система в первую очередь.

Автор: Chris Coyier

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Когда использовать inline-block?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Когда использовать inline-block?

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Вёрстка | WebReference

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

block, inline и inline-block

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

  • block (блочные). Ширина соответствует размеру родителя и для блока можно задать ширину и высоту. Высота определяется содержимым.
  • inline (строчные). Ширина и высота определяется содержимым и нельзя задать ширину и высоту. Думайте об этом как о плавающем в абзаце слове.
  • inline-block (строчно-блочные). Такой же, как и block, за исключением того, что ширина определяется содержимым.

Ниже представлены элементы каждого из трёх типов display со следующим дополнительным CSS, который применяется ко всем элементам:

* {
  background: #eee;
  border: .125em solid;
  margin-bottom: .5em;
  padding: .5em
}

Block

Block

Inline Inline Inline Inline Inline Inline Inline Inline Inline

Block

Block

Inline block

 

Inline block

 

Inline block

 

Установить ширину в 20%

Следует отметить одну вещь — это разница между inline и inline-block. У строчных элементов padding отображается как .5em, а border как .125em, но только левые и правые из них (а не верхние и нижние) на самом деле влияют на расположение. В то время элементы inline-block меняют положение самих себя в макете из-за padding и border, подобно блочным элементам.

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

Горизонтальная прокрутка с inline-block

Разделы с горизонтальной прокруткой могут оказаться сложными. К счастью, это то место, где может помочь inline-block.

Скажем, я хочу отобразить код с цветом фона, который применяется к каждой строке текста при наведении на неё курсора.

body {    background: red /* Я знаю, это странно когда вся страница красная, но иногда это то, что вам просто надо сделать... */}

Если вы прокрутите вправо, то увидите, что цвет строки при наведении не распространяется до конца вправо. Это потому, что каждая строка обёрнута блочным элементом, размер которого совпадает с шириной родителя, а не с шириной прокрутки своего родителя.

После добавления элемента inline-block, которым оборачиваются все строки, мы получим желаемую прокрутку и элементы строки (всё ещё block) теперь заполняют ширину этого элемента совпадающей с шириной прокрутки всего блока с кодом. Это потому, что размер содержимого в данном случае — это самая длинная строка.

body {    background: red /* Я знаю, это странно когда вся страница красная, но иногда это то, что вам просто надо сделать... */}

html и body

Элементы html и body прямоугольны, как и любые другие элементы на странице. Мы рассмотрим их подробнее дальше, но сейчас просто знайте, что оба они блочные.

Таблицы

Таблицы безумны и в соответствующей главе мы их рассмотрим подробнее. Но относительно вёрстки думайте о таблицах как об элементах inline-block, но с одним особым свойством: дочерний table-cell может центрировать свой контент по вертикали.

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

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

Центрирование по вертикали при неизвестной высоте

Центрирование по вертикали с помощью таблицы проще не бывает.

Но если вы для этой цели используете таблицу (и не отображаете табличные данные), вместо таблицы вы должны использовать другой элемент (<div>, например) и установить для него свойство display как table, чтобы имитировать поведение таблицы.

<style>
.vertical-outer {
  display: table;
  height: 10em
}
.vertical-inner {
  display: table-cell;
  vertical-align: middle
}
</style>

<div>
  <div>
  <p>Я по центру и это даже не смешно!</p>
  </div>
</div>

Вот и всё!

В качестве отступления, центрировать что-то по вертикали тривиально, когда вам известна высота. Вначале позиционируем элемент, затем задаём top и bottom с одинаковым значением (0 работает), ставим желаемый height, а затем устанавливаем margin-top и margin-bottom как auto.

Выравнивание текста

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

Теперь немного магии.

Сетка с text-align: justify

Поскольку элементы inline-block рассматриваются более или менее как текст, вы можете использовать text-align: justify в списке элементов inline-block, чтобы создать структуру сетки.

<style>
.grid {
  border: .125rem solid;
  text-align: justify;
  font-size: 0;
  padding: 4% 4% 0 4%
}

.box {
  font-size: 1rem;
  display: inline-block;
  background: #eee;
  border: .125em solid;
  width: 30%;
  padding: 2%
}

/* Всё, кроме последних трёх блоков */
.box:nth-last-child(n+5) {
  margin-bottom: 4%
}

.break {
  display: inline-block;
  width: 30%;
  height: 0
}
</style>

<div>
  <div>Колонка</div>
  <div>Колонка</div>
  <div>Колонка</div>
  <div>Колонка</div>
  <div>Колонка</div>
  <div>Колонка</div>
  <div></div>
</div>

Колонка

 

Колонка

 

Колонка

 

Колонка

 

Колонка

 

Колонка

  

ширина: 30%

Изменяйте ширину блоков и заметьте, что text-align: justify сохраняет сетку нетронутой.

float

Свойство float настолько безумно, что о нём следует сказать отдельно.

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

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

В то же время, вы можете прочитать об отношении между display, position и float в спецификации CSS2.

Позиционирование

Вот где начинается настоящее веселье.

Элемент называется «позиционированным», если у него свойство position равно любому значению, кроме static.

Когда элемент позиционирован, он выкладывается в соответствии со значениями, заданных свойствами top, bottom, left и right.

Это означает что данные свойства не только устанавливают положение (или движение) элемента, они также могут изменить размеры элементов. Например, при position равным absolute или fixed вы можете установить top и bottom и по существу навязать фиксированную высоту элементу. Приоритет здесь может оказаться довольно сложным, но, как правило, если вы укажите top, bottom и height для позиционированного элемента, то значение height игнорируется.

Свойство position может принимать следующие значения:

  • static. По умолчанию. Любые свойства top, right, bottom или left игнорируются.
  • absolute. Элемент будет удалён из своей исходной позиции в макете и позиционирован относительно ближайшего позиционированного родителя.
  • fixed. Элемент будет удалён из своей исходной позиции в макете и позиционирован относительно окна. На мобильных устройствах с зумом может быть неопределённое поведение.
  • relative. В отличие от абсолютного или фиксированного положения, элемент остаётся в исходном месте макета и свойства top, right, bottom или left только выталкивают его из этого положения.

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

  • Элементы absolute и fixed не являются частью обычной схемы документа. Когда меняются их размеры, это затрагивает только их дочерние элементы (небольшим исключением является то, что абсолютно позиционируемые элементы могут вызвать прокрутку и это повлияет на расположение других элементов на странице).
  • Элементы static и relative являются частью макета. Когда они меняются, это влияет на их соседей.
  • Относительные элементы, которые сдвигаются через top, right, bottom или left, не влияют на соседей. Вместо этого, эти соседи действуют так, словно их никто не сдвигал с исходного положения (исключение с прокруткой также действует и здесь).
  • Так называемый относительный элемент не должен сбивать с толку, потому что дочерние элементы позиционируются «относительно» него. Скорее всего, такое название описывает, что вы можете сдвинуть элемент «относительно» его исходного положения.

А теперь снова немного магии.

100% top, bottom, left или right

Позиционирование дочернего элемента за пределами его родителя немного сложнее.

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

Например:

.parent {
  position: relative;
  text-align: center;
  padding: 1.25em;
  background: #eee
}

.child {
  position: absolute;
  height: 2.5em;
  top: -2.5em;
  right: 0;
  line-height: 2.5em;
  background: #444;
  color: #fff;
  padding: 0 .625em
}

Обратите внимание на следующие две строки CSS:

height: 2.5em;
top: -2.5em;

Эта часть не идеальна, потому что не DRY и потому что мы должны указать высоту. При возможности лучше не задавать фиксированные значения в CSS. Чем большим вещам вы зададите размеры по их содержимому, тем лучше, потому что это означает, что ваш дизайн является более гибким, поддерживает больше сценариев использования и меньше вероятность появления будущих ошибок.

Так что мы можем сделать? Использовать в качестве значения 100%.

.parent {
  position: relative;
  text-align: center;
  padding: 1.25em;
  background: #eee
}
.child {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: #444;
  color: #fff;
  padding: .625em
}

Заметьте, что в этой версии мы упростили padding и line-height, потому что дочерний блок определяет размер по своему содержимому, а не наоборот.

Трансформация

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

Дальнейшее чтение

Автор и редакторы

Автор: Адам Шварц

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Как научиться разрабатывать сайтыМакет

CSS - встроенный блок


Дисплей: встроенный блок Value

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

Также с display: inline-block , верхнее и нижнее поля / отступы соблюдаются, но с дисплеем : встроенный - нет.

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

В следующем примере показано различное поведение дисплея : встроенный , дисплей : встроенный блок и дисплей : блок :

Пример

span.a {
дисплей: встроенный; / * значение по умолчанию для диапазона * /
ширина: 100 пикселей;
высота: 100 пикселей;
отступ: 5 пикселей;
граница: сплошной синий 1px;
цвет фона: желтый;
}

пролет.b {
дисплей: встроенный блок;
ширина: 100 пикселей;
высота: 100px;
отступ: 5 пикселей;
граница: 1 пикс. сплошной синий;
цвет фона: желтый;
}

пролет.c {
дисплей: блок;
ширина: 100px;
высота: 100 пикселей;
отступ: 5 пикселей;
граница: 1 пиксель сплошного синего цвета;
цвет фона: желтый;
}

Попробуй сам "

Использование встроенного блока для создания навигационных ссылок

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

Пример

.nav {
background-color: желтый;
список-стиль-тип: нет;
выравнивание текста: центр;
отступ: 0;
маржа: 0;
}

.nav li {
дисплей: встроенный блок;
размер шрифта: 20 пикселей;
набивка: 20px;
}

Попробуй сам "
.

html - CSS: Отображение: встроенный блок;

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

    .

    CSS свойство отображения


    Пример

    Использование различных отображаемых значений:

    p.ex1 {display: none;}
    p.ex2 {display: inline;}
    p.ex3 {display: block;}
    p.ex4 {display: inline-block;}

    Попробуй сам "

    Дополнительные примеры "Попробуйте сами" ниже.


    Определение и использование

    Свойство display определяет поведение отображения (тип окна рендеринга) элемента.

    В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей по умолчанию браузера / пользователя. В значение по умолчанию в XML является встроенным, включая элементы SVG.

    Значение по умолчанию: ?
    Унаследовано: нет
    Анимация: нет. Прочитать о animatable
    Версия: CSS1
    Синтаксис JavaScript: объект .style.display = "нет" Попытайся

    Поддержка браузера

    Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

    Объект
    дисплей 4,0 8,0 3.0 3,1 7,0

    Примечание: Значения «flex» и «inline-flex» требуют, чтобы префикс -webkit- работал в Safari.

    Примечание. «display: contents» не работает в Edge / Internet Explorer.



    Синтаксис CSS

    Стоимость недвижимости

    Значение Описание Играй
    рядный Отображает элемент как встроенный элемент (например, ).Никакие свойства высоты и ширины не будут иметь никакого эффекта Играй »
    блок Отображает элемент как блочный (например,

    ). Это начинается на новая строка и занимает всю ширину

    Играй »
    содержание Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемент на следующий уровень в DOM Играй »
    шлейф Отображает элемент как гибкий контейнер на уровне блока Играй »
    сетка Отображает элемент как контейнер сетки на уровне блока Играй »
    рядный блок Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины Играй »
    линейный гибкий Отображает элемент как гибкий контейнер встроенного уровня Играй »
    линейная сетка Отображает элемент как контейнер сетки встроенного уровня Играй »
    встроенный стол Элемент отображается как таблица встроенного уровня Играй »
    список Пусть элемент ведет себя как элемент
  1. Играй »
    обкатка Отображает элемент как блочный или встроенный, в зависимости от контекста Играй »
    стол Пусть элемент ведет себя как элемент
    Играй »
    заголовок таблицы Пусть элемент ведет себя как элемент
    Играй »
    таблица-столбец-группа Пусть элемент ведет себя как элемент
    Играй »
    таблица-заголовок-группа Пусть элемент ведет себя как элемент
    Играй »
    нижний колонтитул группы Пусть элемент ведет себя как элемент
    Играй »
    таблица-строка-группа Пусть элемент ведет себя как элемент
    Играй »
    таблица-ячейка Пусть элемент ведет себя как элемент Играй »
    таблица-столбец Пусть элемент ведет себя как элемент
    Играй »
    стол-ряд Пусть элемент ведет себя как элемент
    Играй »
    нет Элемент полностью удален Играй »
    начальный Устанавливает для этого свойства значение по умолчанию.Читать примерно начальная Играй »
    наследство Наследует это свойство от своего родительского элемента. Читать про наследство

    Другие примеры

    Пример

    Демонстрация использования значения свойства contents. В следующих Например, контейнер .a исчезнет, ​​а дочерние элементы (.б) дочерние элементы элемента на следующий уровень в DOM:

    .a {
    дисплей: содержание;
    граница: 2px сплошной красный;
    цвет фона: #ccc;
    отступ: 10 пикселей;
    ширина: 200 пикселей;
    }

    .b {
    граница: сплошной синий цвет 2 пикселя;
    цвет фона: светло-голубой;
    отступ: 10 пикселей;
    }

    Попробуй сам "

    Пример

    Демонстрация того, как использовать значение наследуемого свойства:

    body {
    display: встроенный;
    }

    p {
    display: наследование;
    }

    Попробуй сам "

    Пример

    Установить направление некоторых гибких элементов внутри элемента

    в обратном направлении заказ:

    div {
    дисплей: гибкий;
    flex-direction: ряд-реверс;
    }

    Попробуй сам "

    Связанные страницы

    Учебник

    CSS: Отображение CSS и видимость

    Ссылка на HTML DOM: свойство отображения


    .

    html - Как центрировать объекты - display: block / inline-block

    Переполнение стека
    1. Около
    2. Товары
    3. Для команд
    1. Переполнение стека Общественные вопросы и ответы
    2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
    3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
    4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
    5. Реклама Обратитесь к разработчикам и технологам со всего мира
    .

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *