Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Размер блока CSS


Размер блока CSS

Свойство CSS box-sizingпозволяет нам включать отступы и границы в общую ширину и высоту элемента.


Без свойства CSS box-sizing

По умолчанию ширина и высота элемента вычисляются следующим образом:

ширина + отступ + граница = фактическая ширина элемента
высота + отступ + граница = фактическая высота элемента

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

На следующем рисунке показаны два элемента <div> с одинаковыми указанными шириной и высотой:

Этот div меньше (ширина 300 пикселей и высота 100 пикселей).

Этот div больше (ширина также 300px и высота 100px).

Два приведенных выше элемента <div> в конечном итоге имеют разные размеры в результате (поскольку в div2 указано заполнение):

Пример

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Отель box-sizingрешает эту проблему.



С помощью свойства CSS box-sizing

Свойство box-sizingпозволяет нам включать отступы и границы в общую ширину и высоту элемента.

Если вы устанавливаете box-sizing: border-box;для элемента, отступы и границы включаются в ширину и высоту:

Оба div теперь имеют одинаковый размер!

Ура!

Вот тот же пример, что и выше, с box-sizing: border-box; добавлением к обоим элементам <div>:

Пример

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Поскольку результат использования box-sizing: border-box;намного лучше, многие разработчики хотят, чтобы все элементы на их страницах работали таким образом.

Приведенный ниже код гарантирует, что размер всех элементов будет более интуитивным. Многие браузеры уже используют box-sizing: border-box;для многих элементов формы (но не для всех — именно поэтому поля ввода и текстовые области выглядят по ширине по-разному: 100%;).

Применение этого ко всем элементам безопасно и разумно:

Пример

* {
  box-sizing: border-box;
}

Свойство размера окна CSS

Property Description
box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not