display | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 4 | Opera Полная поддержка 7 | Safari Полная поддержка 1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
contents | Chrome Полная поддержка 65
| Edge Полная поддержка 79 | Firefox Полная поддержка 37
| IE | Opera Полная поддержка 52
| Safari Полная поддержка 11.1 | WebView Android Полная поддержка 65 | Chrome Android Полная поддержка 65
| Firefox Android Полная поддержка 57 | Opera Android Полная поддержка 47
| Safari iOS Полная поддержка 11.3 | Samsung Internet Android Полная поддержка 9.0 |
contents: Specific behavior of unusual elements when display: contents is applied to them | Chrome Полная поддержка 58 | Edge Полная поддержка 79 | Firefox Полная поддержка 59 | IE Нет поддержки Нет | Opera Полная поддержка 45 | Safari Нет поддержки Нет | WebView Android Полная поддержка 65 | Chrome Android Полная поддержка 58 | Firefox Android Полная поддержка 59 | Opera Android Полная поддержка 43 | Safari iOS Нет поддержки Нет | Samsung Internet Android |
<display-outside> | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 4 | Opera Полная поддержка 7 | Safari Полная поддержка 1 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
display-outside.run-in Экспериментальная | Chrome Нет поддержки 1 — 32
| Edge Нет поддержки Нет | Firefox Нет поддержки Нет | IE Полная поддержка 8 | Opera Нет поддержки 7 — 19 | Safari Нет поддержки 1 — 8
| WebView Android Нет поддержки ≤37 — ≤37 | Chrome Android Нет поддержки 18 — 32 | Firefox Android Нет поддержки Нет | Opera Android Нет поддержки 10.1 — 19 | Safari iOS Нет поддержки 1 — 8
| Samsung Internet Android Нет поддержки 1.0 — 2.0 |
flex | Chrome Полная поддержка 29
| Edge Полная поддержка 12 | Firefox Полная поддержка 20
| IE Частичная поддержка 11
| Opera Полная поддержка 16
| Safari Полная поддержка 9
| WebView Android Полная поддержка 4.4
| Chrome Android Полная поддержка 29
| Firefox Android Полная поддержка 20
| Opera Android Полная поддержка 16
| Safari iOS Полная поддержка 9
| Samsung Internet Android Полная поддержка 2.0
|
flow-root | Chrome Полная поддержка 58 | Edge Полная поддержка 79 | Firefox Полная поддержка 53 | IE Нет поддержки Нет | Opera Полная поддержка 45 | Safari Полная поддержка 13 | WebView Android Полная поддержка 58 | Chrome Android Полная поддержка 58 | Firefox Android Полная поддержка 53 | Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 13 | Samsung Internet Android Полная поддержка 7.0 |
grid | Chrome Полная поддержка 57 | Edge Полная поддержка 16
| Firefox Полная поддержка 52 | IE Частичная поддержка 10С префиксом Замечания
| Opera Полная поддержка 44 | Safari Полная поддержка 10.1 | WebView Android Полная поддержка 57 | Chrome Android Полная поддержка 57 | Firefox Android Полная поддержка 52 | Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 10.3 | Samsung Internet Android Полная поддержка 6.0
|
inline-block | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 8
| Opera Полная поддержка 7 | Safari Полная поддержка 1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 1 | Samsung 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 уроков<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.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на 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.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
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 InlineBlock
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: Отображение: встроенный блок;
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
- Реклама Обратитесь к разработчикам и технологам со всего мира
- О компании
Загрузка…
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 | Играй » | ||||||||||||||||||||||||||||||||||
| шлейф | Отображает элемент как гибкий контейнер на уровне блока | Играй » | ||||||||||||||||||||||||||||||||||
| сетка | Отображает элемент как контейнер сетки на уровне блока | Играй » | ||||||||||||||||||||||||||||||||||
| рядный блок | Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины | Играй » | ||||||||||||||||||||||||||||||||||
| линейный гибкий | Отображает элемент как гибкий контейнер встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||
| линейная сетка | Отображает элемент как контейнер сетки встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||
| встроенный стол | Элемент отображается как таблица встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||
| список | Пусть элемент ведет себя как элемент | Играй » | ||||||||||||||||||||||||||||||||||
| обкатка | Отображает элемент как блочный или встроенный, в зависимости от контекста | Играй » | ||||||||||||||||||||||||||||||||||
| стол | Пусть элемент ведет себя как элемент
Другие примерыПримерДемонстрация использования значения свойства contents. В следующих Например, контейнер .a исчезнет, а дочерние элементы (.б) дочерние элементы элемента на следующий уровень в DOM: .a {дисплей: содержание; граница: 2px сплошной красный; цвет фона: #ccc; отступ: 10 пикселей; ширина: 200 пикселей; } .b { ПримерДемонстрация того, как использовать значение наследуемого свойства: body {display: встроенный; } p { ПримерУстановить направление некоторых гибких элементов внутри элемента в обратном направлении
заказ: div { Связанные страницыУчебникCSS: Отображение CSS и видимость Ссылка на HTML DOM: свойство отображения . html — Как центрировать объекты — display: block / inline-blockПереполнение стека
|