Page 287 - Сила CSS3 Освой новейший стандарт

Альтернативы модели гибкого поля • 287

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

Например, мы хотим задать фоновый цвет для полей с рекламируемыми про-
дуктами на странице нашей вымышленной пекарни. Кроме того, мы собираемся
добавить по краям этих полей немного пустого пространства — его ширина будет
определяться в пикселах, — для того чтобы сместить содержимое ближе к центру.
А еще можно было бы создать для каждого поля рамку и также определить ее
ширину в пикселах!

Для того чтобы увидеть реализацию этого сценария в действии, откройте файл
box-sizing_start.html из папки с файлами упражнений для этой главы. Это та же
страница, с которой мы работали в главе 6, но для упрощения кода я удалила из
нее медиазапросы.

Найдите существующее правило .feature на строке 116, приблизительно в середине
элемента style внутри тега head страницы. Измените значение свойства padding, для
того чтобы увеличить ширину пустого пространства по бокам и внизу каждого поля:
.feature {
float: left;
width: 30%;
margin: 0 4.5% 0 0;
padding: 130px 15px 5px 15px;
background-repeat: no-repeat;
background-position: top center;
}

Теперь добавьте фоновый цвет и рамку:
.feature {
float: left;
width: 30%;
margin: 0 4.5% 0 0;
padding: 130px 15px 5px 15px;
border: 1px dashed #3C9;
background-color: hsla(0,0%,100%,.3);
background-repeat: no-repeat;
background-position: top center;
}

Сохраните страницу и откройте ее в браузере. Вы видите, что третье поле пере-
местилось на новую строку (рис. 7.26). Это произошло потому, что общая ширина
каждого поля рассчитывается так: 30% ширины окна плюс два пиксела на боковые
отрезки рамки плюс 30 пикселов пустого пространства по бокам. Прибавьте сюда
дополнительные кромки шириной 4,5% у первого и второго поля, и суммарная
ширина трех полей превысит 100%. Точное значение суммарной ширины нам не-

www.trk.kg