Skip to content

Latest commit

 

History

History
128 lines (80 loc) · 11.5 KB

flow.md

File metadata and controls

128 lines (80 loc) · 11.5 KB

1.4 Управление блоками в потоке

План занятия

  1. Размеры элементов a) Width b) Height
  2. Отступы для элементов a) Внешние отступы – margin b) Поля – padding
  3. Визуальное оформление элементов a) Границы b) Фоновый цвет
  4. Вертикальное выравнивание

Размеры элементов

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

Width

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

Свойство width принимает следующие значение:

  1. Значение в px (width:300px), может быть только положительным числом.

  2. Значение в процентах (width:50%), в таком случае ширина будет вычисляться в зависимости от ширины родительского элемента. Если родительского элемента нет, то будет вычисляться от ширины окна браузера.

  3. Значение auto (width:auto), устанавливает значение в зависимости от типа элемента и содержимого внутри элемента, является значением по умолчанию.

Стоит отметить, что свойство width применяется ко всем типам элементов, кроме строчных элементов и строк в таблице.

Height

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

Свойство height приминает следующие значения:

  1. Значение в px (height: 400px), должно быть положительным числом.

  2. Значение в процентах (height:40%), в таком случае высота будет вычисляться в зависимости от высоты родительского элемента. Если родительского элемента нет, то будет вычисляться от высоты документа.

  3. Значение auto (height:auto), устанавливает значение в зависимости от типа элемента и содержимого внутри элемента, является значением по умолчанию.

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

Пример: https://codepen.io/anton_varnauski/pen/GGrvgL

Отступы элементов

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

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

Для применения внешнего отступа используется свойство margin с указанием, от какой границ отступать – margin-top, margin-right, margin-bottom, margin-left.

Пример: https://codepen.io/anton_varnauski/pen/aKpyBY

Также для того чтобы указывать все отступы сразу мы можем написать свойство margin и объединить в нём все отступы. Свойство margin в данном случае может приминать значение с 1,2,3 и 4 цифрами.

margin: 10px; свойство с одним значением применит ко всем границам одинаковый отступ.

margin:10px 20px; применит отступ в 10px для верхнего и нижнего края, а отступ в 20px для правого и левого края.

margin: 10px 20px 30px; применит отступ в 10px для верхнего края, отступ в 20px для правого и левого края, отступ в 30px от нижнего края.

margin:10px 20px 30px 40px; применит отступ в 10px для верхнего края, отступ в 20px для правого, отступ в 30px от нижнего края и отступ в 40px для левого края.

Пример: https://codepen.io/anton_varnauski/pen/pKRryN

Поля (внутренние отступы)

Внутренним отступом (полем) называется расстояние от границ элемента до границ содержимого. Для применения полей используется свойство padding с указанием, от какой из границ отступать – padding-top, padding-right, padding-bottom, padding-left.

Пример: https://codepen.io/anton_varnauski/pen/XYpaba

Также для того чтобы указывать все поля сразу, мы можем написать свойство margin и объединить в нём все отступы. Свойство margin в данном случае может приминать значение с 1,2,3 и 4 цифрами.

padding: 10px; свойство с одним значением применит ко всем границам одинаковые поля. padding:10px 20px; применит поля в 10px для верхнего и нижнего края, а поля в 20px для правого и левого края. padding: 10px 20px 30px; применит поле в 10px для верхнего края, поля в 20px для правого и левого края, поле в 30px от нижнего края. padding:10px 20px 30px 40px; применит поле в 10px для верхнего края, поле в 20px для правого, поле в 30px от нижнего края и поле в 40px для левого края.

Пример: https://codepen.io/anton_varnauski/pen/qKRXay

Визуальное оформление

Визуально оформить элемент мы можем при помощи свойства border. Это свойство задаёт границу элемента, значение является универсальным, поэтому через пробел мы можем указывать толщину, стиль и цвет, к примеру, border:1px solid red – создаст сплошную линию толщиной в 1px красного цвета.

Пример: https://codepen.io/anton_varnauski/pen/aKpyPQ

Также свойство border можно применить к отдельной границе указав через дефис границу, к которой мы хотим применить данное свойство, border-bottom: 1px solid red, создаст нам сплошную границу в 1px, но только для нижней границы.

Теперь давайте разберём, какие значения могут применять каждое из свойств.

  • Толщина линии может задаваться в px и не может быть в процентах.
  • Цвет линии может быть указан в любом из цветовых форматов css.
  • А вот выбор стиля линии уже более разнообразен:
  1. solid – это значение для сплошной линии
  2. dashed – прерывистая линия
  3. dotted – линия из точек
  4. double – двойная линия И.т.д

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

Часто нам необходимо выровнять наш элемент по вертикали не так как выровнены другие блоки внутри родителя. Для этого мы можем использовать свойство vertical-align.

Итак свойство vertical-align выравнивает элемент по вертикали относительно родителя или окружающих его элементов. Свойство vertical-align может принимать следующие значения:

  1. baseline - выравнивает базовую линию блока по базовой линии родителя. Если у блока нет базовой линии, то за неё принимается нижняя граница.
  2. bottom - выравнивает низ блока по нижней части строки.
  3. middle - выравнивает вертикальную среднюю точку блока по базовой линии родительского и добавляет половину высоты буквы – x.
  4. sub - опускает базовую линию блока вниз для создания нижнего индекса. НЕ изменяет размер текста.
  5. super - поднимает базовую линию блока вверх для создания верхнего индекса. НЕ изменяет размер текста.
  6. top - выравнивает верх блока по верхней части строки.
  7. Также могут быть значения в px и %, положительное значение сместит выше базовой линии, а отрицательное ниже.

Пример: https://codepen.io/anton_varnauski/pen/JZEMWB

Подведение итогов

Мы изучили:

  • Свойства, задающие размеры элементов: width и height.
  • Внешние и внутренние (поля) отступы для элементов.
  • Свойства для визуального оформления элементов.
  • Свойства для вертикального выравнивания.