Главная
Ключевые направления
Прочие публикации
Мои проекты
Услуги
Отзывы
Контакты
Акции
Личные кабинеты

Блочные и строковые элементы


Блочные элементы

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

Линейные размеры

    Линейные размеры управляются двумя атрибутами:
  • height — высота;
  • width — ширина.

В Netscape Navigator линейные размеры носят лишь рекомендательный характер. Текст, выходящий за пределы блока, автоматически его растягивают. При отсутствии текста блок наоборот сжимается игнорируя заданные линейные размеры.

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

Набивка

Набивка — это расстояние от границ блочного элемента до его содержимого или отступа дочернего блочного элемента.

    Набивки могут быть:
  • padding — по всему периметру;
  • padding-bottom — снизу;
  • padding-left — слева;
  • padding-right — справа;
  • padding-top — сверху.

Отступы

Отступ — это расстояние от границ блочного элеента до набивки родительского блочного элемента.

    Отступы могут быть:
  • margin — по всему периметру;
  • margin-bottom — снизу;
  • margin-left — слева;
  • margin-right — справа;
  • margin-top — сверху.

Обработка отступов в различных браузерах может отличаться. Например, попытка оптимизации представляения стиля со стороны Netscape Navigator 4.x вызывает проблемы с отображением отступов.

Границы

Границы имеются у каждого блочного элемента.

Одной из целью использования видимых границ текстового блока является визуальное определение области отображения текстового блока.

Значение цвета границы задаётся шестнадцатиричным кодом вида #RRGGBB, где: RR определяет уровень красного, GG — зелёного, а BB — синего, либо названием цвета.

    Атрибуты, определяющие тип линии границы могут принимать следующие значения:
  • dashed;
  • dotted;
  • double;
  • groove;
  • inset;
  • none;
  • outset;
  • ridge;
  • solid.

Описывать каждый атрибут границ необязательно. Существует краткая форма описания границ блока:

атрибут: толщина_линии тип_линии цвет_линии;
    Краткую форму описания границ можно присвоить следующим атрибутам:
  • border — для всех границ;
  • border-bottom — для нижней границы;
  • border-left — для левой границы;
  • border-right — для правой границы;
  • border-top — для верхней границы.

Отображение границы блока зависит от специфики браузера. Не все браузеры поддерживают атрибуты, устанавливающие цвет для каждой границы отдельно или тип линии границы. В то же время Internet Explorer требует обязательного указания типа линии границ. В противном случае границы не будут отображены.

    Высота, ширина, набивка, отступ и толщина границ блочного элемента могут быть заданы в:
  • типографских пунктах (pt);
  • пикселах (px);
  • условных единицах (em).

Обтекание блочного элемента

Блочные элементы могут быть обтекаемым.

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

    Обтекаемым блочный элемент делает атрибут float, принимающий значения:
  • both — прочие элементы обтекают блок с обеих сторон (утверждается в книге «Применение каскадных таблиц стилей (CSS)» А. И. Сурина, А. М. Русака, П. Б. Храмцова и  С. А. Брика, однако пока подтверждения возможности применения такого значения для атрибута float мной не найдено);
  • center — располагает блок в центре без обтекания (действие распространяется только на текстовые блоки и только в браузере Netscape Navigator);
  • left — блок прижимается влево, остальные элементы обтекают его справа;
  • right — блок прижимается вправо, остальные элементы обтекают его слева.
    Прекращается обтекание путём присвоения атрибуту clear обтекающих элементов следующих значений:
  • both;
  • left;
  • none;
  • right.

Интерпретация атрибута clear в браузерах Internet Explorer и Netscape Navigator неодинакова.

Принципиально размещение тектового блока аналогично размещению прочих прямоугольных блоков.

Универсальный строковый элемент

Не все браузеры поддерживают полный комплект атрибутов для универсального строкового элемента. Например, некоторые браузеры не поддерживают атрибут vertical-align, являющийся альтернативой контейнерам SUP и SUB.

Обновлено: 14:29 03.09.2019

Назад

Поиск
Расширенный поиск
©Tumaliev R.