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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

позиционирование элементов 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 относительно окна. Даже при скролле страницы вниз элемент будет на своем месте.

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

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

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

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

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