[Перевод] Свойства блочной модели CSS. Объяснение с примерами

Скрипты и советы | 31 июля 2021

Уроки CSS на Хабрахабре, habrahabr.ru, Веб-дизайн, CSS, HTML, Дизайн, вёрстка, верстка сайтов, стили, стилизация, сайт, сайты, сайтостроение,

Приветствую всех жителей хабравиля! Сегодня я подготовил для вас основы по блочной модели CSS. Безусловно, многие из вас знают о чём идёт речь, но сегодня я постараюсь объяснить прописные истины более понятно и наглядно, что поможет вам создавать веб-сайты, с идеально подходящими друг другу элементами (с точностью до пикселя), и научит более точно использовать свойства размеров, полей, отступов и границ. Итак, всех приглашаю под кат и погнали!

Погнали!
[Перевод] Всё, что вам нужно знать про CSS Margin

Одним из первых, что многие из нас усвоили, когда изучали CSS, были особенности разных составляющих блока в CSS,...

Подробнее
[Перевод] Полное визуальное руководство/шпаргалка по CSS Grid

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые...

Подробнее
[Перевод] CSS-функции min(), max() и clamp()

Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные...

Подробнее
[Перевод] [ В закладки ] CSS: использование внутренних и внешних отступов

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

Подробнее
[Перевод] Работа с Flexbox в гифках

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

Подробнее
Web-разработка / Ссылка Поддержка браузерами модели RGBa

Модель RGBa отличается от RGB тем, что позволяет дополнительно указать прозрачность цвета. Это тоже самое, что и...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями