Новичок
7 уроков
(1 час 8 минут)
Курс
Основы CSS
CSS - это язык стилей, определяющий отображение HTML-документов. После изучения HTML, вам необходимо ознакомиться с CSS, чтобы ваши сайты выглядели более привлекательно.

#3 — Делаем в CSS центрирование блочных элементов.

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

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

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

А ведь вам нужно, чтобы оно располагалось по центру. «Как же сделать при помощи CSS центрирование содержимого по горизонтали?» — возникнет у вас вопрос.

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

Блочный элемент и его стандартные свойства CSS — margin, border и padding

Стандартный блочный элемент имеет такие свойства, как margin, border и padding.

  • margin — внешние отступы рассматриваемого элемента от соседних элементов.
  • border — рамка этого элемента,
  • padding — его внутренние отступы, т.е. отступы между рамкой и контентом.

Эти свойства и включены в box-model и именно на эту модель вам нужно опираться при построении сетки своего сайта.

Тег <div> как контейнер при CSS центрировании

Самым типичным представителем box-model является тег <div> — контейнер, коробочка для элементов, с помощью которых вы будете создавать какой-то отдельный блок вашего сайта.

На нашем видеоуроке вы познакомитесь с таким понятием, как горизонтальное позиционирование, вы научитесь осуществлять при помощи CSS центрирование ваших блоков по горизонтали. Это делается следующим образом. При фиксированной ширине блока ему задается свойство margin со значением auto.

.container {
width: 1140px;
margin: 0 auto;
}

где 0 — внешние отступы блочного элемента сверху и снизу, а auto — справа и слева. Таким образом, элемент центрируется по горизонтали.

Заключение

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#3 — Делаем в CSS центрирование блочных элементов.

  1. skinva:

    блин первый урок посмотрел, а 2 и 3 нет видео! это только у меня такое???

    1. kovaldn:

      это были какие то неполадки с ютубом

Добавить комментарий

Рекомендуемые курсы