Css box: box-sizing | htmlbook.ru
box-sizing | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||||
| 8.0+ | 4.0+ | 10.0+ | 7.0+ | 3.1+ | 5.0+ | 1.0+ | 2.1+ | 4.0+ | 3.2+ | 5.0+ |
Краткая информация
| Значение по умолчанию | content-box |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#box-sizing |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Применяется для изменения алгоритма расчета ширины и высоты элемента.
Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.
Синтаксис
box-sizing: content-box | border-box | padding-box | inherit
Значения
- content-box
- Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
- border-box
- Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
- padding-box
- Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
- inherit
- Наследует значение родителя.
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style>
.box1 {
background: #f0f0f0; /* Цвет фона */
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
border: 2px solid #000; /* Параметры рамки */
}
.box2 {
background: #fc0; /* Цвет фона */
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
margin-top: 10px; /* Отступ сверху */
border: 2px solid #000; /* Параметры рамки */
-moz-box-sizing: border-box; /* Для Firefox */
box-sizing: border-box; /* Ширина блока с полями */
}
</style>
</head>
<body>
<div>Ширина с учетом значения свойства width, полей и границ.</div>
<div>Ширина равна значению свойства width.</div>
</body>
</html>В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing. Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Ширина блоков
Браузеры
Firefox поддерживает нестандартное свойство -moz-box-sizing.
Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing.
Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box.
CSS3: свойство Box-Sizing / Хабр
Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px:
Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border. В CSS3 нам поможет свойство box-sizing.
Использование box-sizing
У этого свойства есть два значения:
- content-box — по умолчанию, контент внутри div’а будет отображаться по-старому, т.е. как в примере выше: вместо 100х100 будет 140х140
- border-box позволяет значения padding и border вычитать из ширины и длины блока, т.е. в нашем примере div останется с фиксированными параметрами, но для контента останется 60х60 px
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #eaeaea;
box-sizing: border-box;
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
}
Поддержка браузерами
Свойство box-sizing поддерживает большинство современных браузеров: Firefox 3.6+, Safari 3+, Opera 8.5+ и Internet Explorer 8+. Актуальные данные можно посмотреть на сайте caniuse.com.
Практический пример
Рассмотрим реальный пример использования свойства box-sizing. Есть меню из пяти пунктов:
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
Добавим немного CSS, в т.ч. фиксированную ширину меню в 500 px и ширину каждого элемента в 100 px:
nav {
width: 500px;
margin: 50px auto 0;
height: 50px;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
float: left;
}
nav a {
display: inline-block;
width: 100px;
height: 100%;
background-color: #ccc;
color: #555;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 12pt;
line-height: 300%;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
height: 100%;
color: #555;
text-decoration: none;
font-family: Arial, sans-serif;
}
nav li:nth-child(1) a {
background-color: #E9E9E9;
border-left: 0;
}
nav li:nth-child(2) a {
background-color: #E4E4E4;
}
nav li:nth-child(3) a {
background-color: #DFDFDF;
}
nav li:nth-child(4) a {
background-color: #D9D9D9;
}
nav li:nth-child(5) a {
background-color: #D4D4D4;
border-right: 0;
}
Меню выглядит нормально:
Но при добавлении левого или правого border’а последний пункт меню съезжает, потому что не помещается:
nav a {
border-left: 1px solid #aaa;
border-right: 1px solid #f3f3f3;
}
Но если использовать box-sizing, то этой проблемы нет:
nav a {
border-left: 1px solid #aaa;
border-right: 1px solid #f3f3f3;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
демо
Полезное чтиво по теме
— Box-sizing: border-box — FTW — Paul Irish
— Make better Web pages by understanding the CSS box model — Tech Republic
Свойство box-sizing | CSS справочник
CSS свойства
Определение и применение
CSS свойство box-sizing используется для изменения, применяемой по умолчанию CSS модели, с помощью которой вычисляются ширина и высота элементов.
- При использовании значения content-box (по умолчанию), значения свойства ширины (width) и высоты (height), а так же минимальной и максимальной ширины (min-width, max-width), и минимальной и максимальной высоты (min-height и max-height) включают в себя только содержание элемента. Такие свойства как границы (border), внутренние отступы (padding) или внешние (margin) отступы не входят.
- При использовании значения border-box значения свойства ширины (width) и высоты (height), а так же минимальной и максимальной ширины (min-width, max-width), и минимальной и максимальной высоты (min-height и max-height) включают в себя содержание элемента, границы (border) и внутренние отступы (padding). Внешние отступы (margin), как и при использовании content-box в это число не входят.
- ширина элемента вычисляется по формуле:
width (ширина) + padding-left (левый отступ) + padding-right (правый отступ) + border-left (левая граница) + border-right (правая граница). - высота элемента вычисляется по формуле:
height (ширина) + padding-top (верхний отступ)+padding-bottom (нижний отступ) + border-top (верхняя граница) + border-bottom (нижняя граница).
Поддержка браузерами
CSS синтаксис:
box-sizing:"content-box | border-box | initial | inherit";
JavaScript синтаксис:
object.style.boxSizing = "content-box"
Значения свойства
| Значение | Описание |
|---|---|
| content-box | Значения свойства ширины (width) и высоты (height), а так же минимальной и максимальной ширины (min-width, max-width), и минимальной и максимальной высоты (min-height и max-height) включают в себя только содержание элемента. Такие свойства как границы (border), внутренние отступы (padding) или внешние (margin) отступы не входят. Это значение по умолчанию. |
| border-box | Значения свойства ширины (width) и высоты (height), а так же минимальной и максимальной ширины (min-width, max-width), и минимальной и максимальной высоты (min-height и max-height) включают в себя содержание элемента, границы (border) и внутренние отступы (padding). Внешние отступы (margin), как и при использовании content-box в это число не входят. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3
Наследуется
Нет.
Анимируемое
Нет.
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования CSS свойства box-sizing</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 150px; /* устанавливаем ширину блока */
height: 150px; /* устанавливаем высоту блока */
margin: 10px; /* устанавливаем внешний отступ для всех сторон */
padding: 10px; /* устанавливаем внутренний отступ для всех сторон */
border: 10px solid green; /* устанавливаем сплошную границу 10px зеленого цвета */box-sizing | CSS | WebReference
Применяется для изменения алгоритма расчёта ширины и высоты элемента.
Согласно спецификации CSS ширина блока складывается из ширины содержимого (width), значений margin, padding и border. Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не содержимого, а размеры блока.
Краткая информация
| Значение по умолчанию | content-box |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
box-sizing: content-box | border-boxОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- content-box
- Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту содержимого и не включают в себя значения margin, padding и border.
- border-box
- Свойства width и height включают в себя значения padding и border, но не margin.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>box-sizing</title>
<style>
.box1 {
background: #f0f0f0; /* Цвет фона */
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
border: 2px solid #000; /* Параметры рамки */
}
.box2 {
background: #fc0; /* Цвет фона */
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
margin-top: 10px; /* Отступ сверху */
border: 2px solid #000; /* Параметры рамки */
box-sizing: border-box; /* Ширина блока с полями */
}
</style>
</head>
<body>
<div>Ширина с учетом значения свойства width, полей и границ.</div>
<div>Ширина равна значению свойства width.</div>
</body>
</html>
В данном примере ширина первого слоя будет равна 324 пикселя, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пикселей за счёт применения свойства box-sizing. Результат примера показан на рис. 1.
Рис. 1. Ширина блоков
Объектная модель
Объект.style.boxSizing
Примечание
Firefox до версии 29 поддерживает свойство -moz-box-sizing.
Safari до версии 5, Chrome до версии 10, Android до версии 4 поддерживают свойство -webkit-box-sizing.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.04.2020
Редакторы: Влад Мержевич
box-sizing | CSS справочник
Поддержка браузерами
| 12.0+ | 8.0+ | 29.0+ | 10.0+ | 9.5+ | 5.1+ |
Описание
CSS свойство box-sizing позволяет выбрать алгоритм вычисления ширины и высоты элемента.
В спецификации CSS2.1 определено, что общая ширина элемента вычисляется путём сложения: ширина области содержимого (width) + внутренний отступ слева и справа (padding-left и padding-right) + рамка слева и справа (border-left и border-right). Аналогичным образом вычисляется и общая высота элемента. Свойство box-sizing позволяет использовать другой алгоритм, в этом случае, свойства width и/или height определяют общую ширину и/или высоту элемента, а не области содержимого.
| Значение по умолчанию: | content-box |
|---|---|
| Применяется: | ко всем элементам, к которым можно применить свойства width и height |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.boxSizing=»border-box» |
Синтаксис
box-sizing: content-box|border-box|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| content-box | Используется по умолчанию. Ширина (width) и высота (height) работают как определено в CSS2.1, т.е. они определяют размер области содержимого. Внутренние отступы (padding) и рамка (border) элемента располагаются за пределами указанной ширины и высоты. |
| border-box | Ширина и высота определяется для всего элемента, т.е. внутренние отступы и рамка элемента находятся в пределах указанной высоты и ширины. Ширина и высота области содержимого вычисляется путём вычитания из значений ширины и высоты значений рамки и внутренних отступов элемента. Например, если общая ширина 200px, рамка слева и справа 20px и внутренний отступ слева и справа 10xp: 200 — 40 — 20 = ширина области содержимого 140px. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
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>
<div>Этот Div занимает левую половину.</div>
<div>Этот Div занимает правую половину.</div>
</div>
</body>
</html>
Попробовать »
Box-модель в CSS | CSS-Tricks по-русски
Box-модель в CSS
Box-модель в CSS — это ключевой момент. Каждый элемент на странице определяется прямоугольником, покрывающим этот элемент. Понимание того, как это работает — основа успешной вёрстки. Давайте рассмотрим как элемент влияет на элементы, лежащие вокруг него, а также обсудим вопросы отображения различными браузерами.
В первую очередь, рассмотрим как точно рассчитывается размер элемента. Взгляните на диаграмму:
Если вы пользуетесь firebug-ом, то вы уже использовали похожую диаграмму:
Обратите внимание, что в обоих примерах внешние отступы (margin) зарисованы белым цветом. Внешние отступы уникальны тем, что они не влияют на размер самого элемента, но зато оказывают влияние на соседние, и тем самым составляют важную часть box-модели.
Размеры самого элемента рассчитываются следующим образом:
| Width | width + padding-left + padding-right + border-left + border-right |
| Height | height + padding-top + padding-bottom + border-top + border-bottom |
Что если значение не указаны?
Если вы используете CSS reset, то значения для внутренних отступов и границ будут нулевыми, иначе они будут равны значениям по умолчанию для используемого браузера (которое не обязательно является нулевым).
Если ширина элемента не указана (а элемент является блочным), то всё немного проще. Давайте начнём с этого, а затем перейдём к другим вопросам, которые необходимо знать о box-модели.
Ширина по умолчанию для блочных элементов.
В случае если вы не объявили ширину, а элемент имеет статичное (static) или относительное (relative) позиционирование, то ширина будет 100%, а внутренние отступы и границы будут считаться частью этой ширины. Однако если вы явно укажите ширину равной 100%, то внутренние отступы будут добавляться к основной ширине.
Смысл в том, что в этом случае ширина элемента на самом деле не 100%, а то что осталось после обработки внутренних отступов и границ. Это особенно полезно знать, поскольку существует множество случаев когда удобно либо установить ширину, либо не устанавливать её.
Самым неприятным моментом я нахожу то, что для элемента textarea, которому очень часто необходимо установить ширину, необходимо указывать атрибут col. Таким образом у нас не получится сделать его ширину равной 100%. В статической вёрстке мы, конечно можем подогнать окружающие элементы, но как поступать при плавающей разметке?
Элементы с абсолютным позиционированием
Элементы с абсолютным позиционированием, для которых ширина не установлена, ведут себя слегка странно. Их ширина устанавливается такой, чтобы только хватило покрыть контент.
Так продолжается до тех пор, пока ширина элемента не станет равной ширине родителя (ближайшего с относительным позиционированием, либо окно браузера), а затем содержимое начнёт переноситься на другую строку. Это выглядит естественно для элементов, которые увеличиваются по вертикали, для того чтобы вместить контент. Но довольно странно когда это поведение происходит горизонтально. Эта странность, на самом деле является оправданной, так как есть много причуд в том, как разные браузеры справляются с этим, не говоря уж о том, что текст рендерится по разному в разных браузерах.
Обтекаемые элементы
Такое же точно поведение наблюдается у элементов с установленным свойством float. Элементу устанавливается ширина, минимально необходимая для того чтобы вместить контент, расширяется до ширины родительского элемента (хотя относительное позиционирование уже необязательно). Из-за хрупкой природы этих «бесширинных» элементов, они практически не используются в критически важных сценариях. Если вы, например, сделали сайдбар, указав для div какой-нибудь float, и не установили ширину, то каждый элемент внутри него ответственный за размер этого сайдбара.
Строчные элементы тоже прямоугольники.
Довольно просто представить блочный элемент прямоугольником, однако строчные (inline) элементы тоже являются прямоугольниками. Достаточно представить их очень-очень длинными и тощими. Такими, что они переносятся по строкам. Они тоже могут иметь внешние и внутренние отступы и границы, как и любой другой элемент на странице.
Перенос по строкам может вводить в заблуждение. Левый внешний отступ, как показано выше, работает так, как вы себе представляли, но только в первой строке, там, где начинается прямоугольник. Внутренние отступы применились сверху и снизу текста, как это должно быть, а в местах переноса текста они игнорируются, и следующая строка начинается с позиции, указанной свойством line-height.
Особенность обработки в IE6
В Internet Explorer 6.0, при неустановленном doctype, есть одна существенная разница при расчёте размеров элементов. Если во всех браузерах под шириной подразумевается ширина контента, то в IE6 — это ширина вместе с внутренними отступами и границами. Точно также и с высотой.
Хочу увидеть всё собственными глазами
Хотите посмотреть как формируется ваша страница? Попробуйте дописать в ваш стилевой файл следующее:
* {
border: 1px solid red !important;
}CSS Размер коробки
CSS Размер коробки
Свойство CSS box-sizing позволяет нам включать отступы и границу в
общая ширина и высота элемента.
Без CSS-свойства размера блока
По умолчанию ширина и высота элемента рассчитываются следующим образом:
ширина + отступ + граница = фактическая ширина элемента
высота + отступ + граница = фактическая высота элемента
Это означает: когда вы устанавливаете ширину / высоту элемента, элемент часто появляется
больше, чем вы установили (поскольку граница и отступ элемента добавляются к указанной ширине / высоте элемента).
На следующем рисунке показаны два элемента
указанная ширина и высота:
Этот div меньше (ширина 300 пикселей, высота 100 пикселей).
Этот div больше (ширина также 300 пикселей и высота 100 пикселей).
Два элемента
(потому что div2 имеет отступ
указано):
Пример
.div1 {
ширина: 300 пикселей;
высота:
100px;
граница: сплошной синий 1px;
}
.div2 {
ширина: 300 пикселей;
высота: 100 пикселей;
отступ: 50 пикселей;
граница: сплошной красный 1px;
}
Попробуй сам »
Свойство box-sizing решает
Эта проблема.
С CSS свойством размера блока
Свойство box-sizing позволяет нам включать отступы и границу в
общая ширина и высота элемента.
Если вы установите box-sizing: border-box; для элемента, отступы и граница
входит в ширину и высоту:
Оба блока теперь одинакового размера!
Ура!
Вот тот же пример, что и выше, с box-sizing: border-box;
добавлено к обоим элементам
Пример
.div1 {
ширина: 300 пикселей;
высота:
100px;
граница: сплошной синий 1px;
размер коробки: рамка-рамка;
}
.div2 {
width: 300px;
высота: 100 пикселей;
отступ: 50 пикселей;
граница: сплошной красный 1px;
размер коробки: рамка-рамка;
}
Попробуй сам »
Так как результат использования box-sizing: border-box; намного лучше, многие разработчики хотят, чтобы на их
страницы работать таким образом.
Приведенный ниже код обеспечивает более интуитивное определение размеров всех элементов.Многие браузеры уже используют box-sizing: border-box; для
многие элементы формы (но не все — вот почему
поля ввода и текста по-разному выглядят при ширине: 100%;).
Применять это ко всем элементам безопасно и разумно:
CSS Размер окна
| Имущество | Описание |
|---|---|
| размер коробки | Определяет, как рассчитываются ширина и высота элемента: следует они включают отступы и границы, или нет |
.
CSS свойство размера коробки
Пример
Включить отступ и границу в
то
общая ширина и высота элемента:
# example1 {
box-sizing: border-box;
}
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Свойство box-sizing определяет, как ширина и высота элемента
вычислено: должны ли они включать отступы и границы или нет.
| Значение по умолчанию: | контент-бокс |
|---|---|
| Унаследовано: | нет |
| Анимируемое: | нет. Прочитать о animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.boxSizing = «border-box» Попробуй это |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
| Объект | |||||
|---|---|---|---|---|---|
| Размер коробки | 10,0 4,0 -webkit- | 8,0 | 29,0 2,0 -моз- | 5,1 3,2 -webkit- | 9,5 |
Синтаксис CSS
размер коробки: поле содержимого | граница-поле | начальное | наследование;
Стоимость недвижимости
| Значение | Описание |
|---|---|
| Контент-бокс | По умолчанию.Свойства ширины и высоты (и свойства min / max) включают только содержимое. Граница и обивка не включены |
| бордюр | Свойства ширины и высоты (и свойства min / max) включают содержимое, отступы и граница |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальные |
| наследовать | Наследует это свойство от своего родительского элемента.Читать про наследство |
Другие примеры
Пример
Укажите две рамки с полями рядом:
div
{
размер коробки: рамка-рамка;
ширина: 50%;
граница: сплошной красный 5 пикселей;
плыть налево;
}
Попробуй сам »
Пример
Комплект «Коробка универсальная калибровочная»:
* {
размер коробки: рамка-рамка;
}
Попробуй сам »
Связанные страницы
Учебное пособие по CSS: CSS Box Sizing
Ссылка на HTML DOM: свойство boxSizing
.Учебник
CSS Box Model | HTML и CSS — это сложно
Вертикальное свертывание поля
Еще одна особенность блочной модели CSS — это «вертикальное поле.
коллапс ». Когда у вас есть две коробки с вертикальными полями, сидящие справа
рядом друг с другом они рухнут. Вместо того, чтобы складывать поля вместе
как и следовало ожидать, отображается только самый большой.
Например, давайте добавим верхнее поле в 25 пикселей к нашему
элемент:
п {
отступ: 20 пикселей 0 20 пикселей 10 пикселей;
маржа сверху: 25 пикселей;
нижнее поле: 50 пикселей;
}
Каждый абзац должен иметь 50 пикселей внизу и 25 пикселей на
Топ.Это 75 пикселей между нашими
элементами, верно?
Неправильно! Между ними останется только 50px
потому что меньшее верхнее поле сжимается в большее нижнее.
Это поведение может быть очень полезно, когда вы работаете с большим количеством
различных типов элементов, и вы хотите определить их макет как
Минимальное расстояние между другими элементами.
Предотвращение краха маржи
Это также может сильно раздражать.Иногда вы хотите предотвратить поля
от разрушения. Все, что вам нужно сделать, это поместить еще один невидимый элемент между
их:
Абзацы тоже блоки. Однако , & lt; em & gt; и & lt; strong & gt;
элементов нет. Это встроенные элементы.
Блочные элементы определяют поток HTML-документа, а встроенные элементы
не надо.
Подробнее об элементе
раздел.Важным моментом здесь является то, что только последовательных элемента могут
рушатся друг в друга. Размещение элемента с ненулевой высотой (отсюда и
padding-top ) между нашими абзацами заставляет их отображать обаверхнее поле
25px и нижнее поле 50px . Помните, что отступы никогда не сворачиваются, поэтому альтернатива
решением было бы использовать padding для разнесения наших абзацев
вместо маржи собственности.Однако это работает, только если
вы не используете отступы ни для чего другого (на данный момент мы, поэтому
остановимся на варианте
Третий способ избежать коллапса маржи — придерживаться
соглашение о полях только снизу или только сверху. Например, если все ваши элементы
только определяют нижнюю границу, у них нет возможности
коллапс.
Наконец, схема компоновки флексбокса
поля не сжимаются, поэтому это даже не проблема для современных
веб-сайты.
.
CSS свойство box-decoration-break
Пример
Укажите свойство box-decoration-break:
span.ex1 {
-webkit-box-decoration-break: clone;
-o-box-decoration-break: клон;
коробка-украшение-разрыв:
клон;
}
span.ex2 {
-webkit-box-decoration-break: ломтик;
-o-box-decoration-break: ломтик;
коробка-украшение-перерыв:
кусочек;
}
Попробуй сам »
Определение и использование
Свойство box-decoration-break определяет, как фон, отступы,
применяется граница, изображение границы, тень блока, поля и путь обрезки элемента
когда коробка для элемента фрагментирована.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следует -webkit-, указывают первую версию, работавшую с префиксом.
| Объект | |||||
|---|---|---|---|---|---|
| Коробка-перерыв | 22.0 -webkit- | 79,0 | 32.0 | 6.1 -webkit- | 11,5 -вебкит- |
Синтаксис CSS
коробка-украшение-разрыв: срез | клон | начальный | наследование | отключено;
Стоимость объекта
| Значение | Описание |
|---|---|
| ломтик | По умолчанию. Коробочные украшения применяются ко всему элементу и разбиваются на края фрагментов элемента |
| клон | Украшение коробки применяется к каждому фрагменту элемента, как если бы фрагменты были отдельными элементами.Границы охватывают четыре края каждый фрагмент элемента, а фоны перерисовываются полностью для каждого фрагмент |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальная |
| наследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
.