Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Позиционирование элементов, основные свойства css

Позиционирование элементов, основные свойства css

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

Это преимущество в отличие от встроенной консоли кода.

Положим в контейнер со строкой row предложение и ссылку и посмотрим, как будут отображаться в firebug.

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

Это означает, что разные элементы в html, отображаются строкой, либо блоками.

У блочных элементов можно задавать ширину и высоту, в отличие от строчного элемента.

Зададим стиль диву с классом block ширину и высоту и проверим в браузере.

как будут отображаться css элементы в firebug

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

Продублируем блок и ссылку.

  • Свойством display: inline-block мы можем поменять поведение у блочных элементов, установив их по порядку в строку.
  • Для ссылки добавим свойство display: block, чтобы сделать ее блочным элементом и зададим размеры.

Для ссылки добавим свойство display: block

Отступы внешние margin и внутренние padding.

  • Добавим block свойство margin: 30px 100px 50px 70px это внешний отступ, начиная с верхнего отступа и по часовой стрелке.
  • Чтобы менять отступы внутри блока зададим padding: 20px 40px 100px 10px, такие же свойства как у margin.

Отступы внешние margin и внутренние padding

Свойство максимально max-width и минимальной min-width ширины и высоты.

Зададим блоку свойство max-width: 500px, размер блока будет 500, но если уменьшать окно блок будет становиться меньше.

Можно установить значение до какого размера блок будет сужаться min-width: 400px.

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

Свойство максимально max-width и минимальной min-width ширины

позиционирование элементов position: relative, absolut, fixed.

Добавим в родительский блок block-parent, второй внутренний дочерний block-child.

У второго контейнера сделаем розовый цвет фона.

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

Добавим внешний отступ margin: 20px.

  1. Если добавим position: absolute у block-child и будем изменять расстояния top, то позиция у block-child будет меняться относительно body.
  2. Если добавим родительскому блоку block-parent свойство position: relative, то внутренний блок изменит положение относительно родительского класса с отступом.
  3. Третье свойство позиции это position: fixed. Фиксируем элемент block-child относительно окна. Даже при скролле страницы вниз элемент будет на своем месте.

позиционирование элементов position: relative, absolut, fixed

Свойство overflow определяет, как ведет себя содержимое, которое не вместилось в блок.

  1. Добавим в блок с размерами много текста и увидим, что он выходит за рамки блока это соответствует по умолчанию overflow: visible.
  2. Если установим overflow: hidden, то содержимое, которое выходило за рамки будет скрыто.
  3. Если добавим overflow: scroll, то появится полоса прокрутки справа и внизу блока.
  4. Чтобы оставить прокрутку только справа установим overflow: auto.

Свойство overflow определяет, как ведет себя содержимое

Делаем элементы плавающими свойством float.

Задаем одну картинку img и два абзаца с текстом txt1,2.

  1. Добавим картинки левый float: left и видим текст стал слева.
  2. Добавим для txt1 текста свойство float: left и зададим размер width: 300px. Второй текст будет обтекать первый.
  3. Если зададим txt2 clear: both, то текст станет внизу под картинкой и первым текстом.

Делаем элементы плавающими свойством float

Комментариев нет

Комментарии:

Комментарии запрещены