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

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

как браузер отображает элементы и рассчитывает их размеры

margin

border

padding

content

Margin

Внешний отступ

расстояние между элементом и окружающими его элементами

Border

Граница

рамка вокруг элемента

Padding

Внутренний отступ

пространство между содержимым и границей элемента

Content

Содержимое

основное наполнение элемента (текст, изображения и т. д.).

Свойства блочной модели

Размер содержимого

Ширина


width: 200px;

Высота


height: 100px;

Внутренний отступ


padding: 20px;
padding: 20px 10px 15px;
                                


margin: 20px;
margin: 10px auto;

Запись нескольких значений

Таким свойствам как padding , margin , border-radius , border-width можно задавать несколько уникальных значений в одном свойстве

Одно значение


свойство: все-стороны;
padding: 10px;
Внутренний отступ на 10 пикселей по всем сторонам

Два значения


свойство: верх-низ лево-право;
margin: 10px 20px;
Внешний отступ на 10 пикселей по вертикали и 20 по горизонтали

Три значения


свойство: верх лево-право низ;
padding: 20px 15px 10px;
Внутренний отступ на 10 пикселей сверху, 15 слева и справа, 10 снизу

Четыре значения


свойство: верх право низ лево;
margin: 5px 15px 25px 35px;
Внешний отступ на 5 пикселей сверху, 15 справа, 25 снизу и 35 слева

Box-sizing

Методы расчета размера элементов

box-sizing: content-box

По умолчанию
  • width и height включают только содержимое (content), но не учитывают padding и border.
  • Итоговый размер = content + padding + border.
Проблема: расчет реальных размеров элемента становится сложным

box-sizing: border-box

  • width и height включают content, padding и border, что упрощает расчет размеров.
  • Итоговый размер = заданный width и height, без дополнительных вычислений.
Это див
Это див 

div {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
}

div.box-border {
    box-sizing: border-box;
}

Свойство display

Блочные

занимают всю ширину родительского контейнера и начинаются с новой строки

  • <div>
  • <p>
  • <h1> – <h6>
  • <section>, <article>, <header>, <footer>
  • <ul>, <ol>, <li>
  • <table>

Строчные

не создают разрыв строки и занимают только столько места, сколько необходимо для контента

  • <span>
  • <a>
  • <strong>, <em>
  • <label>
  • <img>

Строчно-блочные

не создают разрыв строки и занимают только столько места, сколько необходимо для контента

  • <span>
  • <a>
  • <strong>, <em>
  • <label>
  • <img>

Свойство display

С помощью display можно перезаписать данное поведение 


.element {
    display: block; /* Сделать элемент блочным */
    display: inline; /* Сделать элемент строчным */
    display: inline-block; /* Комбинированное поведение */
    display: none; /* Полностью скрывает элемент */
}

Блочный span


span {
    display: block;
}

Различие между
visibility: hidden и
display: none

display: none

элемент полностью удаляется из потока документа, он не занимает место

visibility: hidden

элемент остается на своем месте, но становится невидимым

1. Ниже display:none

2. none

3. Ниже visibility: hidden

4. hidden

5. Конец

Цвета

Формат Пример Описание
Название color: red; Использование стандартных названий (blue, green, black и т. д.)
HEX color: #ff0000; Шестнадцатеричный код цвета (#RRGGBB)
HEX с прозрачностью color: #ff000080; Добавляется два символа для прозрачности (альфа-канал)
RGB color: rgb(255, 0, 0); Формат rgb(red, green, blue), где значения от 0 до 255
RGBA color: rgba(255, 0, 0, 0.5); То же самое, но с прозрачностью (0 – полностью прозрачный, 1 – непрозрачный)
HSL color: hsl(0, 100%, 50%); Цвет в формате hsl(hue, saturation, lightness)
HSLA color: hsla(0, 100%, 50%, 0.5); То же самое, но с прозрачностью

Свойство color

управляет цветом текста элемента


p {
    color: red;
}

Свойства фона

background-color

задает цвет фона


div {
    background-color: lightgray;
}

background-image

устанавливает изображение в качестве фона


body {
    background-image: url('background.jpg');
}
Может быть как удаленное, так и локальное изображение

Свойства фона

background-position

задает положение фонового изображения


div {
    background-image: url('logo.png');
    // background-position: left top;
    background-position: center center;
}

background-attachment

прокручивать вместе со страницей


body {
    background-image: url('stars.jpg');
    background-attachment: fixed;
}
  • scroll Фон прокручивается вместе со страницей (по умолчанию)
  • fixed Фон остается неподвижным
  • local Прокручивается только внутри элемента

Свойства фона

background-repeat

управляет повторением фона


body {
    background-image: url('pattern.png');
    background-repeat: no-repeat;
}
По умолчанию изображение фона повторяется во всех направлениях, чтобы не повторялось можно поставить `no-repeat`

background-size

размер фонового изображения


body {
    background-image: url('background.jpg');
    background-size: cover;
}
  • cover - изображение полностью покрывает контейнер
  • contain - изображение полностью помещается в контейнер

Свойство background

Включает в себя все раннее названные свойства


body {
    background: url('image.jpg') no-repeat center center / cover fixed;
}

Порядок свойств

  1. background-image
  2. background-repeat
  3. background-position
  4. background-size
  5. background-attachment

Градиенты в CSS

Линейный градиент


div {
    background: linear-gradient(направление, цвет_1, цвет_2, цвет_n);
    background: linear-gradient(to right, red, yellow);
}

Значения направления

  • to top (снизу вверх)
  • to left (справа налево)
  • to bottom right (по диагонали)
Цветов может быть несколько linear-gradient(to bottom, red, orange, yellow, green, blue)

Градиенты в CSS

Радиальный градиент


div {
    background: radial-gradient(форма, цвет_1, цвет_2, цвет_n);
    background: radial-gradient(circle, red, yellow, green);
}

Значения формы

    • circle делает градиент круглым
    • ellipse – овальным

Прозрачность

Свойство opacity

Работает на весь элемент, включая текст и дочерние элементы 


div {
    opacity: 0.5;
}
Значение от 0 до 1

Использование alpha канала в background

Работает только на фон


div {
    background: rgba(0, 0, 255, 0.5);
}