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 | rem — корневой em (Root Em) относительно размера шрифта элемента <html>( по умолчанию 16px ) |
| vh | 1vh = 1% высоты viewport |
| vw | 1vw = 1% ширины viewport |
| vmin | 1vmin = минимум ( 1vh, 1vw ) |
Преимущество относительных единиц измерения rem и em заключается в том, что можно задавать внутренние и внешние отступы относительно размеров шрифта
При использовании rem все отступы будут пропорциональны базовому размеру шрифта ( заданному для корневого элемента ), т.е. отступы будут единообразны по всей странице
Если же нужно создать модуль, в котором будет свой собственный масштаб, то мы устанавливаем размер шрифта для контейнера ( родительского элемента ), а все остальные размеры задаем с помощью em
1main {
padding: 2rem;
font-family: Arial;
line-height: 1rem;
}
h1 {
font-size: 2rem;
padding: 2rem;
}
h2 {
font-size: 1.5rem;
padding: 1rem;
}
h3 {
font-size: 1.2rem;
padding: 0.5rem;
}
section {
font-size: 12px;
padding: 2em;
line-height: 3em;
}
section * {
font-size: 1.8em;
padding: 1.2em;
text-align: justify;
}<body>
<main>
<h1>Пример</h1>
<section>
<p>
Изменяем только один размер - размер шрифта элемента section
</p>
<p>
При этом размеры отступов и высота строки автоматически пересчитываются,
поскольку заданы в em
</p>
<p>
Если же мы меняем размер шрифта корневого элемента ( html ),
то автоматически будут пересчитаны размеры шрифтов и
отступы для заголовков h1, h2, h3</p>
</section>
<h2>Заголовок второго уровня</h2>
<section>
<p>
Вставьте сюда любой текст...
</p>
<p>
Вставьте сюда любой текст...
</p>
<p>
Вставьте сюда любой текст...
</p>
</section>
<h3>Заголовок третьего уровня</h3>
<section>
<p>
Вставьте сюда любой текст...
</p>
<p>
Вставьте сюда любой текст...
</p>
<p>
Вставьте сюда любой текст...
</p>
</section>
</main>
</body> |
|---|
body { 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
