CSS block model
Блочная модельБлочная модель - это способ описания размеров и интервалов элемента
Она состоит из 4 элементов: границы ( border ), поля ( margin ), отступов ( padding ) и размеров самого элемента
-
border: толщина обводки по краям элемента
-
padding: пространство между границами элемента и его дочерних элементов
Фон элемента распространяется на поля padding элемента padding не может принимать отрицательных значений -
margin: пространство между границами элемента и соседних объектов
Внешние отступы всегда остаются прозрачными и через них виден фон родительского элемента margin может принимать отрицательные значения Отрицательные значения margin-top/margin-left смещают элемент вверх / влево При сдвиге элемента с помощью отрицательных значений margin соседние элементы занимают освободившееся пространство
Значения padding и margin задаются сверху по ходу часовой стрелки:
верхнее
правое
нижнее
левое
Абсолютные| единицы | комментарий |
|---|---|
| px | пиксель экрана |
| pc | пики ( 1pc = 12pt ) |
| pt | точки |
Размер точки ( pt ) зависит от разрешения экрана
| Разрешение | 1pt | ширина ( px ) | высота ( px ) |
|---|---|---|---|
| 1x | 1px | 1 | 1 |
| 2x | 4px | 2 | 2 |
| 3x | 9px | 3 | 3 |
| ... | ... | ... | ... |
При разрешении 1x одна точка равна 1 пикселю ( 1pt = 1px )
При разрешении 2x 1pt = 4px, потому что ширина 2px умножается на высоту 2px
При разрешении 3x 1pt = 9px ( 3px умножается на 3px )
... и так далее
| единицы | комментарий |
|---|---|
| % | процент от размеров родительского блока или viewport |
| em | измерение относительно высоты базового шрифта |
| rem | относительно размера шрифта элемента <html> |
| vh | 1vh = 1% высоты viewport |
| vw | 1vw = 1% ширины viewport |
| vmin | 1vmin = минимум ( 1vh, 1vw ) |
embody { font-size: 16pt; }
p { font-size: 0.8em; }
h1 { font-size: 1.2em; }
h2 { font-size: 1em; }
div {
width: 25em;
height: 25em;
background-color: #ffaa0090;
}<body>
<h1>em</h1>
<h2>относительный размер</h2>
<p>Абзац текста ( параграф )</p>
<div></div>
1em эквивалентно размеру шрифта по умолчанию, то есть 16pt<br>
1.2em = 19.2pt<br>
0.8em = 12.8pt<br>
2em = 32pt
</body>body { margin: 0; }
div {
width: 50vw;
height: 50vh;
margin: 5vh 25vw;
background-color: #ffaa0090;
}
figure {
width: 30rem;
height: 30rem;
margin: -10rem 10rem;
background-color: #ff00ff90;
}<body>
<div></div>
<figure></figure>
</body> |
|---|
Граница, или рамка элемента, задаётся с помощью свойства border
Внешние, внутренние отступы и рамка элемента не являются обязательными, по умолчанию их значение равно нулю
Тем не менее, некоторые браузеры добавляют этим свойствам положительные значения по умолчанию на основе своих таблиц стилей
Очистить стили браузеров для всех элементов можно при помощи универсального селектора:
* {
margin: 0;
padding: 0;
}Свойство, которое определяет, как элемент должен быть показан в документе
| display: | comment |
|---|---|
| inline | инлайн (строчный) |
| block | блочный |
| inline-block | инлайн-блочный |
| table | таблица |
| flex | флекс |
| ... | ... |
| none | - |
это линия, проходящая по нижнему краю прямых знаков
Высота строки — это ограничивающая рамка, созданная вокруг текста
Размещая базовую линию каждой строки текста на равномерно расположенных линиях, вы можете легко привести все элементы интерфейса в гармоничный вертикальный ритм
Свойство выравнивает строки текста внутри блока по ширине относительно его границ
p { text-align: left; }
p { text-align: right; }
p { text-align: center; }Свойство задаёт расстояние между базовыми линиями строк текста, определяя величину, на которую увеличивается или уменьшается высота блока каждого элемента
h1 {
font-size: 16px;
line-height: 20px;
}
Всемирная паутина
Пример
Flexbox Froggy
