Блочная модель и CSS — Основы верстки контента
Блочная модель — правила, по которым браузер определяет размер элемента на странице, его ширину и высоту. В этом уроке рассмотрим все правила, которые влияют на блочную модель и научимся менять саму логику расчета размеров элемента.
Вспомним, какие свойства отвечают за ширину и высоту блока:
- Внутренние отступы. В CSS за их установку отвечает свойство padding
- Границы, устанавливающиеся свойством border
- Внешние отступы. За них отвечает свойство margin
- Высота и ширина блока, устанавливаемые свойствами height и width
Реальный размер элемента получится при сложении значений всех этих свойств. Рассмотрим их.
Внутренние и внешние отступы
По своим значениям, свойства margin и padding достаточно похожи, за исключением того, «куда» устанавливаются отступы. padding делает отступы внутри элемента, тем самым увеличивая его в размерах
В качестве значения свойство padding принимает четыре числа в следующей последовательности:
- отступ сверху. Можно установить отдельно свойством padding-top
- отступ справа. Можно установить отдельно свойством padding-right
- отступ снизу. Можно установить отдельно свойством padding-bottom
- отступ слева. Можно установить отдельно свойством padding-left
.element padding: 10px 20px 30px 40px; > /* Эквивалентно записи */ .element padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; >Если внимательно посмотреть на пример выше, то можно заметить, что в качестве значения свойства padding использовалось только одно значение, а не четыре. Свойство padding может принимать несколько разных вариаций сокращенных записей:
- Одно значение — устанавливает одинаковый отступ по всем сторонам сразу. Например, padding: 20px установит внутренний отступ в 20px сверху/справа/снизу/слева
- Два значения — устанавливает отступы по вертикали и горизонтали. Например, padding: 20px 30px установит внутренний отступ в 20px сверху/снизу и 30px справа/слева
- Три значения — устанавливает отступы сверху, по горизонтали и снизу. Например, padding: 20px 30px 40px установит внутренний отступ в 20px сверху, 30px справа/слева и 40px снизу
Все те же самые значения и сокращения используются для свойства margin , которое устанавливает внешние отступы.
Свойство margin не влияет на видимые размеры элементов, но на место отступов не смогут встать другие элементы, поэтому оно входит в формирование общего размера
Сейчас использование этих свойств может показаться не таким очевидным, но впереди вас ждет множество упражнений, в которых будут использоваться эти свойства.
Заметьте, что отступ между вторым и третьим элементом всего 40 пикселей, а не 60, как могло бы подуматься, ведь используется нижний отступ в 40 пикселей от второго элемента и 20 пикселей сверху от третьего. При этом внешние отступы не сложились, а был выбран наибольший из них.
Этот эффект называется схлопыванием внешних отступов — если внешние отступы двух соседних элементов накладываются, то будет выбран тот, который больше. Схлопывание отступов происходит только по вертикали.
Также свойство margin используется для приема центрирования элементов по горизонтали. Прием заключается в установлении автоматических отступов для свойств margin-left и margin-right . Если блок, для которого установлены эти свойства обладает заданной шириной, то браузер автоматически сделает отступы слева и справа так, что блок встанет по центру. Этот прием повсеместно используется в верстке и вы часто будете его использовать при создании макетов.
.box width: 200px; margin-left: auto; margin-right: auto; /* Вместо этого можно написать margin: 0 auto; */ >Для этого приёма важно, чтобы блок имел свойство ширины.
Всё о ключевом слове auto в CSS
В CSS есть ключевое слово auto , которое можно использовать при работе с различными свойствами элементов. Это — свойства, влияющие на позицию, высоту, ширину элементов. Это — свойства, предназначенные для настройки отступов элементов и других их характеристик. У меня появилось желание где-нибудь записать всё то, что я знаю об auto . Например — оформить это всё в виде материала, который мог бы стать справочником для тех, кто интересуется тонкостями использования этого ключевого слова.
Ключевое слово auto имеет особый смысл при использовании его с различными CSS-свойствами. Мы разберём особенности auto , касающиеся применения этого значения к различным свойствам.
Здесь, в первую очередь, нас будут интересовать технические детали работы auto . Поговорим мы и о том, как извлечь максимум пользы из применения этого свойства. Тут вы найдёте и заметки о сценариях использования auto , и примеры.
Свойство width: auto
Исходной шириной блочных элементов, таких, как или
, является значение auto . Это приводит к тому, что такие элементы занимают всё горизонтальное пространство содержащего их блока.
«Ширина блока, содержащего элемент» — это, в соответствии со спецификацией CSS, значение, вычисляемое по следующей формуле:
‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ Когда ширина элемента задана значением auto , у него могут быть настроены такие свойства, как margin , padding , border , и он, при этом, не будет больше своего родительского элемента. Шириной блока, ограничивающего содержимое блочного элемента, будет размер содержимого за вычетом ширины его частей, задаваемых свойствами margin (поле, внешний отступ), padding (внутренний отступ) и border (граница).
Сравнение width: auto и width: 100%
Рассмотрим, в качестве примера, особенности устройства вышеприведённых макетов.
* < box-sizing: border-box; >.wrapper < max-width: 600px; margin: 2rem auto 0; padding: 1rem; >.item
Тут всё выглядит как надо, содержимое ограничено родительским элементом.
Элемент находится в пределах родительского элемента
А что произойдёт в том случае, если указать, что ширина элемента ( width ) должна быть задана не в виде значения auto , а как 100% ? При таком подходе элемент займёт 100% ширины родительского элемента, к которой будет добавлено пространство, отводимое на правое и левое поля. Вот соответствующий стиль:
.item
А вот что получится после его применения к элементу.
Элемент выходит за пределы родительского элемента (направление текста — ltr)
Ширина элемента составляет 568px . Она вычисляется так:
‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ = 15 + 16 + 506 + 16 + 15 = 568px Если свойство direction установлено в значение ltr , то значение margin-right будет полностью игнорироваться. В нашем случае именно это и происходит. Однако если в direction записано rtl , игнорироваться будет margin-left .
Элемент выходит за пределы родительского элемента (направление текста — rtl)
Здесь можно поэкспериментировать с кодом примера.
▍Сценарии использования width: auto
Для того чтобы как следует разобраться со значением auto , недостаточно рассказа об основах. Поэтому я провёл некоторые изыскания, направленные на то, чтобы показать сценарии практического использования свойства width: auto .
Разная ширина элементов в мобильной и настольной версиях страницы
Мобильный и настольный варианты приложения
Имеется группа кнопок. Нужно, чтобы в мобильной версии приложения они были бы расположены рядом друг с другом (элемент, заключающий в себе кнопку, должен занимать 50% родительского элемента). В настольной версии приложения каждая кнопка должна занимать всю ширину контейнера-родителя. Как это сделать?
Для того чтобы разместить кнопки рядом друг с другом в мобильном варианте страницы, я воспользовался flexbox-макетом. Вот соответствующий CSS:
.group < display: flex; >.group__item
В настольной версии мне нужно, чтобы кнопки занимали бы всю ширину родительского элемента. Тут может возникнуть соблазн использовать конструкцию width: 100% . Правда? Но есть и более удачное решение:
@media (min-width: 800px) < /* Преобразуем обёртку из flexbox-элемента в блочный элемент */ .group < display: block; >.group__item < width: auto; >> Так как .group__item — это блочный элемент, использование width: auto приводит к тому, что этот элемент отлично заполняет собой место, доступное в его родительском элементе.
Вот рабочий вариант этого примера.
Свойство height: auto
Если рассматривать работу со свойством height , задающим высоту элементов, то всё выглядит иначе. Высота элемента, при применении значения auto , соответствует высоте содержимого элемента.
Рассмотрим следующий пример:
What's my height? Для того чтобы элемент с классом .item занял бы всю высоту контейнера, можно воспользоваться одним из следующих приёмов:
- Можно задать элементу с классом .wrapper фиксированную высоту, а затем добавить к стилю элемента .item свойство height: 100% .
- Можно воспользоваться для элемента .wrapper flexbox-макетом, благодаря чему дочерний элемент .item будет, по умолчанию, растянут до размеров родительского элемента.
.wrapper < height: 200px; >.item
Родительский и дочерний элементы
Поля и ключевое слово auto
Полями (внешними отступами) чаще всего пользуются для горизонтальной центровки элементов, ширина которых известна.
Элемент, который надо выровнять по центру
Синий прямоугольник нуждается в горизонтальном выравнивании по центру. Для этой цели можно воспользоваться следующим стилем:
.element
Обратимся к спецификации CSS:
Если свойства ‘margin-left’ и ‘margin-right’ установлены в значение ‘auto’, ширина полей оказывается одинаковой. Это приводит к горизонтальной центровке элемента относительно краёв включающего его в себя блока.
Поля элемента имеют одинаковую ширину
Вот демонстрация этого примера.
▍Использование свойства margin: auto для абсолютно позиционированных элементов
Центрованный элемент
Ещё один, менее распространённый, сценарий применения значения auto заключается в центровке абсолютно позиционированных элементов с использованием конструкции margin: auto . Если имеется элемент, который нужно отцентровать внутри родительского элемента и по горизонтали, и по вертикали, может показаться, что для этого надо воспользоваться свойством translateX или translateY .
Для того чтобы свойство margin: auto позволило бы нам соответствующим образом выровнять элемент, нужно, чтобы были бы выполнены следующие условия:
- Заданы ширина и высота элемента.
- Задано свойство элемента position: absolute .
I am centered. .wrapper < position: relative; >.item
Вот демонстрация этой методики выравнивания элементов.
Flexbox-макеты и автоматическая настройка полей
Использование автоматически настраиваемых полей может, в некоторых случаях, оказаться весьма полезным приёмом. Если дочерний элемент имеет поле, размеры которого заданы с использованием значения auto , он, в родительском элементе, будет максимально смещён в сторону, противоположную настроенному полю. Например, если flex-элементу назначено свойство margin-left: auto , он будет максимально смещён вправо.
Посмотрим на следующий макет. Тут есть два прямоугольных дочерних элемента, находящихся в родительском flexbox-элементе.
Пара элементов во flexbox-контейнере
Нам нужно, чтобы элемент №2 был бы перемещён к правой границе контейнера. Для этого отлично подходит использование значения auto для свойства margin-left :
.wrapper < display: flex; >.item-2
Вот что получилось после применения такого стиля.
Элемент №2 перемещён к правому краю контейнера
Надо отметить, что этот приём работает и при вертикальном выравнивании элементов. Применим в данном примере следующий стиль элемента №2:
.item-2
Вот что получится.
Элемент №2 перемещён к нижнему краю контейнера
Кроме того, если имеется лишь один дочерний элемент, то для того, чтобы выровнять его и по горизонтали, и по вертикали, можно воспользоваться свойством margin: auto . Предположим, в контейнере имеется лишь элемент №1, который нужно выровнять именно так. Для этого воспользуемся таким стилем:
.item-1
Этого достаточно для центровки элемента.
Элемент №1 выровнен по центру контейнера
▍Свойство flex и значение auto
При разработке flexbox-макетов можно пользоваться, для дочерних элементов, свойством flex: auto . Что означает подобная конструкция? Дело в том, что когда у дочернего элемента имеется свойство flex: auto , это равносильно тому, что элементу назначен стиль flex: 1 1 auto , аналогичный следующей конструкции:
.item
Вот что об этом сказано на MDN: «Размеры элемента определяются в соответствии с его свойствами width и height , но элемент может растягивается, занимая дополнительное свободное пространство, доступное во flex-контейнере. Элемент, для того, чтобы поместиться в контейнер, может и сжимается до своего минимального размера. Это аналогично установке стиля flex: 1 1 auto ».
Другими словами, размер элемента со свойством flex: auto будет задан, основываясь на его ширине и высоте. Но этот элемент может растягиваться или сжиматься в зависимости от того, какое пространство доступно ему в контейнере. Я об этом не знал до тех пор, пока не занялся исследованиями для этой статьи.
Как обычно, рассмотрим пример.
Item Item Item .wrapper < display: flex; flex-wrap: wrap; >.item < width: 120px; height: 500px; >.item-1
А вот — результат.
Использование flex: auto
Вот рабочий вариант этого примера.
Grid-макеты и значение auto
▍Использование значения auto при настройке столбцов
Использование стиля grid-template-columns: auto 1fr 1fr
При разработке Grid-макетов можно использовать значение auto при настройке столбцов. Это будет означать, что ширина столбцов будет зависеть от размеров их содержимого. Вот что я имею в виду:
.wrapper
▍Grid-макеты и использование значения auto для настройки полей
При использовании Grid-макетов значение auto может быть использовано для настройки полей элементов. Делается это для получения результатов, похожих на те, что достигались при использовании auto во Flexbox-макетах. Если мы работаем с Grid-макетом, и один из элементов сетки имеет, например, стиль margin-left: auto , он будет перемещён в правую часть макета, а его ширина будет подобрана на основе размеров его содержимого.
Рассмотрим следующий пример.
Нам нужно, чтобы ширина элемента Item 1 зависела бы от его содержимого, а не от доступного ему пространства сетки. Для этого мы можем воспользоваться следующим стилем:
.item-1
Вот результат применения этого стиля.
Ширина элемента зависит от его содержимого
▍RTL-макеты
Стоит отметить, что использование свойств margin-left: auto или margin-right: auto хорошо показывает себя для LTR-макетов (для макетов, в которых содержимое расположено слева направо), например, для таких, которые используются для вывода текстов, написанных на английском. Но знайте о том, что на многоязычных сайтах эти значения меняются местами. Ещё лучше, и я бы порекомендовал поступать именно так, пользоваться в таких макетах Flexbox- или Grid-свойствами, делая это в тех случаях, когда поставленной цели можно достичь с их помощью. Если этого с помощью таких свойств добиться нельзя, прибегайте к настройке margin-свойств с использованием auto только в крайнем случае. Вместо них лучше применять логические свойства CSS.
Свойство overflow
Работая с элементами веб-страниц, нам нужно знать о размерах содержимого, которое способны вмещать эти элементы. Если содержимое оказывается больше того, что способен вместить элемент, нужно, для работы с таким содержимым, показать полосу прокрутки.
Для решения этой задачи можно попытаться воспользоваться следующим стилем:
.element
Но при таком подходе полоса прокрутки может появиться даже в том случае, если в элементе выводится содержимое, размер которого не превышает размеров элемента. Вот пример.
Элемент, которому назначен стиль overflow-y: scroll
В браузере Chrome на платформе Windows полоса прокрутки выводится всегда. Это — пример неправильного поведения элемента, которое способно запутать пользователя.
Использование вместо этого значения auto позволяет добиться того, что полоса прокрутки будет выводиться лишь в тех случаях, когда высота содержимого превышает высоту контейнера.
На MDN об этом сказано следующее: «Зависит от пользовательского агента. Если содержимое помещается в область элемента, соответствующую внутреннему пространству элемента, оно выглядит так же, как содержимое, выводимое в режиме visible , но при этом создаётся новый блочный контекст форматирования. Настольные браузеры выводят полосы прокрутки в том случае, если размеры содержимого превышают размеры элемента».
Свойства, отвечающие за позиционирование элементов
CSS-свойства, отвечающие за позиционирование элементов, такие, как top , right , bottom и left , поддерживают значение auto . То, о чём я хочу сейчас рассказать, я узнал в ходе написания этой статьи.
Рассмотрим следующий макет.
Демонстрационный макет
Здесь имеется родительский элемент с настроенным свойством padding , задающим внутренний отступ. В этом элементе расположен ещё один элемент, дочерний. Дочерний элемент позиционирован абсолютно, но его свойства, отвечающие за позиционирование, не настроены. Вот стили:
.wrapper < position: relative; padding: 16px; >.item
Дело в том, что в CSS у каждого свойства имеется некое исходное значение (значение, задаваемое по умолчанию). Если исследовать дочерний элемент и взглянуть на вычисленные стили, то каким будет значение его свойства left ?
Исследование вычисленных стилей дочернего элемента
Значение, задаваемое по умолчанию для свойства left — это 16px . Откуда оно взялось, если мы его даже не задавали? Причина этого заключается в том, что свойства абсолютно позиционированного элемента согласуются с его ближайшем родителем, у которого задано свойство position: relative . У родительского элемента есть свойство padding: 16px . Это приводит к тому, что дочерний элемент размещается в 16 пикселях от верхней и левой сторон родительского элемента. Интересно, правда?
Теперь у вас может появиться вопрос о том, какая нам от этого польза. Предлагаю с этим разобраться.
Представим, что дочерний элемент надо разместить в 100px от левой границы родительского элемента при просмотре страницы на маленьких экранах, а на больших экранах можно разместить элемент там, где он располагался бы при применении значений, задаваемых по умолчанию.
Вот стиль, подходящий для маленьких экранов:
.wrapper < position: relative; >.item
Как сбросить значение свойства left при просмотре страницы на больших экранах? Причём, значение left: 0 тут использовать нельзя, так как это приведёт к тому, что дочерний элемент прижмётся к краю родительского элемента, а нам это не нужно. Взгляните на макет страницы, показанный ниже. Он разъясняет мою мысль.
Дочерний элемент ведёт себя неправильно
Для сброса свойств позиционирования дочернего элемента следует использовать конструкцию left: auto . На MDN об этом говорится следующее: «Элемент размещается по горизонтали так, как он должен был бы быть позиционирован в том случае, если бы был статическим элементом».
Это означает, что при размещении элемента будет учитываться свойство padding родительского элемента, и будет обеспечиваться то, что дочерний элемент не «прилипнет» к краю родительского элемента.
.item < position: absolute; left: 100px; width: 100px; height: 100px; >@media (min-width: 800px) < .item < /* Это - эквивалент left: 16px */ left: auto; >> То же самое применимо и к свойству top . Вычисленные значения свойств right и bottom , задаваемые по умолчанию, эквивалентны, соответственно, ширине и высоте элемента.
Вот демонстрационный проект к этому разделу.
Примеры использования значения auto
Сразу скажу, что приведённые здесь примеры не охватывают всех возможностей значения auto , но я надеюсь, что то, о чём я расскажу, вам пригодится.
▍Стрелка всплывающей подсказки
При создании всплывающих подсказок нужно, чтобы у них была бы стрелка, указывающая на тот объект, к которому относится подсказка. Так эти подсказки оказываются более понятными. В том случае, если мы занимаемся разработкой дизайн-системы, нам нужно предусмотреть разные состояния подсказок. Например, подсказки со стрелкой, указывающей налево, и со стрелкой, указывающей направо.
Стрелки подсказок, направленные в разных направлениях
.tooltip:before < /* Код стрелки */ position: absolute; left: -15px; >/* Версия подсказки со стрелкой, направленной вправо */ .tooltip.to-right:before < /* Код стрелки */ position: absolute; left: auto; right: -15px; >Обратите внимание на то, что я воспользовался свойством left: auto для переопределения свойства left: -15px в исходной реализации. И, чтобы вы знали, подобное используется весьма часто. Поэтому я порекомендовал бы вместо вышеописанного подхода пользоваться следующим:
.tooltip:before < position: absolute; right: 100%; >.tooltip.to-right:before < /* Код стрелки */ position: absolute; right: auto; left: 100%; >Используя значение 100% , мы уходим от применения жёстко заданного значения (ширины стрелки), которое может привести к неправильной работе системы в том случае, если изменится размер стрелки. Это решение лучше приспособлено к возможным будущим изменениям.
▍Компонент-карточка
Возможно, в вашем проекте имеется компонент-карточка, на котором, в левом верхнем углу расположен какой-нибудь значок. Он может играть декоративную роль, а может представлять собой кнопку для выполнения некоего действия. Вне зависимости от роли значка компонент нужно проектировать так, чтобы значок можно было бы расположить и в его левом верхнем углу, и в его правом верхнем углу. Вот как это выглядит.
Компонент-карточка со значком, который расположен в разных углах
Используя свойство left: auto можно легко сбросить значение свойства, заданного в его базовой реализации. Вот CSS-код:
.card .icon < position: absolute; left: 15px; top: 15px; >.card.is-right .icon
▍Flexbox-макеты и значение auto свойства margin
Flexbox-макеты дают веб-разработчику поистине безграничные возможности. Комбинируя возможности таких макетов с полями, при настройке которых используется значение auto , мы можем создавать весьма мощные макеты.
Рассмотрим следующий пример.
Автоматическая настройка полей элементов
Тут имеется вертикальный контейнер, содержащий заголовок элемента, его описание и кнопку, расположенную справа. Нам нужно, чтобы кнопка была бы привязана к правой части контейнера.
.item < display: flex; flex-wrap: wrap; justify-content: space-between; >.item__action
Готово! Использование свойства margin-left: auto позволяет поместить кнопку в правом верхнем углу элемента. А ещё приятнее то, что мы можем воспользоваться логическими CSS-свойствами в том случае, если разрабатываем многоязычный сайт. CSS-код будет примерно таким:
.item__action
Если вы хотите больше узнать о RTL-стилизации — вот полезный ресурс, посвящённый этой теме.
▍Grid-макеты и значение auto свойства margin
Настраивая поля Grid-элементов, можно задавать фиксированные и процентные значения, а также — можно пользоваться значением auto . Меня особенно интересует значение auto . Взгляните на следующий макет.
Вот фрагмент разметки:
.input-group < display: grid; grid-template-columns: 1fr; grid-gap: 1rem; @media (min-width: 700px) < grid-template-columns: 0.7fr 2fr; >>
Мне хотелось бы выровнять подписи, элементы label , по левому краю полей для ввода данных (элементов input ). Для того чтобы это сделать, нужно применить следующий стиль:
.input-group label
Применение этого стиля приведёт к результату, показанному на следующем рисунке.
Выравнивание подписей по левому краю полей для ввода данных
▍Проектирование модальных окон
Модальное окно
Работая над дизайном модальных окон важно учитывать то, что содержимое, которое понадобится отобразить в окне, может целиком в него не поместиться. Для того чтобы окно нормально работало бы в такой ситуации, можно воспользоваться следующим стилем:
.modal-body
Благодаря такому стилю полоса прокрутки появится только в том случае, если содержимое окна окажется достаточно большим.
Итоги
В этом материале мы рассмотрели особенности применения ключевого слова auto в CSS. Надеемся, вам пригодится то, о чём вы сегодня прочли.
Уважаемые читатели! В каких ситуациях вы пользуетесь значением auto в CSS?
- Блог компании RUVDS.com
- Веб-разработка
- CSS
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, заголовков H1-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), а два других — блочными (H3 и P). Для большей наглядности я залил область отведенную для этих элементов фоном с помощью Background:
H3 по умолчанию будет отображать браузером как блочный
Span — типичный пример строчного тега P — еще один по умолчанию блочный
В результате браузер отобразил все элементы в полном соответствии с их умолчательными значениями правила Display:
Как видите, первый блок H3 (с умолчательным значением block) занимает весь доступный ему размер по горизонтали (равно как и третий элемент P), ну а строчный Span (с умолчательным значением display:inline) занимает по ширине ровно столько места, сколько нужно для размещения заключенного в него контента.
Ну, а теперь давайте из изначально блочного тега H3 сделаем строчный с помощью добавления к нему display inline (я уменьшил текст в первых двух элементах для получения большего эффекта наглядности):
H3 Span
P - еще один по умолчанию блочный тэг
>
Как вы можете видеть, браузер учел display:inline и теперь элемент заголовка H3 (изначально блочный) уже не занимает все доступное ему по ширине пространство, вследствие чего к нему вплотную оказался прижат следующий за ним строчный тэг Span.
Но прижался он к предыдущему не вплотную, а разделенный пробелом. При бытности заголовка H3 блоком этот пробел не учитывался, но после его перерождения в тег строчный, все стоящие в коде пробельные символы (пробелы, табуляции и переносы строк) были преобразованы в единственный пробел по всем правилам языка гипертекстовой разметки, о которых вы можете почитать по приведенной ссылке.
Точно так же можно из строчного тега Span сделать блочный с помощью добавления display:block:
H3
Span P — еще один по умолчанию блочный Html элемент
И в результате наше наглядное пособие отобразит произошедшую метаморфозу (что это?):
Span стал занимать всю область,доступную ему по ширине в не зависимости от количества контента заключенного в этот тэг.
Display list-item — создание списков на основе блочных тегов
А теперь давайте попробуем с помощью Дисплей сделать ряд блочных тегов элементами списка. С этим нам поможет справиться правило display:list-item. Пусть у нас изначально будут присутствовать несколько абзацев и заголовок:
H3
Первый абзац (тег P)
Второй абзац
Третий
Которые будут выглядеть примерно так:
Теперь, если мы добавим ко всем блочным тэгам абзаца CSS правило display:list-item, то браузер сгенерирует для всех этих элементов специальную область для маркера, в которых появятся эти самые маркеры используемые по умолчанию:
H3
Первый абзац (тег 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
Комментарии и отзывы (15)
Спасибо,Дмитрий,за статью.Как всегда,подробно и доходчиво.Хотя я пока еще не занялся плотно CSS,но даже сейчас некоторые вещи стали понятны.К сожалению не могу задать вопрос по существу,так как в полной мере не владею данной темой.
Дмитрий,а можно вопрос немного не по теме?Вы случайно не участвуете в последнем конкурсе Сергея Шелвина? Интересно было бы узнать,на какую тему Вы бы написали статью.Я отправил пост на конкурс,в котором упомянул про Ваш блог и где определил Ваши предпочтения,хотелось бы узнать Ваше мнение,которое для меня важно.
Дорожу Вашим временем,поэтому не настаиваю,если только случайно эта статья попадется на глаза.
Не даю ссылку по причине нежелания спамить в комментариях.
Еще раз спасибо за статью!
Дмитрий Мацкевич
Будьте добры, напишите про создание опросов на WP с помощью плагинов.
Это НЧ, но все же будет полезно многим, поскольку толкового описания нет нигде.
Пишу тут, т.к. формы обратной связи у Вас нет.
С уважением Дмитрий
А у меня есть вопрос может быть не по существу статьи- тема очень сложная,Как всегда буду разбираться перечитывая Вашу статью ни раз и не два. пошагово выполняя все рекомендации.Вопрос такой: как ВЫ сохранили возможность делать рассылку с изображением(фото) которое есть вначале статьи? У меня при отправке анонса из RSS моего сайта фидбернер фото убирает. а раньше присылалось с фото.Как изменить настройки чтобы первое фото уходило с анонсом статьи на почту?
Блин, этот css чем дальше тем сложнее дается, хотя если его хотя-бы немного подтянуть, то можно в порядок приводить сайтик
Fotoformula
Здравствуйте! Предполагается ли написание статьи о валидации? Случайно посмотрел код Вашего блога, и нашел 32 ошибки. На моем — 43. )) Буду ждать рабочую метОду по исправлению данной проблемы. Спасибо за Ваши статьи.
Здравствуйте. Подскажите пожалуйста какой программой Вы пользуетесь, чтобы нанести логотип на картинку? В Вашем случае Ktonanovenkogo.ru.
Ольга Абрамова
Дмитрий, подскажите, пжл, я решила освоить курс html. При создании странички index в теге title пытаюсь по русски написать заголовок. Но получается ерунда какая-то, не кодируется, что ли? А латиница проходит.
Ïåðâàÿ HTML ñòðàíèöà
Установлена кодировка utf-8 без ВОМ.
Можете чем-то помочь?
Константин
Здравствуйте! Очень интересные материалы. Я новичек подскажите пожалуйста, как можно добавлять на сайт(Wordpres) статьи написанные на компьютере, и в каком формате? В каких вариантах только не пробовал,ничего не получается. Как это делается? Заранее спасибо!
я на своем блоге создаю и выставляю материал ( начинаю только писать статьи — новичек) в последнее время появилось желание, выставлять статьи используя на главной ( вордпресс) картинки ввиде миниатюр. так вот, миниатюры имеют обвотку черного цвета, что не очень красиво смотрится. убрать рамочку — тоже некрасиво. почитал много матриала, на данну тему, но не чего не нашел.
при помощи Firebug нашел стиль который отвечает за изменение цвета, но оказалось , что данный стиль не имеет определнного места положения в вордпрессе =( я искал и в ручную и через тотал комндор . результат нулевой . также искал при помощи кода
border: 10px solid black;
но результата нет. что я только не делал нечего не получилось. поджскажите, что можно сделать. чтобы решить данный вопрос, может есть компетентный пост на данную тему. видел только форумы, где толком не дали ответа.
Ольга Абрамова
А с помощью чего Вы выводите миниатюры? Ссылку на сайт дайте.
Огромное спасибо за Ваши статьи. Материал разложен по полочкам, всё очень доступно и понятно. Для меня Ваш сайт просто находка.
Ирина: очень рад, что материалы Вам пригодились. Спасибо большое за отзыв.
Великолепные уроки по CSS. Настолько понятно объяснено на Пять с Плюсом. Ваш сайт лучший авторы статей самые лучшие!
Здравствуйте! У меня беда на сайте. Дело в том что после перехода на другой хостинг у моего блога не настраивается тема? Хочется поменять фон и т.д но увы? Помогите если можете! Спасибо!
Ваш комментарий или отзыв
Самые полезные хитрости в Bootstrap
Bootstrap полон невероятного функционала, но может казаться слишком сложным для многих из нас при детальном изучении. Вы просто не сможете запомнить все функции или взять полностью одну неделю, чтобы зазубрить всю документацию. Уже много раз, даже опытные пользователи удивлялись, когда открывали действительно скрытые секреты этого фреймворка.
Я аккауратно выбрал для вас одни из лучших хитростей и советов, которые использовал в Bootstrap за всю карьеру разработчика и хотел бы поделиться ими с вами.
Для более удобного чтения, я разделил статью на 4 группы.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
Bootstrap сетка
Как сделать столбцы одинаковой высоты?
Это вообще классическая проблема. У вас есть контент боксы с разным контентом, но вам нужно сделать их одинаковой высоты. Решение тут в умном использовании flexbox на bootstrap строках.
Этот подход состоит из 4-х шагов.
1. Создайте .row-flex и примените его к родительской строке контент боксов.
2. Колонки с в .row-flex теперь будут одинаковой высоты.
3. Я обычно не мешаю Bootstrap со своими компонентами и у меня всегда есть фоны, внутренние отступы и т.д. контент боксов объявленных в дочернем элементе .content . Чтобы все точно заработало, всё что вам нужно сделать это выставить height: 100% у .content боксов.
/* показывайте этот ряд с флексами и использованием wrap */.row-flex display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;>/* vertical spacing between columns */[class*=”col-”] margin-bottom: 30px;>.content height: 100%;padding: 20px 20px 10px;color: #fff;>
Добавляем вертикальный спейсинг колонкам
Чтобы добавить вертикальный спейсинг вашим колонкам, используйте следующее простое CSS правило, которые даст нижний внешний отсутп в 30px для колонок в Bootstrap.
[class*=”col-”] margin-bottom: 30px;>
Как использовать собственные классы, вместо колонок и строк.
Многим просто напросто не нравится способ, которым Bootstrap пишет код, с колонками и строками, как тут:
Main content
Right column
Но вы можете легко написать свой код, как в следующем примере:
Main content
Right column
Чтобы этого добиться, вам нужно будет использовать LESS(В 4-ой версии Sass, но ничего сильно не изменилось) Bootstrap миксины, такие как .make-row() и .make-*-column() .
.content .make-row();>.main .make-sm-column(8);.make-lg-column(9);>.right-column .make-sm-column(4);.make-lg-column(3);>
Как изменить порядок колонок на мобильных устройствах.
Довольно полезное свойство в сетке Bootstrap это возможность расставлять колонки в разном порядке на мобильных устройствах и десктопных.
Все что вам нужно сделать, это использовать .col-(breakpoint)-push-(number) и .col-(breakpoint)-pull-(number) классы, чтобы подтолкнуть и подтянуть колонки в указанный брейкпоинт(момент по ширине экрана) от изначальных позиций.
Да, это звучит немного сложно и обычно нужно немного времени, чтобы визуализировать результат, но давайте посмотрим на этот пример. В коде ниже, первая колонка появится первой на мобильных устройствах, но будет второй планшетах и десктопах.
4 cols wide right column appears second on SM+ devices
but appears first on mobile 8 cols wide left column appears first on SM+ devices
but appears second on mobile
Как показывать или прятать элементы на мобильных устройствах.
Если вам нужно быстро и просто спрятать элемент только на xs устройствах, то .hidden-xs класс вам в помощь.
Обычно, вы можете использовать .hidden-(breakpoint) класс для остальных брейкпоинтов и комбинировать их вместе, то есть использовать классы .hidden-lg , hidden-md и hidden-sm .
С другой стороны, если вам надо показать элемент только на определнном типе устройств, вы можете использовать .visible-(breakpoint)-(display) классы. Обратите внимание на небольшое различие, тут вам нужно будет применять свойство display . Возможные значения для свойства display тут это block , inline-block и inline . Таким образом, если вам надо показать элемент как блочный на больших устройствах, просто добавьте .visible-lg-block класс к нему. Вообще в официальной докментации все написано очень подробно по этой интересной теме.
Отменяем адаптивность.
Могут ситуации, когда вы бы предпочли показывать страницу не адаптивной. Это к примеру, может быть подготовока страницы к печати или генерация выдачи для PDF.
Вот простые шагы, чтобы отрубить её.
2. Выставите фиксированную ширину вашему контейнеру .container
Компоненты — navbar, footer
Как открыть выпадающее меню при наведении.
Стандартное поведение дропдаунов в Bootstrap в том, что они открываются при клике. У них есть свои плюсы и минусы, и я обычно держу это состояние по дефолту. Если бы вы хотели открывать дропдауны при наведении, то это по сути не сложный процесс.
Нам нужно будет изменить две вещи и мы применим наши изменения только в тех случаях, если viewport шире 768px , то есть панель навигации не свернута.
Во-первых, добавьте это CSS правило в вашу таблицу стилей, после загрузки Bootstrap CSS. Тут все довольно ясно и понятно, если viewport шире, чем 768px и вы наводите на .dropdown ссылку, .dropdown-menu открывается.
@media only screen and (min-width: 768px) .dropdown:hover .dropdown-menu display: block;>>
Во-вторых, если ссылка должна указывать тоже на URL, нам понадобится добавить немного JS кода, чтобы сменить .dropdown сслыки для onclick поведения.
$(‘.dropdown-toggle’).click(function(e) if ($(document).width() > 768) e.preventDefault();var url = $(this).attr(‘href’);if (url !== ‘#’) window.location.href = url;>>>);
Как изменить высоту панели навигации
Когда вам надо изменить высоту панели навигации, вам надо настроить больше вещей, чем просто добавить новую высоту в .navbar .
В следующем коде я выделил подход, как изменить высоту панели навигации до 80px .
.navbar min-height: 80px;>.navbar-brand padding: 0 15px;height: 80px;line-height: 80px;>.navbar-toggle /* (80px — button height 34px) / 2 = 23px */margin-top: 23px;padding: 9px 10px !important;>@media (min-width: 768px) .navbar-nav > li > a /* (80px — line-height of 27px) / 2 = 26.5px */padding-top: 26.5px;padding-bottom: 26.5px;line-height: 27px;>>
Как создать прилипающий футер.
Чтобы создать прилипающий подвал для вашего сайта, следуйте следующим шагам:
1. Создайте футер элемент и выставите его позицию на абсолют с нижним оффсетом 0 . Выставите фиксированную высоту для него. В моем примере это будет 80px .
2. Добавьте нижний внутренний отступ элементу, добавьте ему тоже значение, что и высоте подвала.
body height: 100%;padding-bottom: 80px;>.footer position: absolute;bottom: 0;width: 100%;height: 80px;background: #fafafa;border-top: solid 1px #eee;>/* additional demo styles */.footer p margin-top: 30px;>.article padding-top: 40px;>
Как создать кастомные Bootstrap кнопки
Bootstrap идет с пятью дефолтными стилями кнопок — default , primary , success , danger и т. п.
Когда вам надо сменить вид главной кнопки, сократив border-radius или padding , то лучше способом будет перезаписать .btn класс.
Кроме этого, я бы предпочел создать новый тип кнопки и расширить общий стиль Bootstrap.
В этом примере, давайте создадим кнопку с внешними линиями и темно синюю кнопку.
1. Я создам 2 класса: .btn-outline и .btn-colour-1 . Эти классы расширят стандартный стиль .btn .
2. В CSS, я стилизую их дефолтное состояние и также :active , :focus , :hover и .active Все это будет иметь тот же стиль.
.btn-outline color: #4fbfa8;background-color: #ffffff;border-color: #4fbfa8;font-weight: bold;letter-spacing: 0.05em;>.btn-outline color: #4fbfa8;background-color: #ffffff;border-color: #4fbfa8;font-weight: bold;border-radius: 0;>.btn-outline:hover,.btn-outline:active,.btn-outline:focus,.btn-outline.active background: #4fbfa8;color: #ffffff;border-color: #4fbfa8;>.btn-colour-1 color: #fff;background-color: #004E64;border-color: #004E64;font-weight: bold;letter-spacing: 0.05em;border-radius: 0;>.btn-colour-1:hover,.btn-colour-1:active,.btn-colour-1:focus,.btn-colour-1.active /* let’s darken #004E64 a bit for hover effect */background: #003D4F;color: #ffffff;border-color: #003D4F;>
Как отключить кнопки и другие элементы форм.
Вы можете легко отключит кнопки и инпуты в ваших формах. Когда вы это отмените, кнопки будут выглядеть ярче и не будут иметь курсор при наведении.
Для отключения radio и чекбоксов:
Добавьте disabled класс родителю чекбокса или радио элементов.
Добавьте атрибут disabled инпуту
This checkbox is disabled This radio is disabled
Для отключения кнопок:
Добавьте этот же атрибут для кнопок
Или добавьте .disabled класс кнопкам
Советы по типографии и шаблону
Как отцентровать блочный элемент.
Чтобы просто горизонтально отцентрировать блочный элемент, просто добавьте ему класс .center-block , как тут
Этот класс добавит следующие CSS стили вашим элементам:
// Class.center-block display: block;margin-left: auto;margin-right: auto;>// .element .center-block();>
Как отцентрировать инлайновый контент
Если вам нужно быстро отцентрировать инлайновый контент или inline-block элементы внутри div , добавьте .text-center класс родительскому элементу.
Давайте быстро горизонтально отцентруем текст и кнопку в следующем коде:
Как использовать классы заголовков.
Вы часто сталкиваетесь с проблемой, когда вам нужен визально маленький заголовок, но он должен быть . Чтобы изобрасить присутствие , просто добавьте .h4 вашему h2 . Посмотрите больше в следующем примере.
This heading will look like h4 but it is h2.
Как адаптивно вставить YouTube или Vimeo видео.
Вы можете легко вставить YouTube или Vimeo ведео, используя Bootstrap embed-responsive классы.
Выберите embed-responsive-16by9 или embed-responsive-4by3 основываясь на вашем разрешении экрана.
16:9 Aspect Ratio
4:3 Aspect Ratio