From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/box-sizing/index.html | 128 +++++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/ru/web/css/box-sizing/index.html (limited to 'files/ru/web/css/box-sizing') diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html new file mode 100644 index 0000000000..9253fd4660 --- /dev/null +++ b/files/ru/web/css/box-sizing/index.html @@ -0,0 +1,128 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - Блоковая модель + - Контент + - высота + - размер + - ширина +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}
+ +

CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ +
+ +

По умолчанию в блоковой модели CSS ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с width: 25%; , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.

+ +

Свойство box-sizing может изменять это поведение:

+ + + +
+

Примечание: Часто выставление box-sizing: border-box полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устранаяет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя position-relative или position: absolute, box-sizing: content-box позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.

+
+ +

Синтаксис

+ +

Для свойства box-sizing  устанавливается единственное ключевое слово из списка значени ниже.

+ +

Значения

+ +
+
content-box
+
Это значение по умолчанию, определенное в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;}  будет иметь ширину 370 пикселей.
+
Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)
+
+ +
+
border-box
+
Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box {width: 350px; border: 10px solid black;} будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому border-box невозможно использовать для скрытия элемента.
+
Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +
+

Примечание: Значение padding-box устарело

+
+ +

Пример

+ +

Этот пример показывает как разные значения box-sizing изменяют видимый размер двух идентичных элементов.

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+ +

Результат

+ +

{{EmbedLiveSample('Пример', 'auto', 300)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}
+ +

{{cssinfo}}

+ +

Совмествимость с браузерами

+ +

{{Compat("css.properties.box-sizing")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf