Skip to content

CSS block model

Jump to bottom
garevna edited this page Apr 17, 2019 · 30 revisions

ico25 Блочная модель

Блочная модель - это способ описания размеров и интервалов элемента

Она состоит из 4 элементов: границы ( border ), поля ( margin ), отступов ( padding ) и размеров самого элемента

  • border: толщина обводки по краям элемента

  • padding: пространство между границами элемента и его дочерних элементов

    warn-25 Фон элемента распространяется на поля padding элемента

    warn-25 padding не может принимать отрицательных значений

  • margin: пространство между границами элемента и соседних объектов

    warn-25 Внешние отступы всегда остаются прозрачными и через них виден фон родительского элемента

    warn-25 margin может принимать отрицательные значения

    warn-25 Отрицательные значения margin-top/margin-left смещают элемент вверх / влево

    warn-25 При сдвиге элемента с помощью отрицательных значений margin соседние элементы занимают освободившееся пространство

Значения padding и margin задаются сверху по ходу часовой стрелки:

верхнее
правое
нижнее
левое

ico25 Единицы измерения

ico20 Абсолютные

единицы комментарий
px пиксель экрана
pc пики ( 1pc = 12pt )
pt точки

warn-25 Размер точки ( 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 )

... и так далее

ico20 Относительные размеры

единицы комментарий
% процент от размеров родительского блока или viewport
em измерение относительно высоты базового шрифта
rem относительно размера шрифта элемента <html>
vh 1vh = 1% высоты viewport
vw 1vw = 1% ширины viewport
vmin 1vmin = минимум ( 1vh, 1vw )

cap-25 em

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>

cap-25 vh | vw | rem

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;
}

ico25 Свойство display

Свойство, которое определяет, как элемент должен быть показан в документе.

display: comment
inline инлайн (строчный)
block блочный
inline-block инлайн-блочный
table таблица
flex флекс
... ...
none -

ico25 Позиционирование

Свойство position позволяет точно задать новое местоположение блока относительно того места, где он находился бы в нормальном потоке документа

По умолчанию все элементы располагаются последовательно один за другим в том порядке, в котором они определены в структуре HTML-документа

Значение атрибута position comment
static Значение по умолчанию, означает отсутствие позиционированияЭлементы отображаются последовательно один за другим в том порядке, в котором они определены в HTML-документе
Используется для очистки любого другого значения позиционирования
🔸relative Относительно позиционированный элемент сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал, не исчезает
При этом такой элемент может перекрывать другое содержимое на странице
🔸absolute Абсолютно позиционированный элемент удаляется из потока документа и позиционируется относительно границ содержащего его контейнера или окна браузера
Контейнер для абсолютно позиционированного элемента — ближайший элемент-предок, значение свойства position которого равно relative
🔸fixed Положение элемента фиксируется относительно viewport, сам элемент при этом удаляется из основного потока документа
Элемент не меняет своего положения во время прокрутки страницы

🔸 - будут работать top, right, bottom, left

ico25 Атрибут float

В обычном порядке блочные элементы отображаются, начиная с верхнего края окна браузера по направлению к нижнему краю

Свойство float позволяет перемещать любой элемент, выравнивая его по левому или правому краю веб-страницы или содержащего его элемента-контейнера

При этом остальные блочные элементы будут его игнорировать, а строчные элементы будут смещаться вправо или влево, освобождая для него пространство и обтекая его

float: comment
none Значение по умолчанию. Также отменяет любое перемещение для элемента из группы элементов, для которых уже установлено обтекание.
left Элемент изымается из нормального потока элементов и позиционируется по левому краю блока-контейнера
right Элемент позиционируется по правому краю блока-контейнера

Очистка потока стилями при помощи класса clearfix и псевдокласса :after

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

ico25 Текст

ico20 Базовая линия

это линия, проходящая по нижнему краю прямых знаков

Высота строки — это ограничивающая рамка, созданная вокруг текста

Размещая базовую линию каждой строки текста на равномерно расположенных линиях, вы можете легко привести все элементы интерфейса в гармоничный вертикальный ритм

ico20 Горизонтальное выравнивание

text-align

Свойство выравнивает строки текста внутри блока по ширине относительно его границ

p { text-align: left; }
p { text-align: right; }
p { text-align: center; }

ico20 Размер шрифта и высота строки

font-size / line-height

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

h1 {
    font-size: 16px;
    line-height: 20px;
}

ico20 Вертикальное выравнивание

vertical-align

warn-25 Применяется только к строчным элементам, ячейкам таблиц, изображениям и полям форм

warn-25 Не выравнивает содержимое блочного элемента

body { margin: 0; }
div {
    width: 50vw;
    height: 50vh;
    margin: 5vh 25vw;
    text-align: center;
    background-color: #ffaa0090;
    padding: 20px;
}
div * {
    vertical-align: top;
    font-size: 1.2em;
}
figure {
    width: 30rem;
    height: 30rem;
    margin: -10rem 10rem;
    background-color: #ff00ff90;
    text-align: right;
    padding: 20px;
}
figure * {
    vertical-align: bottom;
    font-size: 1.2em;
}
<div>
    <img src="https://secure.gravatar.com/avatar/ac0d6274a6cea04669e66a20ec0ea204?s=80&amp;d=retro&amp;r=pg">
    <span>A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks<br>If the size of the grid container depends on the size of its tracks, then the must be treated as auto<br>The user-agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage</span>
</div>
<figure>
       <img src="https://secure.gravatar.com/avatar/ac0d6274a6cea04669e66a20ec0ea204?s=80&amp;d=retro&amp;r=pg">
       <span>A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks<br>If the size of the grid container depends on the size of its tracks, then the must be treated as auto<br>The user-agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage</span>
</figure>

ico25 Фон

Каждый элемент имеет фоновый слой, который может быть прозрачным (по умолчанию), цветной заливкой и изображением

В качестве изображения может выступать градиент или картинка

Для одного элемента можно задать несколько фоновых изображений

  Название атрибута   comment
background-color устанавливает цветную заливку для любого HTML-элемента. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого
background-image устанавливает изображение в качестве фона для элемента. Фоновым изображением может быть картинка или градиент
background-repeat определяет, каким образом будет повторяться фоновый рисунок
background-position управляет точным расположением фонового изображения. Можно определить начальную позицию фонового изображения в виде горизонтальной и вертикальной координат посредством ключевых слов, точных абсолютных и процентных значений
background-size позволяет масштабировать фоновое изображение по вертикали и горизонтали ( background-image ). Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. С помощью этого свойства изображение также можно уменьшать по ширине и по высоте
... ...

ico20 Пиксельная сетка

Каждый элемент пользовательского интерфейса должен быть выровнен по пиксельной сетке

Эта подход, известная как "подгонка пикселей", гарантирует, что элементы будут выглядеть четко на девайсе юзера

С текстом несколько другая специфика, поскольку для того, чтобы буквы хорошо читались, нужно использовать сглаживание ( anti-aliasing )

Поэтому не стоит подгонять каждую точку текста под пиксельную сетку

© Irina H.Fylyppova 2019

© Irina H.Fylyppova 2019

Занятие 1

Занятие 2

Занятие 3

Занятие 4

Занятие 5

Занятие 6

Занятие 7

Занятие 8

Дополнительно

Clone this wiki locally