Как работать с размером блока в CSS
По умолчанию браузеры при вычислении ширины элемента применяют вычисленную ширину и высоту кобласть содержимого, без учета отступов, границ и полей.
Этот подход оказался довольно сложным для работы.
Вы можете изменить это поведение, установивbox-sizing
свойство.
Вbox-sizing
недвижимость - большое подспорье. Имеет 2 значения:
border-box
content-box
content-box
по умолчанию, тот, который у нас был давным-давноbox-sizing
стал вещью.
border-box
это то новое и замечательное, что мы ищем. Если вы установите это для элемента:
.my-div {
box-sizing: border-box;
}
Расчет ширины и высоты включает отступы и границу. Остается только поле, что разумно, поскольку в нашем сознании мы также обычно рассматриваем это как отдельную вещь: поле выходит за рамки.
Это свойство - небольшое изменение, но имеет большое значение. CSS Tricks даже объявилиМеждународный день осведомленности о размерах коробок, просто говоря, и рекомендуется применить его к каждому элементу на странице, прямо из коробки, следующим образом:
*, *:before, *:after {
box-sizing: border-box;
}
Скачать мою бесплатнуюСправочник CSS
Больше руководств по css:
- Руководство по Flexbox
- Учебник по CSS Grid
- Переменные CSS (настраиваемые свойства)
- Введение в PostCSS
- Свойство поля CSS
- Как центрировать элемент с помощью CSS
- Системные шрифты CSS
- Как напечатать HTML со стилем
- Вводное руководство по переходам CSS
- Учебник по CSS-анимации
- Введение в CSS
- Руководство по CSS
- Как настроить Tailwind с PurgeCSS и PostCSS
- Шпаргалка по попутному ветру
- Как непрерывно вращать изображение с помощью CSS
- Как сделать таблицу адаптивной с помощью CSS
- Как отлаживать CSS путем деления пополам
- Селекторы CSS
- CSS-каскад
- Специфика CSS
- Селекторы атрибутов CSS
- Цвета CSS
- Единицы CSS
- URL-адрес CSS ()
- CSS Типографика
- Коробочная модель CSS
- Свойство CSS position
- CSS Media Queries и адаптивный дизайн
- Запросы функций CSS
- CSS преобразования
- Как стилизовать списки с помощью CSS
- Префиксы поставщиков CSS
- Наследование CSS
- Псевдоклассы CSS
- Псевдоэлементы CSS
- Стилизация HTML-таблиц с помощью CSS
- Свойство CSS Display
- Функция CSS calc ()
- CSS Границы
- Импорт файла CSS с помощью @import
- Обработка ошибок CSS
- CSS фильтры
- CSS Размер окна
- CSS-фоны
- Комментарии CSS
- CSS шрифты
- CSS Padding
- CSS свойство float и очистка
- CSS нормализация
- Свойство CSS z-index
- Как отключить выделение текста с помощью CSS
- Как разместить элемент в нижней части контейнера с помощью CSS
- Как инвертировать цвета с помощью CSS
- Адаптивные предварительные теги в CSS
- Адаптивные вставки видео YouTube
- Каковы хорошие значения контрольной точки CSS для адаптивного дизайна?
- Как выровнять центр в flexbox