Размеры

Question 1

box-sizing
(размер коробки)

Answer 1

Свойство box-sizing применяется для изменения алгоритма расчёта ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

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

border-box
Свойства width и height включают в себя значения полей (padding) и границ (border), но не отступов (margin).

Question 2

width
(ширина)

Answer 2

Свойство width устанавливает ширину блочных или заменяемых элементов (к ним, например, относится <img></img>).

Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Браузеры неодинаково работают с шириной, результат отображения зависит от используемого <!DOCTYPE>.

auto
Устанавливает ширину исходя из типа и содержимого элемента.

/* <length> values */
width: 300px;
width: 25em;</length>

/* <percentage> value */
width: 75%;</percentage>

/* Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

Question 3

height
(высота)

Answer 3

Свойство height устанавливает высоту блочных или заменяемых элементов (к ним, например, относится <img></img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.

/* Keyword value */
height: auto;

/* <length> values */
height: 120px;
height: 10em;</length>

/* <percentage> value */
height: 75%;</percentage>

/* Global values */
height: inherit;
height: initial;
height: unset;

Question 4

max-height
(Максимальная высота)

Answer 4

Свойство max-height устанавливает максимальную высоту элемента.

Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height, max-height и min-height.

Если значение высоты (height) больше значения max-height, то высота элемента принимается равной значению max-height.

/* <length> value */
max-height: 3.5em;</length>

/* <percentage> value */
max-height: 75%;</percentage>

/* Keyword values */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/* Global values */
max-height: inherit;
max-height: initial;
max-height: unset;

Question 5

max-width
(Максимальная ширина)

Answer 5

Свойство max-width устанавливает максимальную ширину элемента.

Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width.

Если значение ширины (width) больше значения max-width, то ширина элемента принимается равной значению max-width.

/* <length> value */
max-width: 3.5em;</length>

/* <percentage> value */
max-width: 75%;</percentage>

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;

Question 6

min-width
(минимальная ширина)

Answer 6

Свойство min-width устанавливает минимальную ширину элемента.

Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.

Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width, max-width и min-width.

Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.

Question 7

min-height
(минимальная высота)

Answer 7

Свойство min-height задаёт минимальную высоту элемента.

Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height.

Если значение высоты (height) меньше значения min-height, то высота элемента принимается равной min-height.

/* <length> value */
min-height: 3.5em;</length>

/* <percentage> value */
min-height: 10%;</percentage>

/* Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;

/* Global values */
min-height: inherit;
min-height: initial;
min-height: unset;