Дисплей блок и инлайн что общего
display является одним из наиболее важных свойств CSS для разметки. Большинство из нас использовали значения block , inline CSS и none . Также часто используются table и inline block CSS . Новым и весьма полезным является значение flex , потому что оно было создано специально для разметки.
При рассмотрении свойства display нельзя не упомянуть дерево блоков . Браузер анализирует CSS и выводит дерево блоков, которое представляет собой структуру форматирования отображаемого документа. Свойство display определяет тип отображения блоков.
Заключение
Описание inline CSS и других значений display заняло намного больше времени, чем первоначально ожидалось. Я действительно взволнован по поводу новых возможностей, которые уже очень скоро окажутся в нашем распоряжении. С их помощью мы сможем создавать уникальные макеты без необходимости прибегать к хакам. Я надеюсь, что эта статья мотивирует вас узнать больше о макетах CSS .
Пожалуйста, опубликуйте свои отзывы по текущей теме материала. За комментарии, лайки, дизлайки, подписки, отклики огромное вам спасибо!
По сравнению с display: inline , основным отличием является то, что display: inline-block позволяет задавать ширину и высоту элемента.
Кроме того, с display: inline-block , верхний и нижний поля/обивка уважают, но с display: inline они не являются.
По сравнению с display: block , основным отличием является то, что display: inline-block не добавляет разрыв строки после элемента, поэтому элемент может сидеть рядом с другими элементами.
В следующем примере демонстрируется разное поведение display: inline , display: inline-block и display: block :
2. Блочные элементы и блочные контейнеры
Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display , такие как block , list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.
Блочные элементы могут размещаться непосредственно внутри элемента . Они создают разрыв строки перед элементом и после него, образуя прямоугольную область, по ширине занимающую всю ширину веб-страницы или блока-родителя.
Блочные элементы могут содержать как строчные, так и блочные элементы, но не оба типа элементов сразу. При необходимости, строки текста, принадлежащие блочному контейнеру, могут быть обёрнуты анонимными контейнерами, которые будут вести себя внутри блока как элементы со значением display: block; , а строчные элементы обёрнуты элементом
. Блочные элементы могут содержаться только в пределах блочных элементов.
Элемент
относится к блочным элементам, но он не должен содержать внутри себя другой элемент
, а также любой другой блочный элемент.
Анонимные блоки уровня блока
Как говорилось выше, блочные элементы могут содержать только блочные или только строчные элементы. В случае смешанного контента, когда блочный элемент одновременно содержит текстовое содержимое и другой блочный элемент, алгоритм визуального форматирования добавляет дополнительную обёртку для текстового содержимого — так называемый анонимный блок. Анонимный блок не связан ни с одним элементом. Поскольку такой контейнер не имеет названия, то к нему нельзя применить CSS-стили для оформления. Анонимные блоки наследуют свойства окружающего блока, а не наследуемые свойства принимают первоначальное значение.
Рис. 1. Анонимные блоки уровня блока
display css - свойства, которые мы уже достаточно хорошо знаем
Значения свойства display , которые мы постоянно используем - на самом деле сокращения. Например, block - сокращение от block flow . Полный список можно найти в спецификации .
Для всех элементов задано значение свойства display по умолчанию, но оно может быть переопределено.
display inline
Элемент генерирует один или несколько встроенных блоков. Их можно считать дополнением к блочным элементам.
display: block CSS - что это?
Генерирует поле для блочного элемента. Все блочные элементы начинаются с новой строки и растягиваются по ширине контейнера.
6. Минимальная и максимальная ширина: свойства min-width и max-width
Свойства min-width и max-width позволяют ограничивать ширину содержимого до определенного диапазона. Значения не могут быть отрицательными. Для min-width значение по умолчанию 0 , для max-width — none .
Свойства не наследуются.
min-width/max-width | |
---|---|
Значения: | |
длина | Задает фиксированную минимальную или максимальную используемую ширину. |
% | Указывает процент для определения используемого значения. Процент рассчитывается относительно ширины содержащего блока. |
none | Означает отсутствие ограничений ширины блока. |
inherit | Наследует значение свойства от родительского элемента. |
Используйте встроенный блок для создания навигационных ссылок
Одним из распространенных применений display: inline-block является создание горизонтальных навигационных ссылок:
8. Минимальная и максимальная высота: свойства min-height и max-height
Иногда полезно ограничить высоту элементов определенным диапазоном. Свойства min-height и max-height предлагают эту функциональность.
Свойства не наследуются.
min-height/max-height | |
---|---|
Значения: | |
длина | Задает фиксированную минимальную или максимальную вычисленную высоту в единицах длины. Значения не могут быть отрицательными. |
% | Указывает процент для определения используемого значения. Процент рассчитывается относительно высоты содержащего блока. Если высота содержащего блока не указана явно (т.е. зависит от высоты содержимого) и этот элемент не является абсолютно позиционированным, процентное значение обрабатывается как 0 для min-height или none для max-height . |
none | Отсутствие ограничений высоты блока, только для max-height . |
inherit | Наследует значение свойства от родительского элемента. |
9. Расчет высоты строки: свойства line-height и vertical-align
Как описано выше, пользовательские агенты (браузеры) передают блоки встроенного уровня в вертикальный стек линейных блоков. Высота линейного блока определяется следующим образом:
- Высота каждого встроенного прямоугольника в линейном блоке вычисляется. Для замещаемых, inline-block и inline-table элементов это высота их области поля (margin box).
- Блоки уровня строки выравниваются вертикально в соответствии со значением свойства vertical-align . Если они выровнены по верху или по низу, они должны быть выровнены так, чтобы минимизировать высоту линейного блока.
Высота линейного блока — это расстояние между самой верхней и самой нижней частью блока. Пустые встроенные элементы генерируют пустые встроенные блоки, но эти блоки по-прежнему имеют поля, отступы, границы, высоту строки и, таким образом, влияют на эти вычисления также, как и элементы с содержимым.
В элементе уровня блока, содержимое которого состоит из элементов встроенного уровня, свойство line-height определяет минимальную высоту линейных блоков внутри элемента. Минимальная высота состоит из минимальной высоты над базовой линией и минимальной глубины под ней.
Для элементов уровня строки свойство line-height указывает высоту, которая используется при расчете высоты линейного блока.
Отрицательные значения не допустимы.
line-height | |
---|---|
Значения: | |
normal | Сообщает пользовательским агентам установить «разумное» значение на основе шрифта элемента. Значение по умолчанию. Когда элемент содержит текст, отображаемый более чем одним шрифтом, пользовательские агенты могут определить значение normal в соответствии с наибольшим размером шрифта. |
длина | Значение задаётся в единицах длины, создавая фиксированное значение высоты строки. Если задать значение меньше единицы, смежные строки будут находить друг на друга. |
число | Используемое значение свойства — это число, умноженное на размер шрифта элемента. |
% | Вычисленное значение свойства — это процент, умноженный на вычисленный размер шрифта элемента. |
inherit | Наследует значение свойства от родительского элемента. |
Рис. 4. Контейнер строки
Свойство vertical-align влияет на вертикальное позиционирование в линейном блоке элементов уровня строки: display: inline и display: table-cell . Значения этого свойства имеют другие значения в контексте таблиц.
Свойство не наследуется.
vertical-align | |
---|---|
Значения: | |
baseline | Выравнивает базовую линию элемента по базовой линии его родителя, совмещая среднюю линию элемента со средней линией родительского элемента. |
sub | Делает элемент подстрочным (аналогично с элементом ). Величина понижения элемента может меняться в зависимости от браузера пользователя. |
super | Делает элемент надстрочным (аналогично с элементом ). При этом значения sup и super не меняют размер шрифта, по умолчанию текст надстрочного и подстрочного элемента имеет такой же размер, как и текст родительского элемента. |
top | Верхний край элемента совмещается с верхним краем самого высокого элемента в линии. |
text-top | Верхний край элемента совмещается с верхним краем шрифта родительского элемента. |
middle | Средняя линия элемента (обычно изображения) совмещается с линией, проходящей через середину родительского элемента. |
bottom | Нижний край элемента совмещается с нижним краем самого низкого элемента в линии. |
text-bottom | Нижний край элемента совмещается с нижним краем шрифта родительского элемента. |
% | Не позволяет устанавливать middle , вычисляется как часть line-height элемента, а не его родителя, т.е. если установить значение vertical-align , равное 50% для элемента с line-height равным 20рх , то базовая линия элемента поднимется на 10px . |
длина | Устанавливает значение в единицах длины, перемещая элемент на заданное расстояние. |
inherit | Наследует значение свойства от родительского элемента. |
Рис. 5. Свойство vertical-align
Малоизвестные и экспериментальные значения
Пример
.nav <
background-color: yellow;
padding: 15px;
list-style-type: none;
text-align: center;
>
.nav li display: inline-block;
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
>
display: none CSS
Удаляет элемент и все его дочерние элементы из потока документа. Документ отображается так, как если бы элемент в нем никогда не существовал. Пространство, которое он занимает, распределяется между другими элементами.
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Свойства flex-элементов
order - указывает порядок, в котором размещаются элементы в соответствии с увеличением значения свойства order. Элементы с одинаковым значением размещаются в соответствии с исходным порядком. Полный список значений order и inline CSS .
flex-grow - определяет, могут ли элементы расширяться, если вокруг них есть свободное пространство. Значение свойства определяет долю пространства, которую может занять элемент. Полный список значений flex-grow .
flex-shrink - определяет, насколько элементы могут сокращаться в случае, если недостаточно свободного пространства. Значение свойства определяет пространство, которое элемент может освободить. Полный список значений flex-shrink .
flex-basis - определяет размер элемента по умолчанию до того, как доступное пространство будет распределяться между всеми flex-элементами. Полный список значений flex-basis .
flex - сокращенное свойство от flex-grow, flex-shrink и flex-basis, именно в таком порядке. Полный список значений flex .
align-self - позволяет переназначать выравнивание одиночного гибкого элемента. Полный список значений align-self .
Модель визуального форматирования CSS в деталях
Вертикальное центрирование с table-cell
Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.
Это можно использовать для центрирования:
CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.
При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .
Пример
Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы. С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов и ).
Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 эти понятия заменены более сложным набором категорий контента, согласно которым каждый HTML-элемент должен следовать правилам, определяющим, какой контент для него допустим.
Адаптивный пошаговый обработчик
Одним из компонентов, который мне в свое время пришлось разрабатывать, был числовой пошаговый обработчик для выбора различных типов пассажиров. У меня был статический файл Photoshop с мобильным шаблоном и шаблоном для стационарных компьютеров. Но между ними было несколько неучтенных размеров, на которых макет " ломался ".
Проблема была связана с текстом в скобках, который не разбивался красиво. Так что мне пришлось обработать кучу медиа-запросов, чтобы настроить отображение соответствующих элементов при различной ширине окна.
1. Модель визуального форматирования
HTML-документ организован в виде дерева элементов и текстовых узлов. Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства.
Каждый блок в дереве представляет соответствующий элемент или псевдоэлемент, а текст (буквы, цифры, пробелы), находящийся между открывающим и закрывающим тегами, представляет содержимое текстовых узлов.
Чтобы создать дерево блоков, CSS сначала использует каскадирование и наследование, позволяющие назначить вычисленное значение для каждого css-свойства каждому элементу и текстовому узлу в исходном дереве.
Затем для каждого элемента CSS генерирует ноль или более блоков в соответствии со значением свойства display этого элемента. Как правило, элемент генерирует один основной блок, который представляет самого себя и содержит свое содержимое. Некоторые значение свойства display , например, display: list-item; , генерируют блок основного блока и блок дочернего маркера. Другие, например, display: none; , приводят к тому, что элемент и/или его потомки вообще не генерируют блоки.
Положение блоков на странице определяется следующими факторами:
- размером элемента (с учётом того, заданы они явно или нет);
- типом элемента (строчный или блочный);
- схемой позиционирования (нормальный поток, позиционированные или плавающие элементы);
- отношениями между элементами в DOM (родительский — дочерний элемент);
- внутренними размерами содержащихся изображений;
- внешней информацией (например, размеры окна браузера).
Пример
Такой же эффект может быть достигнут с помощью значения inline-block свойства display (Обратите внимание, что clear не требуется):
5. Ширина содержимого: свойство width
Свойство width определяет ширину содержимого блока.
Это свойство не применяется к незамещаемым строчным элементам display: inline; . Ширина содержимого встроенных блоков определяется шириной отображаемого содержимого внутри них. Встроенные блоки сливаются в линейные блоки. Ширина линейных блоков определяется шириной содержащего блока, но может быть уменьшена из-за наличия свойства float .
Отрицательные значения не допускаются.
Свойство не наследуется.
width | |
---|---|
Значения: | |
длина | Ширина элемента задается в единицах длины, например, px , em и т.д. |
% | Вычисляется относительно ширины содержащего блока. Для абсолютно позиционированных элементов процент вычисляется с учетом ширины области отступов padding содержащего блока. |
auto | Ширина вычисляется в зависимости от значений других свойств. Значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.
Как и инлайн-элемент:
- Располагается в строке.
- Размер устанавливается по содержимому.
Во всём остальном – это блок, то есть:
- Элемент всегда прямоугольный.
- Работают свойства width/height .
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.
Пример
span.a <
display: inline; /* the default for span */
width: 70px;
height: 70px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
>
span.b display: inline-block;
width: 70px;
height: 70px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
>
span.c display: block;
width: 70px;
height: 70px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
>
4. Строчно-блочные элементы
display inline block - что значит в CSS?
Создается позиция для блочного элемента, но все поле ведет себя как, встроенный элемент. Попробуйте открыть приведенный выше пример и изменить ширину окна, чтобы лучше понять, как это работает.
Значения table-*
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .
Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.
Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.
Основные термины CSS grid
Сеточный контейнер - аналогично концепции гибкого контейнера, применив к элементу ` display: grid; ` мы делаем его дочерние элементы сеточными элементами.
Сеточный элемент - если к родительскому элементу применено ` display: grid; ` то этот элемент считается сеточным элементом. Дочерние элементы сеточного элемента не считаются сеточными.
Трек сетки - это может быть либо столбец или ряд сетки.
Линия сетки - линии, которые определяют структуру сетки. Вы можете представить их как линии между треками сетки.
Ячейки сетки - одиночные блоки сетки, ограниченные соседними горизонтальными и вертикальными линиями.
Пространство сетки - это крутая часть. Сетка позволяет определить область, состоящую из нескольких ячеек сетки.
Вы можете прямо сейчас перейти к Сеткам в примерах и найти там множество примеров использования сеток.
Значения list-item, run-in и flex
У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .
Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :
Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .
Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:
Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module
В чем именно разница между значениями inline и inline-block CSS display ?
Представьте себе элемент внутри . Если вы зададите элементу высоту 100 пикселей и, например, красную границу, он будет выглядеть так:
дисплей: встроенный
дисплей: встроенный блок
дисплей: блок
Элементы с display:inline-block похожи на display:inline элементы, но могут иметь ширину и высоту . Это означает, что вы можете использовать элемент встроенного блока как блок, перемещая его в тексте или других элементах.
Краткое описание различий поддерживаемых стилей:
- рядный : только margin-left , margin-right , padding-left , padding-right
- встроенный блок : margin , padding , height , width
Отличная интуиция. Единственная разница в том, что атрибут высоты встроенных элементов не может быть установлен?
@ user2316667 и @OscarCalderon: также для встроенных элементов не нужны вертикальные поля и отступы, и следующий элемент будет размещен на той же строке (без разрыва строки после него). элементы блока, такие как as p , div получают линию всей ширины (принудительный разрыв строки), но соблюдают ширину / высоту и все горизонтальные / вертикальные отступы / поля. Элементы встроенного блока имеют то же поведение, что и блок, но без полного разрыва строки (другие элементы могут быть размещены рядом с ними)
padding-top и padding-right также влияют на эффект отображения встроенного элемента, вызывая некоторый беспорядок.
display: inline; - это режим отображения для использования в предложении. Например, если у вас есть абзац и вы хотите выделить одно слово, вы должны:
По умолчанию элемент имеет display: inline; , потому что этот тег всегда используется в предложении. По умолчанию
элемент имеет display: block; , потому что это не предложение и не предложение, это блок предложений.
Элемент с display: inline; не может иметь a, height a width или вертикаль margin . Элемент с display: block; может иметь width , height и margin .
Если вы хотите добавить height к элементу, вам необходимо установить для этого элемента значение display: inline-block; . Теперь вы можете добавить height к элементу и любому другому стилю блока ( block части inline-block ), но он будет помещен в предложение ( inline часть inline-block ).
10. Изменение блочной модели: свойство box-sizing
Свойство box-sizing переключает блочную модель с фиксированных размеров длины и ширины на content-box и border-box . Это влияет на интерпретацию всех свойств, определяющих размеры, включая flex-basis .
Свойство не наследуется.
box-sizing | |
---|---|
Значения: | |
content-box | Это поведение ширины и высоты, как указано в CSS2.1. Заданные ширина и высота (и соответствующие min/max-свойства) применяются к ширине и высоте области содержимого элемента. Поля padding и рамка border элемента располагаются за пределами указанной ширины и высоты. Значение по умолчанию. |
border-box | Любые padding или border , заданные для элемента, размечаются и отрисовываются внутри указанных значений ширины и высоты. Ширина и высота содержимого вычисляются путем вычитания ширины границ и полей соответствующих сторон из указанных свойств ширины и высоты. Значение auto свойств width и height не зависит от свойства box-sizing и всегда устанавливает размер блока с содержимым. Сумма padding и border не должна превышать заданные значения width и height , в противном случае размер области содержимого будет равен нулю. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Некоторые HTML-элементы, например, , по умолчанию имеют box-sizing: border-box .
Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.
Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
display: flex;
Введение режима flexbox или CSS Flexible Box , ознаменовало момент, когда мы получили спецификацию, которая предназначена для размещения контента в браузере.
Разметка контента в интернете изменилась не значительно. Когда дизайнеры хотели создать какой-нибудь креативный макет, первое что они использовали, это табличную верстку.
И когда появился CSS , мы перешли на плавающие макеты, вкладывая элементы в различные div , чтобы они обтекали и смещались, как нам нужно а . Плавающие макеты все еще широко распространены, но пройдет совсем немного времени и flexbox и grid станут преобладающим методом разметки:
Объявляя для элемента display в CSS: flex , inline flex CSS , мы преобразуем его в гибкий контейнер, и его дочерние элементы становятся гибкими элементами. Это не распространяется далее, то есть гибкие свойства не распространяются на элементы ниже, чем его дочерние элементы. И flex-контейнер , и flex-элементы имеют соответствующие им свойства.
Новые виды блоков
Автор спецификаций Flexbox и Grid , сделал очень меткое замечание по поводу новых режимов отображения:
inline flex CSS предназначен для одномерных макетов, которые можно уложить в одну строку.
Grid предназначен для двухмерных макетов. Он может быть использован в качестве замены менее гибкого flexbox (сетка с одним столбцом / строкой действует очень похоже на flexbox), но это не задействует всех его возможностей.
display: grid;
Сетки дают возможность создавать сеточные системы и контролировать расположение элементов через CSS , что позволяет четче разделить задачи с HTML . При использовании с медиа-запросами CSS-сетки становятся мощным дополнением к используемому набору инструментов, когда речь идет о создании гибких макетов.
Текущую версию CSS Grid Layout Module Level 1 мы запустили в 2011 году, как рабочий проект. Как и в случае с flexbox , эта спецификация возникла вследствие растущей потребности дизайнеров получить в свое распоряжение надлежащий метод для разметки контента без ущерба для семантики HTML .
Обратите внимание, что CSS-сетки поддерживаются не во всех браузерах. Хотя Microsoft Edge и Internet Explorer поддерживают более старую версию спецификации через префикс -ms- . Когда-то так было и с inline block CSS .
После непоследовательной реализации спецификации flexbox разработчики CSS-сеток решили применить другой подход. Создатели браузеров используют префиксы, чтобы добавить в них экспериментальные функции для разработчиков с целью проверки. Это помогает в процессе уточнения спецификации и отработке несоответствий, прежде чем спецификация станет официальной.
Вместо этого CSS grid разрабатывалась с помощью переключателей. Функция должна быть вручную включена разработчиками. В Google Chrome и Opera нужно перейти к chrome://flags и opera://flags соответственно и включить « экспериментальные функции веб-платформы ». В Firefox нужно перейти к about:config и установить для layout.css.grid.enabled и layout.css.grid-template-subgrid-value.enabled - true .
display: list-item
display: run-in;
Устанавливает элемент как встроенный или блочный в зависимости от контекста.
Помните макеты на основе таблиц?
Несмотря на то, что большинство из нас больше не использует табличную верстку, display: table CSS и inline table CSS может оказаться полезно в некоторых случаях. Например, если вы хотите выводить таблицы только на более широких макетах, а для меньших экранов хотите сохранить стандартное расположение блоков. Этого можно достигнуть с помощью комбинации медиа-запросов и свойства display .
table | Соответствует HTML-элементу
3. Строчные элементы и строчные контейнерыВстроенные (строчные) элементы генерируют внутристрочные контейнеры. Они не формируют новые блоки контента. Значения свойства display , такие как inline и inline-table делают элементы строчными. Рис. 2. Отличие воздействия CSS-свойств padding и margin на строчные и строчно-блочные элементы Анонимные блоки уровня строкиЛюбой текст, содержащийся непосредственно внутри блочного элемента и не внутри строчного элемента, рассматривается как анонимный строчный элемент. Также как и анонимные блоки уровня блока они наследуют свойства родительского блока, а не наследуемые свойства принимают первоначальное значение. Рис. 3. Анонимный блок уровня строки Значение inline
Например, инлайновые элементы по умолчанию: , . Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML. Если расположить элементы вплотную – его не будет: Содержимое инлайн-элемента может переноситься на другую строку. При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является. Это проявляется, например, при назначении фона. Например, три прямоугольника подряд: Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки: Сетка коробокБыло возможно в течение длительного времени, чтобы создать сетку коробок, который заполняет ширину браузера и обертывания красиво (при изменении размера обозревателя), с помощью свойства float . Тем не менее, inline-block значение свойства display делает это проще! 7. Высота содержимого: свойство heightСвойство height определяет высоту содержимого блока. Это свойство не применяется к незамещаемым строчным элементам. Значения длины не могут быть отрицательными. Свойство не наследуется.
ПримерыСтарый способ-использование float (Обратите внимание, что нам также необходимо указать свойство clear для элемента после плавающих полей): display: ruby;Для начала стоит представить элемент . В двух словах, это элемент для отображения аннотаций на одной базовой линии с основным текстом. Используется, чтобы указать правильное произношение слов. Он довольно часто используется в восточно-азиатских языках, таких как китайский или японский. Существуют определенные общие черты между свойствами display: ruby и inline table CSS , но спецификация настоятельно предостерегает от применения значения ruby при отображении не-ruby элементов, таких как span, для вывода ruby-текста . Вместо этого лучше разметить контент с использованием HTML-элементов ruby , чтобы экранные дикторы и визуализаторы могли интерпретировать структуры ruby .
Свойства для flex-контейнераflex-direction - определяет главную ось и направление гибких элементов. Полный список значений flex-direction . Значение block
Это значение display многие элементы имеют по умолчанию: , заголовок , параграф . Блоки прилегают друг к другу вплотную, если у них нет margin . display: contents;Сам элемент не генерирует никаких блоков, но его дочерние и псевдо-элементы генерируют блоки в обычном режиме. При генерировании и укладке блоков элемент должен рассматриваться так, как если бы он был заменен в дереве документа на его дочерние и псевдо-элементы. - CSS Display Level Модуль 3 Читайте также:
|