Как создать контейнер в css
Перейти к содержимому

Как создать контейнер в css

  • автор:

Как сделать контейнер в html

Чтобы создать контейнер в HTML, нужно использовать тег . Этот тег не имеет своего собственного стиля, но вы можете добавить стили, используя атрибут class или id .

Пример создания контейнера с классом «container»:

 class="container"> 

Вы можете добавить стили для этого контейнера в своем файле CSS, например:

.container  width: 80%; margin: 0 auto; padding: 20px; background-color: #f2f2f2; > 

Этот код задаст ширину контейнера в 80% от родительского элемента, задаст отступы сверху и снизу в 20 пикселей, а также задаст цвет фона.

Также, вместо класса можно использовать атрибут id , который должен быть уникальным на странице:

 id="container"> 

И стили для этого контейнера нужно будет задать так:

#container  /* Стили */ > 

CSS-выражения от контейнера для дизайнеров

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

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

Хватит слов, перейдём к делу!

Текущее состояние адаптивного дизайна

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

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

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

Заметьте, что это один компонент, но с тремя вариантами: «По умолчанию», «Карточка» и «Полный вариант». Как дизайнер, вы использовали несколько версий макета, чтобы показать это. Это как сказать: «Вот так компонент статьи выглядит в мобильной версии, а так в планшетной»

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

.c-media < /* Стили по умолчанию */ display: flex; flex-wrap: wrap; gap: 1rem; >@media (min-with: 400px) < .c-media--card < display: block; >.c-media--card img < margin-bottom: 1rem; >> @media (min-with: 1300px) < .c-media--featured < position: relative; /* другие стили */ >.c-media--featured .c-media__content < position: absolute; left: 0; top: 0; width: 100%; height: 100%; >>

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

Проблема в том, что разработчик привязан к применению вариации компонента только тогда, когда ширина окна браузера больше конкретного значения. К примеру, если мне нужен «Полный вариант» на планшетном размере, то это не сработает. Почему? Потому что медиазапрос для него срабатывает при ширине окна браузера 1300 пикселей или выше.

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

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

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

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

Что такое выражения от контейнера?

Во-первых, давайте определим контейнер. Это элемент, содержащий другой элемент (элементы), иногда еще его называют оберткой. Если хотите узнать больше о контейнерах, у меня есть детальная статья по теме.

Прототип выражений от контейнера теперь доступен за флагом в Chrome Canary. Благодаря усилиям таких умных людей, как Мириам Сюзанн и не только.

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

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

Компонент — это элемент с классом .c-media , а его родительский элемент — это .o-grid__item . В CSS можно сделать следующее:

.o-grid__item < contain: layout inline-size style; >.c-media < /* Стили по умолчанию */ >@container (min-width: 320px) < .c-media < /* Стили */ >> @container (min-width: 450px) < .c-media < /* Стили */ >>

Во-первых, мы сообщили браузеру, что каждый элемент с классом .o-grid__item — это контейнер. Затем, что если ширина родителя равна или больше 320 пикселей, то компонент должен выглядеть иначе. То же самое для выражения на 450px . Вот как работают CSS-выражения от контейнера.

Кроме того, можно определить их где угодно, что означает, что можно запрашивать контейнер верхнего уровня, если нужно. Теперь, когда вы поняли основную идею CSS-выражений от контейнера, я хочу показать вам следующую схему:

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

Если хотите узнать больше о CSS-ных тонкостях выражений от контейнера, у меня есть подробная статья.

Дизайн с оглядкой на выражения от контейнера

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

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

Возьмём следующий дизайн:

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

Я могу представить себе разделение компонентов на следующее:

  • Окно (медиазапросы)
  • Родитель (выражения от контейнера)
  • Общее: компоненты, которые остаются неизменными: кнопки, теги, абзацы.

Для этого примера пользовательского интерфейса: вот как мы можем разделить компоненты.

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

На следующем рисунке заметьте, как каждая вариация компонентов статьи появляется при определённой ширине.

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

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

Вопрос в том, как сказать дизайнерам, где они должны использовать эти компоненты?

Общение с разработчиками

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

Давайте применим это к компоненту статьи, который мы обсуждали ранее.

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

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

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

Как избежать сложностей при разработке адаптивных компонентов.

Важно помнить, что внутренние части компонента похожи на конструктор «Лего». Вы можете упорядочивать их по-своему для каждой вариации, но без фанатизма. Иногда для фронтенд-разработчика лучше поработать над совершенно новым компонентом, чем создавать вариации с помощью выражений от контейнера.

У него есть вот что:

  • Аватар
  • Название
  • Кнопка
  • Пара ключ/значение

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

Применения для CSS-выражений от контейнера

Давайте рассмотрим некоторые применения, которые можно реализовать с помощью CSS-выражений от контейнера.

Список чатов

Я видел этот паттерн в мессенджере «Facebook». Список чатов изменяется на основе ширины окна браузера. Это можно сделать с помощью CSS-выражений от контейнера.

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

Вот как мы можем реализовать это в CSS.

Основной контент

.content < display: grid; grid-template-columns: 0.4fr 1fr; >aside < contain: layout inline-size style; >@container (min-width: 180px) < .name < display: block; >>

Заметьте, что ширина стороны равна 0.4f , поскольку это динамическая ширина. Элементу aside я добавил свойство contain . Затем, если ширина контейнера превысит 180 пикселей, то отобразится имя пользователя.

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

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

Аккордеон

Паттерн аккордеона можно использовать для таких вещей, как часто задаваемые вопросы. Иногда хочется добавить список ЧАВО в боковую панель или в небольшую область пользовательского интерфейса. Выражения от контейнера могут помочь!

Вот как можно реализовать вышеописанное с помощью CSS-выражений от контейнера

@container (min-width: 180px) < .faq-title < display: flex; justify-content: space-between; font-size: 1.25rem; >.faq__icon < width: 60px; height: 60px; background-color: #4f96e7; >>

Поле поиска

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

Список событий

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

Опять же, это один и тот же компонент, который адаптируется к ширине своего родителя. Разве это не здорово? По мне, да.

Об авторе

Компонент «Об авторе» очень распространён в блогах. Его можно использовать в различных контекстах, и поэтому он должен адаптироваться. На приведённом выше рисунке это показано.

Соцсети

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

Когда компонент находится в боковой панели (слева), то используется его уменьшенная версия. Когда родитель больше (например, основной раздел), то будет использоваться полная версия.

Спасибо за чтение 🙂

P.S. Это тоже может быть интересно:
  • «Запашки» кода React-компонентов
  • Псевдокласс :has() — не только «родительский селектор»
  • День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari

Если вам понравилась статья, поделитесь ей!

Флекс-контейнер — CSS: Основы Flex

Главной частью концепции Flex является контейнер. Внутри него дочерние элементы начинают подчиняться новой логике, ее мы рассмотрели в прошлом уроке.

Display

Чтобы создать контейнер, используется свойство display со значением flex . Сам контейнер внешне поведет себя как блочный элемент — будет занимать всю доступную ширину. Следовательно, остальные элементы будут отображаться выше или ниже него, в зависимости от их расположения в потоке документа.

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

Flex Direction

Что же мы можем сделать с контейнером? Одна из распространенных задач с использованием флекса — перестраивание элементов с оси x на ось y. Это очень частая ситуация при создании мобильных версий сайта. Предположим, что есть флекс-контейнер с тремя дочерними элементами, которые в обычной ситуации отображаются в одну линию.

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

  • column. Значение устанавливает в качестве главной оси ось y. Таким образом меняется не только направление, но и правила выравнивания элементов, которые мы изучим в следующих уроках. В качестве поперечной оси начинает выступать ось x. Данное поведение похоже на то, как если бы систему координат повернули на 90 градусов.
  • column-reverse. Данное значение также выставляет в качестве главной оси ось y, но как бы «переворачивает ее». Элементы в потоке начинают отображаться с конца.
  • row. Стандартное отображение. В качестве главной оси выступает ось x.
  • row-reverse. Элементы выстраиваются по оси x, но с конца оси. Элементы также меняют свой порядок.

Самостоятельное задание

Создайте, используя CodePen , флекс-контейнер, внутри которого создайте еще один флекс-контейнер. Установите им разные значения flex-direction , чтобы увидеть, как элементы внутри этих контейнеров будут отображены в браузере.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

Значения свойства contain

none — значение по умолчанию. Оно указывает, что контейнер не влияет на размеры или положение потомков.

strict — контейнер строго определяет размеры и положение потомков. Потомки не могут выходить за пределы контейнера и влиять на его размеры или позицию.

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

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

inline-size — элемент не будет изменять свою ширину при изменении содержимого.

layout — элемент не влияет на размеры других элементов и не мешает их позиционированию.

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

paint — элемент не влияет на окрашивание других элементов. Браузер не будет перерисовывать другие элементы, когда данный элемент изменяет свой вид, например, фоновый цвет или прозрачность.

Пример использования

�� Поддержка браузерами свойства contain

Нюансы использования

  • В некоторых случаях, особенно при использовании строгого значения strict , браузер может потребовать дополнительных ресурсов для оптимизации рендеринга. Поэтому важно тестировать и измерять производительность при использовании свойства.
  • contain применяется к самому элементу и его содержимому, но не влияет на элементы, вложенные внутри него. Если требуется оптимизировать взаимодействие внутри вложенных элементов, нужно применить свойство contain к каждому из них отдельно.
  • Свойство наиболее полезно в ситуациях, когда у вас есть небольшой набор элементов, которые могут быть легко изолированы и оптимизированы. В случае сложных макетов с большим количеством элементов, использовать contain бывает сложно и неэффективно.

Материалы по теме

  • Как задать позицию и размер элемента. CSS-свойство inset
  • Как позиционировать элементы в CSS. Свойство position
  • Как создать рамку вокруг элемента. CSS-свойствоborder
  • Как работает margin. правила внешних отступов

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

  • 13 ноября 2023

Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

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

  • 1 ноября 2023

Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

  • 13 октября 2023

WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

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

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

  • 23 сентября 2023

Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

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

Вот что получится в итоге:

  • 7 сентября 2023

Как сделать тёмную тему на сайте

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

  • 29 августа 2023

4 способа центрировать текст в CSS

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 

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

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

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

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

  • 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

Как скруглить рамку. CSS-свойство border-radius

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

  • 28 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element
  • 13 июля 2023

Как перекрыть один элемент другим. CSS-свойство z-index

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .

Синтаксис

.my-element
  • 10 июля 2023

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

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