Свойство CSS box-sizing - это настоящий спасательный круг для тех, кто устал считать пиксели вручную. Оно позволяет гибко управлять алгоритмом вычисления ширины и высоты элементов, делая вёрстку более предсказуемой и приятной. По стандартным правилам спецификации CSS2.1 общая ширина элемента складывается из нескольких частей: ширина области содержимого () + внутренние отступы слева и справа ( и ) + толщина рамки слева и справа ( и ). То же самое касается и высоты. Однако свойство box-sizing даёт нам возможность сменить логику на более удобную: в этом случае параметры width и/или height начинают определять итоговый размер всего блока, а не только его «начинки». Это??? упрощает работу с макетами! | Значение по умолчанию: | content-box | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.boxSizing="border-box" | | Значение | Описание | | content-box | Это базовый режим. Здесь width и height работают строго по классическим правилам CSS2.1, задавая размер только внутренней области содержимого. Не забудьте про то, что внутренние отступы () и рамка () «вылетают» за пределы указанных размеров, увеличивая общий габарит элемента. | | border-box | Самый популярный вариант для современных проектов! В этом режиме width и height охватывают весь элемент целиком: содержимое, отступы и рамку. Размер внутренней области вычисляется автоматически путем вычитания из общей ширины значений рамки и внутренних отступов. Например, если общая ширина 200px, рамка слева и справа 20px и внутренний отступ слева и справа 10xp: 200 - 40 - 20 = ширина области содержимого 140px. | | inherit | Позволяет элементу унаследовать значение box-sizing от родительского блока, что очень удобно для создания единообразных стилей во всей иерархии DOM. | Пример html head style type="text/css" div.container { width: 30em; border: 1em solid; overflow: auto; } div.box { box-sizing: border-box; width: 50%; border: 1em solid red; float: left; } /style /head body div class="container" div class="box"Этот Div занимает левую половину./div div class="box"Этот Div занимает правую половину./div /div /body /html
|