что такое display block в css

Более современные значения

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

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

Объявляя display: flex; для элемента, он становится flex (гибким) контейнером, а его дочерние элементы становятся гибкими элементами этого контейнера. Свойства flex не распространяются на внуков этого элемента. Как гибкий контейнер, так и гибкие элементы имеют свои собственные гибкие свойства.

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

Обратите внимание, что CSS-сетка официально не реализована ни в одном браузере. Чтобы поддерживать ее, браузерам нужно указывать префиксы поставщиков и устанавливать флаги.

Экспериментальные значения (не должны использоваться в рабочем коде)

Обратите внимание, что это значение поддерживается только в Internet Explorer 11 и Opera Mini.

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

Суть этого значения заключается в том, что когда вы его используете для элемента, он исчезает из DOM, но все его потомки остаются и занимают свое пространство. Эта спецификация на данный момент поддерживается только в Firefox >59, Chrome >65, Safari 11.1.

Краткий итог

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

Источник

Параметры отображения html элементов на веб странице. CSS свойства visibility и display

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня рассмотрим группу стилевых атрибутов отвечающих за то как html элемент будет отображаться на web странице, будет ли он блочным или строчным, и будет ли отображаться вообще. В эту группу входят два css свойства display и visibility. Особенно важным свойством является display, его наиболее часто применяемые значения вы уже скорей всего встречали в CSS коде: display block, none или inline. Давайте рассмотрим все это подробнее не примерах.

Видимость html элементов — свойство visibility

Свойство стиля visibility предназначено для отображения или скрытия элемента на веб странице:

Атрибут может принимать три значения:

Ниже можно посмотреть как работает это свойство:

Наведи на меня курсором мыши!

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

В примере выше (область в прямоугольнике) изначально виден абзац с текстом «Наведи на меня курсором мыши!», а ниже под ним пустая область — это элемент p к которому применено правило CSS «visibility: hidden» и соответственно браузер делает его невидимым. Если навести курсор мыши на верхний абзац, то нижний абзац становится видимым, потому что в этом случае к нему применяется правило «visibility: visible».

Стили CSS для этого примера выглядят так:

Наведи на меня курсором мыши!

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

Первое правило CSS говорит браузеру, что хтмл элемент с атрибутом class равным el1 должен быть невидимым на странице. А второе CSS правило означает, что при наведении на элемент с атрибутом class равным el2 его соседний элемент с атрибутом class равным el1 должен стать видимым.

Свойство стиля CSS visibility применяется довольно редко, в основном только для создания подобных эффектов исчезающих и появляющихся элементов страницы.

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

Доступных значений у этого стиля довольно много:

Если кратко, то каждое значение оказывает на html элементы следующее действие:

Далее рассмотрим наиболее важные значения свойства display подробнее.

Делаем блочный элемент строчным — значения block и inline

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

При описании html тегов я часто обращал ваше внимание на тип тега — строчный он или блочный. От этого во многом зависит поведение элемента на веб странице: будет ли он стремиться занять всю ширину страницы и установить разрыв строки над и под элементом (блочные элементы), либо не будет (строчные элементы). За такое поведение элементов, как раз отвечает правило CSS display.

Узнать к какому типу по умолчанию относится тот или иной тег, можно на странице спецификации CSS «Default style sheet for HTML 4». В самом начале на этой странице перечислены все элементы, относящиеся к блочным, так как для них установлено правило display:block:

Для остальных элементов, если не указано иного, применяется правило display:inline.

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

Давайте рассмотрим такой пример:

Заголовок h1

В примере два элемента: один блочный (h1) и один строчный (span). Для наглядности каждый элемент залит своим фоном с помощью свойства background:

На скриншоте видно, что элемент заголовка h1, у которого по умолчанию display равен block, занимает всю доступную ему по ширине область страницы, не смотря на то, что содержащийся в нем текст заканчивается гораздо раньше. А элемент span, у которого значение display по умолчанию принимается равной inline, по горизонтали занимает ровно столько места сколько нужно для заключенного в нем контента.

В следующем примере сделаем из блочного элемента h1 строчный. Для этого в стилях добавим для него правило display:inline:

Заголовок h1

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

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

Заголовок h1

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

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

Динамика на html странице с помощью правила CSS — display none

Прописанное для любого элемента правило display:none удаляет его из документа и никак его не отображает. При этом для него даже не резервируется занимаемое место на веб странице, как это было с правилом visibility:hidden, рассмотренном выше. Веб страница формируется так словно элемента и не было на странице.

Значение «none» для правила display применяется в основном для реализации динамики на странице, используя селекторы псевдоклассов и псевдоэлементов. Например, используя псевдокласс hover, можно задавать правила, которые начинают работать только при наведении мыши на нужный html элемент.

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

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

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

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

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

Кроме списка правило display позволяет преобразовывать хтмл теги в таблицу и ее составные части. Для этого каждому элементу таблицы в html коде ставиться в соответствие свое значение дисплей: table, inline-table, table-caption, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, table-cell.

Таким образом с помощью правила display можно поменять уже имеющиеся на странице элементы на любые другие. При это не надо вносить изменения в сам html код, а достаточно просто изменить отображение тегов в браузере. Для этого достаточно внести пару строк в содержимое css файла и все.

На этом заканчиваю, не забывайте подписываться на обновления блога и нажимать на кнопочки социальных сетей! До новых встреч!

Источник

Введение в CSS вёрстку

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

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

Normal flow

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

По умолчанию ваш браузер выведет этот код следующим образом:

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

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

Примечание: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение).

Методы CSS, которыми вы можете управлять разметкой элементов:

Свойство display

Flexbox

Flexbox (сокращение от Flexible Box Layout) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство display: flex для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.

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

Примечание: Это было очень краткое введение в то что возможно во Flexbox, чтобы узнать больше см. нашу статью Flexbox.

Grid Layout

В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.

Примечание: Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью Grid Layout.

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

Floats

Делая элемент плавающим (float) мы меняем поведение этого элемента и элементов блочного уровня, следующих за ним в нормальном потоке. Элемент перемещается влево или вправо и удаляется из нормального потока ( normal flow ), а окружающий контент обтекает плавающий элемент.

Свойство float имеет четыре возможных значения:

В примере ниже мы задаём элементу

Примечание: Float полностью объяснён в нашем уроке по свойствам float и clear. До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все ещё можете встретить эти методы в интернете; мы рассмотрим их в уроке по устаревшим методам разметки.

Методы позиционирования

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

Существует пять типов позиционирования о которых вам следует знать:

Пример простого позиционирования

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

Этот HTML по умолчанию будет стилизован, используя следующий CSS:

Результат выглядит следующим образом:

Relative positioning

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

Добавление этого кода даст следующий результат:

Absolute positioning

Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краёв содержащего блока.

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

Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагается поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства top и left (en-US) имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по позиционированию.

Fixed positioning

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

Sticky positioning

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

Макет таблицы

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

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

Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в

Источник

Чем отличаются display block от inline и table css

display: block;

По умолчанию присвоен p, div, form, ul, h1 и т.д.

display: inline;

display: inline-block;

По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.

display: list-item;

По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство list-style. В примере выше маркер отсутствует, поскольку у li display отличный от list-item.

display: run-in;

Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.

display: table;

По умолчанию присвоен table.

display: inline-table;

Аналогичен display: inline-block.

display: table-row;

По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.

display: table-cell;

По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.

display: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)

По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.

display: none;

Элемент становится невидимым, не сохраняя занимаемое место.

10 комментариев:

Marina Voronova Привет) мне необходимо разместить два списка ul в одну строку. применяю к ul display: inline-block; но ничего не получается(
в чем м.б. ошибка? NMitra Привет. display: inline-block; нужно применять к li Marina Voronova а как тогда расположить два списка ul в одну строку?
применяю к ul display:block; но это не работает( NMitra Посмотрите про float: left; http://shpargalkablog.ru/2011/05/float-left-div-css.html
Возможно нужно это http://shpargalkablog.ru/2013/07/justify.html или это http://shpargalkablog.ru/2013/12/border.html#box-sizing-border-box (причины, почему съезжает элемент вниз). К последней ссылке http://shpargalkablog.ru/2013/01/skachet-menu.html SelenIT «display: inline-block; По умолчанию присвоен img, input и т.д.» — внешне оно так выглядит, но формально у них по умолчанию всё-таки display:inline. Просто это так называемые «замещаемые» элементы, для которых визуальное форматирование описано в отдельном подразделе спецификации. Но в Firefox, например, если картинка не загрузилась, то ее alt отображается как обычный текст, при необходимости переносясь на новую строку, как и должно быть при display:inline. NMitra Спасибо, Илья, очень важное замечание! Анонимный Здравствуйте, Наталья!

У меня есть один вопрос. Он относиться к описанию стиля «display: table-cell;»

Итого: суммарно 80% от всей ширины содержащего их контейнера.
Вопрос: Почему в таком случае они заполняют весь контейнер? Смысл в таком случае устанавливать значения ширины? NMitra Здравствуйте. Это особенность таблицы. Сделайте ещё одну пустую ячейку или контейнеру с display: table; укажите максимально возможную ширину. Анонимный Здравствуйте. Спасибо за последний ответ.

Если же указать ширину последней ячейки меньше оставшегося пространства ( NMitra Я не разбирала этот вопрос столь детально. Возьмите родителя, задайте ему display: table; и table-layout: fixed; Таблица будет вести себя более предсказуемо.

Источник

• ← что такое disp на фотоаппарате
• что такое display flex в css →