CSS-свойства, связанные с моделью коробки

Articles

Эта статья объясняет CSS-свойства, связанные с моделью коробки.

Вы можете узнать о случаях применения и синтаксисе таких свойств, как ширина, высота и отступы.

YouTube Video

HTML для предварительного просмотра

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

Связанное с моделью коробки

Свойства `width` и `height`

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

Свойства width и height — это CSS-свойства, используемые для указания ширины и высоты элемента. Они особенно используются при установке размеров блочных элементов, изображений, видео и т.д.

В классе width-height-fixed указаны фиксированные значения ширины и высоты.
В классе width-height-percent указаны процентные значения ширины и высоты.

Значения, которые можно указать

Свойства width и height могут принимать следующие значения.

auto: Размер по умолчанию. Автоматически подстраивает размер относительно родительского элемента.
Фиксированные значения: Задает фиксированную ширину в пикселях, процентах или относительных единицах.(ex: 100px, 50%, 10rem)
- Например, 250px устанавливает размер элемента в 250 пикселей, а 50% задает 50% от размера родительского элемента.
min-content: Подходит под минимальный размер содержимого.
max-content: Подходит под максимальный размер содержимого.
fit-content: Подстраивает размер элемента в зависимости от размера содержимого.

Указание минимальных и максимальных значений

min-width, max-width, min-height и max-height — это CSS-свойства, используемые для задания ограничений размера элемента по его ширине и высоте. С их помощью вы можете гарантировать, что элемент останется в определенном диапазоне размеров.

Свойства `margin` и `padding`

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin и padding — это свойства, используемые в CSS для управления внешним и внутренним отступами элементов в рамках модели коробки (box model). Они используются для регулирования пространства между элементами и улучшения внешнего вида.

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

Таким образом, свойство margin задает внешнее пространство элемента, регулируя расстояние между элементами. С другой стороны, свойство padding задает внутреннее пространство элемента, регулируя расстояние между содержимым и границей.

Свойство `margin`

Свойство margin задает внешнее пространство (отступ) элемента. Оно используется для создания пространства между соседними элементами. Можно указать следующие значения:.
Фиксированные значения: Вы можете указать размер отступа в пикселях, относительных единицах (em, rem) или процентах.(ex: 10px, 1em, 5%)
auto: Полезно для выравнивания блочных элементов по центру. При заданной ширине оно автоматически регулирует левые и правые отступы.
Положительные и отрицательные значения: Положительные значения увеличивают пространство, а отрицательные приближают элементы друг к другу.

Сокращенная запись:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

Свойство margin может принимать от одного до четырех значений.

Одно значение: Применяется ко всем сторонам.
Два значения: Первое применяется к верхней и нижней сторонам, второе — к левой и правой.
Три значения: Применяются в порядке: верх, слева и справа, низ.
Четыре значения: Применяются в порядке: верх, справа, низ, слева.

Свойство `padding`

Функция:

Свойство padding задает внутреннее пространство (отступы) элемента. Оно используется для создания пространства между содержимым и границей элемента. Можно указать следующие значения:.
Фиксированные значения: Указывает размер отступов.(ex: 10px, 1em, 5%)
Отрицательные значения не могут быть использованы. Значения отступов могут быть указаны только положительными числами.

Сокращенная запись:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

Как и для margin, вы можете указать от одного до четырех значений.

Одно значение: Применяется ко всем сторонам.
Два значения: Первое применяется к верхней и нижней сторонам, второе — к левой и правой.
Три значения: Применяются в порядке: верх, слева и справа, низ.
Четыре значения: Применяются в порядке: верх, справа, низ, слева.

Свойство `box-sizing`

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing — это CSS-свойство, которое контролирует, как рассчитываются ширина и высота элемента.

В классе content-box ширина элемента составляет 360px. width равна 300px, при этом левый и правый padding в сумме составляют 40px, а левый и правый border — 20px, что в итоге даёт 360px.
В border-box ширина элемента составляет 300px. padding и border включаются в указанную width.

Значения свойства `box-sizing`

Основные значения box-sizing — это content-box и border-box, причем content-box является значением по умолчанию.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

Если указано content-box, только ширина и высота содержимого устанавливаются через width и height. padding и border добавляются к ним для определения итогового размера. Другими словами, width и height относятся только к области содержимого.

В данном примере указано значение width 200px, но с учетом ширины левого и правого padding и border итоговая ширина элемента составляет 260px.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

Когда указано border-box, ширина и высота (width и height) рассчитываются с учетом padding и border. Другими словами, указанные значения width и height становятся общим размером содержимого, padding и border.

В этом случае указанный width равен 200px, и поскольку padding и border также включены, итоговая фактическая ширина элемента остается равной 200px. padding и border регулируются внутри него.

Сводка различий `box-sizing`

Свойство	Метод расчёта	Расчёт фактической ширины
`content-box` (по умолчанию)	`width` относится только к содержимому. `padding` и `border` добавляются.	`width` + `padding` + `border`
`border-box`	`width` включает всё (содержимое, `padding`, `border`)	Указанный `width` используется как есть.

Преимущества использования `box-sizing`

Использование border-box стабилизирует разметку. Добавление padding или border не изменяет указанный размер, упрощая расчёты.
Это полезно при создании гибких макетов. В адаптивных дизайнах или сложных макетах border-box часто используется для предотвращения неожиданных изменений размеров.

Как применить `border-box` глобально

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

Настроив CSS таким образом, вы можете применить border-box ко всем элементам, чтобы избежать неожиданных изменений размеров.

Резюме

box-sizing определяет, включаются ли padding и border в размеры width и height элемента.
Использование border-box упрощает расчёты размеров и подходит для адаптивного дизайна.

Свойство `visibility`

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

Свойство visibility используется для отображения или скрытия элементов, но, в отличие от свойства display, оно сохраняет влияние на разметку, даже если элемент скрыт. Оно лишь скрывает элемент, сохраняя его исходное положение и размер, не влияя на расположение других элементов.

Базовый синтаксис

1element {
2    visibility: value;
3}

значение: Значение, определяющее видимость элемента.

Типы значений

Свойству visibility можно присвоить следующие значения:.

`visible`

Указание visible сделает элемент видимым. Это значение по умолчанию.

`hidden`

Указание hidden скроет элемент, но его место в разметке будет сохранено.

`collapse`

collapse главным образом используется для строк или столбцов таблицы. Элемент становится невидимым, и его место также игнорируется. При применении к строкам или столбцам таблицы скрытые строки или столбцы полностью удаляются из макета.
Однако, при использовании на обычных блочных или встроенных элементах, за исключением элементов таблицы, это работает как hidden, и место в макете сохраняется.

`inherit`

Указание inherit унаследует значение свойства visibility от родительского элемента.

Различия между `visibility` и `display`

Существуют следующие различия между visibility и display.

visibility: hidden скрывает элемент, но сохраняет его место и макет.
display: none полностью удаляет элемент из макета, позволяя другим элементам занять это место.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

CSS свойства для отображения кода и цитат Свойства CSS, связанные с фоном

CSS-свойства, связанные с моделью коробки

YouTube Video

HTML для предварительного просмотра

Связанное с моделью коробки

Свойства width и height

Значения, которые можно указать

Указание минимальных и максимальных значений

Свойства margin и padding

Свойство margin

Сокращенная запись:

Свойство padding

Функция:

Сокращенная запись:

Свойство box-sizing

Значения свойства box-sizing

content-box

border-box

Сводка различий box-sizing

Преимущества использования box-sizing

Как применить border-box глобально

Резюме

Свойство visibility

Базовый синтаксис

Типы значений

visible

hidden

collapse

inherit

Различия между visibility и display

YouTube Video

Свойства `width` и `height`

Свойства `margin` и `padding`

Свойство `margin`

Свойство `padding`

Свойство `box-sizing`

Значения свойства `box-sizing`

`content-box`

`border-box`

Сводка различий `box-sizing`

Преимущества использования `box-sizing`

Как применить `border-box` глобально

Свойство `visibility`

`visible`

`hidden`

`collapse`

`inherit`

Различия между `visibility` и `display`