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 | - |
Свойство position позволяет точно задать новое местоположение блока относительно того места, где он находился бы в нормальном потоке документа
По умолчанию все элементы располагаются последовательно один за другим в том порядке, в котором они определены в структуре HTML-документа
Значение атрибута position
|
comment |
|---|---|
static |
Значение по умолчанию, означает отсутствие позиционирования Элементы отображаются последовательно один за другим в том порядке, в котором они определены в HTML-документе Используется для очистки любого другого значения позиционирования |
🔸relative
|
Относительно позиционированный элемент сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал, не исчезает При этом такой элемент может перекрывать другое содержимое на странице |
🔸absolute
|
Абсолютно позиционированный элемент удаляется из потока документа и позиционируется относительно границ содержащего его контейнера или окна браузера Контейнер для абсолютно позиционированного элемента — ближайший элемент-предок, значение свойства position которого равно relative |
🔸fixed
|
Положение элемента фиксируется относительно viewport, сам элемент при этом удаляется из основного потока документа Элемент не меняет своего положения во время прокрутки страницы |
🔸 - будут работать top, right, bottom, left
В обычном порядке блочные элементы отображаются, начиная с верхнего края окна браузера по направлению к нижнему краю
Свойство float позволяет перемещать любой элемент, выравнивая его по левому или правому краю веб-страницы или содержащего его элемента-контейнера
При этом остальные блочные элементы будут его игнорировать, а строчные элементы будут смещаться вправо или влево, освобождая для него пространство и обтекая его
| float: | comment |
|---|---|
| none | Значение по умолчанию. Также отменяет любое перемещение для элемента из группы элементов, для которых уже установлено обтекание. |
| left | Элемент изымается из нормального потока элементов и позиционируется по левому краю блока-контейнера |
| right | Элемент позиционируется по правому краю блока-контейнера |
Очистка потока стилями при помощи класса clearfix и псевдокласса :after
.clearfix:after {
content: "";
display: table;
clear: both;
}это линия, проходящая по нижнему краю прямых знаков
Высота строки — это ограничивающая рамка, созданная вокруг текста
Размещая базовую линию каждой строки текста на равномерно расположенных линиях, вы можете легко привести все элементы интерфейса в гармоничный вертикальный ритм
Свойство выравнивает строки текста внутри блока по ширине относительно его границ
p { text-align: left; }
p { text-align: right; }
p { text-align: center; }Свойство задаёт расстояние между базовыми линиями строк текста, определяя величину, на которую увеличивается или уменьшается высота блока каждого элемента
h1 {
font-size: 16px;
line-height: 20px;
} Применяется только к строчным элементам, ячейкам таблиц, изображениям и полям форм
Не выравнивает содержимое блочного элемента
* { box-sizing: border-box; }
img {
margin-right: 0.5em;
}
p {
height: 3em;
padding: 0 .5em;
font-family: Arial;
text-decoration: underline overline;
margin-left: auto;
margin-right: auto;
width: 80%;
}<body>
<p>
top:<img style="vertical-align:top"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
middle:<img style="vertical-align:middle"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
bottom:<img style="vertical-align:bottom"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
super:<img style="vertical-align:super"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
sub:<img style="vertical-align:sub"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
</p>
</body>
<table>
<thead>
<tr>
<th width="150" scope="col">top</th>
<th width="170" scope="col">middle</th>
<th width="170" scope="col">bottom</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top">
vertical-align:top
</td>
<td style="vertical-align:middle">
vertical-align:middle
</td>
<td style="vertical-align: bottom;">
vertical-align:bottom
</td>
<td>
If the grid container has a definite or maximal size in the relevant axis,
then the number of repetitions is the largest possible positive integer
that does not cause the grid to overflow its grid container.
Treating each track as its maximal track sizing function, if that is definite.
Otherwise, as its minimum track sizing function, and taking grid-gap into account.
If any number of repetitions would overflow, then the repetition is 1.
Otherwise, if the grid container has a definite minimal size in the relevant axis,
the number of repetitions is the smallest possible positive integer that fulfills
that minimum requirement. Otherwise, the specified track list repeats only once.
</td>
</tr>
</tbody>
</table>
Каждый элемент имеет фоновый слой, который может быть прозрачным (по умолчанию), цветной заливкой и изображением
В качестве изображения может выступать градиент или картинка
Для одного элемента можно задать несколько фоновых изображений
| Название атрибута | comment |
|---|---|
background-color |
устанавливает цветную заливку для любого HTML-элемента. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого |
background-image |
устанавливает изображение в качестве фона для элемента. Фоновым изображением может быть картинка или градиент |
background-repeat |
определяет, каким образом будет повторяться фоновый рисунок |
background-position |
управляет точным расположением фонового изображения. Можно определить начальную позицию фонового изображения в виде горизонтальной и вертикальной координат посредством ключевых слов, точных абсолютных и процентных значений |
background-size |
позволяет масштабировать фоновое изображение по вертикали и горизонтали ( background-image ). Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. С помощью этого свойства изображение также можно уменьшать по ширине и по высоте |
| ... | ... |
Каждый элемент пользовательского интерфейса должен быть выровнен по пиксельной сетке
Эта подход, известная как "подгонка пикселей", гарантирует, что элементы будут выглядеть четко на девайсе юзера
С текстом несколько другая специфика, поскольку для того, чтобы буквы хорошо читались, нужно использовать сглаживание ( anti-aliasing )
Поэтому не стоит подгонять каждую точку текста под пиксельную сетку
Всемирная паутина
Пример
Flexbox Froggy
