Размер рамки CSS3 (box-sizing)

Используя функцию box-sizing в CSS3, вы можете определить эффективную ширину элемента.

Использование функции box-sizing для переопределения размера рамки

по умолчанию, фактическая ширина или высота элемента видна на веб-странице в зависимости от негоwidthилиheight,paddingиborderЗначение属性. Например, если вы устанавливаете ширину в 100% для<div>Элементы применяют некоторые внутренние поля и рамки, поэтому会出现水平ная полоса прокрутки, как показано в следующем примере.

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

Это проблема, с которой очень часто сталкиваются веб-дизайнеры. Однако, CSS3 ввел свойство box-sizing для решения этой проблемы и для того, чтобы сделать макет CSS более простым и интуитивным. Свойство box-sizing изменяет стандартный CSS-модель рамки, перемещая любой padding или border,指定的 для элементов, в область содержимого, чтобы ширина и высота элементов соответствовали указанным свойствам CSS width и height.

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

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

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

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

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

.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;
}