Вначале установим дополнение для браузера firebug, которое позволяет видеть отступы элементов.
Это преимущество в отличие от встроенной консоли кода.
Положим в контейнер со строкой row предложение и ссылку и посмотрим, как будут отображаться в firebug.
Видим, что предложение в теге div занимает всю ширину страницы, а ссылка не всю, только ширину размера текста.
Это означает, что разные элементы в html, отображаются строкой, либо блоками.
У блочных элементов можно задавать ширину и высоту, в отличие от строчного элемента.
Зададим стиль диву с классом block ширину и высоту и проверим в браузере.
Блочные элементы всегда отображаются друг под другом, а строчные в строку друг за другом.
Продублируем блок и ссылку.
- Свойством display: inline-block мы можем поменять поведение у блочных элементов, установив их по порядку в строку.
- Для ссылки добавим свойство display: block, чтобы сделать ее блочным элементом и зададим размеры.
Содержание статьи
- 1 Отступы внешние margin и внутренние padding.
- 2 Свойство максимально max-width и минимальной min-width ширины и высоты.
- 3 позиционирование элементов position: relative, absolut, fixed.
- 4 Свойство overflow определяет, как ведет себя содержимое, которое не вместилось в блок.
- 5 Делаем элементы плавающими свойством float.
Отступы внешние 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.
- Если добавим position: absolute у block-child и будем изменять расстояния top, то позиция у block-child будет меняться относительно body.
- Если добавим родительскому блоку block-parent свойство position: relative, то внутренний блок изменит положение относительно родительского класса с отступом.
- Третье свойство позиции это position: fixed. Фиксируем элемент block-child относительно окна. Даже при скролле страницы вниз элемент будет на своем месте.
Свойство overflow определяет, как ведет себя содержимое, которое не вместилось в блок.
- Добавим в блок с размерами много текста и увидим, что он выходит за рамки блока это соответствует по умолчанию overflow: visible.
- Если установим overflow: hidden, то содержимое, которое выходило за рамки будет скрыто.
- Если добавим overflow: scroll, то появится полоса прокрутки справа и внизу блока.
- Чтобы оставить прокрутку только справа установим overflow: auto.
Делаем элементы плавающими свойством float.
Задаем одну картинку img и два абзаца с текстом txt1,2.
- Добавим картинки левый float: left и видим текст стал слева.
- Добавим для txt1 текста свойство float: left и зададим размер width: 300px. Второй текст будет обтекать первый.
- Если зададим txt2 clear: both, то текст станет внизу под картинкой и первым текстом.