skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180

Руководство по свойству box-sizing в CSS3

По умолчанию фактическая ширина или высота поля элемента, видимого/отображаемого на веб-странице, зависит от его ширины width, высоты height и свойств padding и border. Например, если вы примените некоторые отступы padding и границы border к элементу с width: 100%, появится горизонтальная полоса прокрутки, как в примере ниже.

.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
}

Это очень распространенная проблема, с которой сталкиваются веб-разработчики. Для ее решения в CSS3 есть свойство box-sizing. Оно изменяет блочную модель CSS по умолчанию таким образом, что любые отступы padding и границы border, заданные для элемента, учитываются при расчете его ширины и высоты браузером.

.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
    box-sizing: border-box;
}

Теперь полоса прокрутки исчезла.

При использовании CSS-свойства box-sizing, получающиеся ширина и высота области содержимого вычисляются путем вычитания границ border и ширины отступов padding соответствующих сторон из указанных свойств width и height.

Создание макетов с помощью Box-Sizing

Благодаря CSS-свойству box-sizing для определения размера блоков создание макета из нескольких столбцов с использованием процентов становится гораздо проще. Теперь вам не нужно беспокоиться об окончательном размере элемента при добавлении к ним отступов или границ.

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

.box {
    width: 50%;
    padding: 20px;
    background: #f2f2f2;
    float: left;
    box-sizing: border-box;
}

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

.box {
    width: 30%;
    padding: 20px;
    margin-left: 5%;
    background: #f2f2f2;
    float: left;
    box-sizing: border-box;
}
.box:first-child {
    margin-left: 0;
}

О том, как создавать сетку на основе флексов (flex) см. Руководство по flexbox в CSS3.

etxt banner 480x320etxt banner 728x90etxt banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…
Подробнее

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
Подробнее

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Подробнее