 |
Границы (border). Отступы (padding). Задание. Позиционирование, плавающее размещение, Z-индекс. Нормальный поток. Блоки-контейнеры
|
|
|
|
Границы (border)
Стилизация границ включает в себя стилизацию толщины, цвета и типа линии.
Отступы (padding)
Отступы позволяют стилизовать промежуток между содержимым и его границей. В Примере 2 установлено значение отступов 20px для всех элементов.
Задание
Задайте одинаковое оформление для всех трех документов (Туристическая фирма, две web-страницы по направлениям отдыха):
- Определите в качестве фона страницы изображение, которое должно распологаться по правому краю только вдоль вертикальной оси, а оставшуюся часть страницы заполните цветом.
- Подберите значение правого поля так, чтобы содержимое страницы не перекрывало изображение, которое располагается по правому краю страницы.
- Задайте отступы и поля для заголовков.
Задайте одинаковое оформление для двух web-страниц по направлениям отдыха:
- Определите один стиль для всех горизонтальных границ таблицы, а другой — для всех вертикальных (значения толщины, цвета, типа границы определите самостоятельно).
- Укажите значение полей для изображений, размещенных на странице.
Позиционирование, плавающее размещение, Z-индекс
Нормальный поток
Порядок отображения элементов на странице называется потоком документа. Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку. Любой элемент, который находится в потоке, занимает на странице свою собственную площадь и может отталкивать от себя соседей с помощью полей.
Откройте простой документ Пример 1, не содержащий таблиц или CSS-позиционорования, измените размеры окна браузера. То, что будет отображаться на экране, — это нормальный поток элементов документа.
|
|
|
Блоки-контейнеры
Блок-контейнер — это любой родительский блок для элемента, который необходимо позиционировать.
Для создания блочных и строчных элементов используются теги DIV, SPAN соответственно. Они позволяют выделять в документе отдельные области, задавая для них специфические свойства.
В документе всегда присутствует хотя бы один блок-контейнер, так как блоком-контейнером является корневой элемент, созданный с помощью тега html.
| < BODY id=" c" > < DIV id=" a1" > < DIV id=" a11" > ... < /DIV> < /DIV> < DIV id=" b1" > ... < /DIV> < /BODY> |
|
Позиционирование
Позиционирование — это управление координатами размещения элемента/блока в окне браузера. CSS предлагает для позиционирования свойство position. Для этого свойства могут быть заданы следующие значения:
- absolute (абсолютное позиционирование),
- relative (относительное позиционирование),
- fixed (фиксированное позиционирование),
- static (статическое позиционирование, применяется по умолчанию).
Значение static размещает элемент на странице так, как он располагался бы без всякого позиционирования.
Для позиционирования блока можно воспользоваться свойствами top, bottom, left, right с определенными значениями.
Абсолютное позиционирование
Абсолютное позиционирование задается стилевым указанием position: absolute.
Абсолютно спозиционированные элементы обладают следующими особенностями:
- Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.
- Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).
- Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom.
- Если свойства left, top, right и bottom заданы, то они задают расположение элемента относительно некоторой системы координат. При этом начало координат находится в верхнем левом углу прямого предка, при условии, что он также позиционирован (абсолютно или относительно). Если родитель не позиционирован, то берется его родитель. Если все предки не имеют указаний position, то в качестве точки отсчета принимается левый верхний угол экранного образа тега BODY, то есть левый верхний угол документа. Элементы выводятся в указанном месте, перекрывая при этом другие элементы страницы. Порядок следования кодов абсолютно позиционируемых элементов становится важным, если они начинают перекрывать друг друга: выше оказывается тот элемент, код которого идет позже.
- Абсолютное позиционирование изменяет поведение не только блочных элементов, но и строчных. Если строчный элемент спозиционирован абсолютно, то он ведет себя точно так же, как и абсолютно спозиционированный блочный. Например, такому строчному элементу можно задавать размеры с помощью width и height.
В следующем примере абсолютно позиционированы две картинки. В коде для каждой из них указаны координаты, но для одной началом координат является начало документа, а для другой — начало блока. Откройте Пример 2, попробуйте изменить размеры окна браузера. Проанализируйте код данной web-страницы.
|
|
|
|
|
|
