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: пространство между границами элемента и его дочерних элементов
  • 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 {
    position
    width: 30rem;
    height: 30rem;
    margin: -10rem 5rem;
    background-color: #ff00ff90;
}
<body>
    <div></div>
    <figure></figure>
</body>

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

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

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

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

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

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

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

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

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

  • Область содержимого — это содержимое элемента, например, текст или изображение

  • Внутренний отступ (padding) — это расстояние между основным содержимым и его границей (рамкой)

Если для элемента задать фон, то он распространится также и на поля элемента

Внутренний отступ не может принимать отрицательных значений, в отличие от внешнего отступа

  • Внешний отступ (margin) — расстояние снаружи элемента от внешней границы рамки до соседних элементов, тем самым разделяя элементы на странице

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

Значения padding_ и margin задаются в следующем порядке: верхнее, правое, нижнее и левое*

Граница, или рамка элемента, задаётся с помощью свойства border

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

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

Очистить стили браузеров для всех элементов можно при помощи универсального селектора:

* {
    margin: 0;
    padding: 0;
}

ico20 Отрицательные отступы

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

При сдвиге через margin соседние элементы занимают освободившееся пространство

ico20 Свойство display

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

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

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

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

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

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

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

🎓 Свойство float

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

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

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

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

🎓 Текст

CSS-текст представляет набор свойств для форматирования текстового содержимого веб-страниц. Использование CSS-стилей для форматирования текста позволяет придать HTML-элементам желаемый вид, благодаря чему HTML-теги могут применяться только по своему прямому назначению — для определения структуры документа.

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

text-align

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

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

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

font-size / line-height

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

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

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

vertical-align

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

span {vertical-align: top;}
span {vertical-align: middle;}
span {vertical-align: bottom;}

🎓 Шрифты и единицы измерения

  CSS-шрифты — набор свойств для управления внешним видом текста веб-страниц. Используя различные шрифты для заголовков, абзацев и других элементов, можно задавать определенный стиль письменных сообщений, передавая желаемые эмоции и настроение.

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

  • px – абсолютные, чёткие, понятные;

  • em – относительно размера шрифта;

  • rem - задаёт размер относительно размера шрифта элемента <html>;

  • % – относительно такого же свойства родителя;

  • vw – 1% ширины окна;

  • vh – 1% высоты окна.

🎓 Фон

CSS-фон — свойства, добавляющие фон для любого HTML-элемента. Каждый элемент имеет фоновый слой, который может быть прозрачным (по умолчанию), цветной заливкой и изображением. В качестве изображения может выступать градиент или картинка. Для одного элемента можно задать несколько фоновых изображений.

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

© Irina H.Fylyppova 2019

© Irina H.Fylyppova 2019

Занятие 1

Занятие 2

Занятие 3

Занятие 4

Занятие 5

Занятие 6

Занятие 7

Занятие 8

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

Clone this wiki locally