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

290 • Глава 7. Вспоминаем навыки верстки

Вместо того чтобы менять ширину полей, можно прибегнуть к другому способу:
вложить еще один div-блок в каждое поле с рекламируемым продуктом и задать
ширину рамок и заполнения пустыми символами для этих внутренних div. Та-
ким образом, каждое внешнее поле все так же будет занимать 30% ширины, а все
остальные элементы будут размещаться внутри него, и их ширина фактически будет
вычитаться из ширины поля. На этой странице совершенно нетрудно определить
несколько вложенных блоков div, но в сложных дизайнах число дополнительных
блоков может резко возрасти, что увеличит не только время, затрачиваемое на раз-
работку, но и размер файлов с кодом HTML и CSS.
Гораздо эффективнее прибегнуть к помощи CSS3 и вообще не трогать код HTML.
Новому свойству box-sizing вместо значения по умолчанию content-box при-
свойте значение border-box. Когда с полем связана модель border-box, браузер не
добавляет, а вычитает ширину забивки пустыми символами и рамки из ширины
поля (рис. 7.28). Следовательно, вы можете не сомневаться, что общее пространство,
занимаемое полем, останется равным объявленному вами значению width.

«Новая» модель поля

450 пикселов

«Старая» модель поля

Рис. 7.28. Различие между content-box и border-box заключается в том, какой размер
определяет значение свойства width: ширину области содержимого
или ширину всего поля от рамки до рамки

Сложное вычиСление ширины
Еще одна возможность CSS3, которая могла бы оказаться полезной на нашей странице
с разными единицами измерения, — это функция calc. Ее можно использовать в качестве
значения таких свойств, как width и margin, определяющих размер экранных элементов.
Вместо того чтобы вычислять размер самостоятельно, вы просто добавляете формулу
его определения. Например, на странице нашей пекарни свойству width каждого поля
с рекламируемым продуктом можно присвоить значение calc(30%-32px).
В действительности формулы могут быть значительно сложнее, и функцию можно при-
менять не только для определения свойства box-sizing. Недостаток такого подхода за-
ключается в том, что значения приходится жестко кодировать в формуле, поэтому если

www.trk.kg