Блочные элементы Вертикальное форматирование Горизонтальное форматирование Элементы-списки Плавающие элементы Строчные элементы Замещаемые элементы Высота строки Холст Элементы "BR" CSS1 предполагает простой ортогональный способ форматирования, когда каждый элемент образуется одним или несколькими прямоугольными полями. (Элементы, имеющие параметр "display" со значением "none", не форматируются и поэтому не влияют на поле. Все поля имеют внутреннюю содержательную область с устанавливаемыми смежными областями отступа, рамки и границы. _______________________________________ | | | граница (прозрачная) | | _________________________________ | | | | | | | рамка | | | | ___________________________ | | | | | | | | | | | отступ | | | | | | _____________________ | | | | | | | | | | | | | | | содержание | | | | | | | |_____________________| | | | | | |___________________________| | | | |_________________________________| | |_______________________________________| | ширина элемента | | ширина поля | Размеры границы, рамки и отступа устанавливаются соответственно описаниям следующих разделов настоящего документа: (5.5.1-5.5.5) для границы; (5.5.6-5.5.10) для отступа; (5.5.11-5.5.22) для рамки. Отступ использует тот же самый фон, что и сам элемент (установка свойств фона см. 5.3.2-5.3.7). Цвет и стиль рамки устанавливаются в свойствах рамки. Границы всегда прозрачны, поэтому через них будет просвечивать родительский элемент. Размеры поля есть сумма размеров элемента (форматированного текста или изображения) и размеров областей отступа, рамки и границы. С точки зрения форматирования элементы подразделяются на два основных типа: блочные и строчные . Блочные элементы           Назад Элементы с параметром "display", имеющим значение "block" или "list-item" относятся к блочным элементам. Плавающие (floating) элементы ( т.е. со значением параметра "float" иным, чем "none") также считаются блочными. Следующий пример показывает, как границы и отступы форматируют элемент "UL" с двумя дочерними. Для упрощения границы на диаграмме не показаны. Учтите, что односимвольные "константы" в данном примере - это не синтаксис CSS1, это просто удобный способ связать значения таблицы стилей с рисунком. <STYLE TYPE="text/css"> UL { background: red; margin: A B C D; padding: E F G H; } LI { color: white; background: blue; margin: a b c d; padding: e f g h; } </STYLE> .. <UL> <LI>1й элемент списка <LI>2й элемент списка </UL> _______________________________________________________ | | | A UL граница прозрачная | | _______________________________________________ | | D | | B | | | E UL отступ красный | | | | _______________________________________ | | | | H | | F | | | | | a LI граница прозрачная | | | | | | красный цвет просвечивает | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e LI отступ синий (blue) | | | | | | | | | | | | | | | | h 1й элемент списка f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- См. max | | | _______________________________ | | | | | | | | | | | | | | d | e LI отступ синий (blue) | | | | | | | | | | | | | | | | h 2й элемент списка f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | c LI отступ прозрачный, | | | | | | красный цвет просвечивает | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________| В техническом плане, свойства заполнения и границы не наследуются. Но, как видно из примера, элемент позиционируется относительно родительских и "братских", поэтому свойства границы и заполнения последних отражаются на дочерних элементах. Если бы в вышеназванном примере указывались рамки, они бы располагались между отступами и границами. Некоторые из используемых терминов иллюстрирует следующая диаграмма: --------------- <-- верх верхняя граница --------------- верхняя рамка --------------- верхний отступ +-------------+ <-- потолок | | | | | | | | | левая | левая | левый | | правый | правая | правая | |-граница|-рамка--|-отступ-|-содержание--|-отступ--|--рамка--|-граница-| | | | | | | | | +-------------+ <-- подвал ^ ^ ^ ^ левый внешний край | левый внутр. край | правый внутр. край | правый внешний край нижний отступ --------------- нижняя рамка --------------- нижняя граница --------------- <-- низ Левый внешний край - это край всего элемента, с учетом отступа, рамки и границы. Левый внутренний край - это край содержания внутри отступа, рамки и границы. Справа - аналогично. Верх - это верх самого объекта с учетом отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Потолок - это верх содержания внутри отступа, рамки и границы. Низ - это низ самого элемента, ниже отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Подвал - это низ элемента внутри отступа, рамки и границы (низ содержания). Ширина элемента - это ширина содержания, т.е. расстояние между левым и правым внутренними краями. Высота - это высота содержания, т. е. расстояние от подвала до потолка. Вперед  >>>  1  2  3  4  5   8  Комментарии к статье  8 8  Обсудить в чате

8  В тему Терминология Базовые понятия Псевдо-классы и псевдо-элементы Каскадирование Свойства CSS1 Единицы измерения значений Совместимость с CSS1