Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

В модели форматирования документа каждый элемент создаёт в структуре документа отдельный блок, в соответствие с блоковой моделью. Схема данных блоков включает:

  1. размеры блока и его тип;
  2. позиционирование схемы расположения блоков (нормальный поток, «плавающий» поток со свойством float и абсолютное позиционирование);
  3. взаимоотношение элементов в структуре документа;
  4. окружающую блок информацию (размеры экрана, изображений и т.д.).
Следует помнить, что визуальная модель форматирования не задаёт все аспекты форматирования в документе, например в ней нет ни слова о механизме создания меж буквенных отступов. Многое в отображении модели документа зависит от браузера, на работу которого невозможно воздействовать. На модель форматирования влияет параметры экрана (вьюпорт) пользователя.

В модели форматирование особое внимание уделяется блоку содержимого и исходному блоку. Блок с содержимым имеет любой элемент, исходный блок представляется элементом «родителем» для его дочерних блоков. Значение исходного блока выражается в воздействии его размеров и положения на странице на дочерние элементы. Так же в спецификации CSS2 существует понятие «исходного корневого блока», данный блок не следует путать с корневым элементом страницы - HTML. Размеры исходного корневого блока определяются свойствами width и height. Если в качестве значений данных свойств установить auto, то ширина корневого блока буде определена браузером максимально допустимыми размерами всего экрана, а высота содержимым элемента.

Корневой элемент документа, не подлежим модификации и перемещению с помощью любых методов, существующих в CSS2, в том числе и с помощью методов position, float.

Каждый блок в спецификации CSS2 имеет определенный тип. Тип блока определяется свойством display.

Первый тип блоков - блочный.

Данные блоки визуально формируют структуру документа, создавая структурные единицы документа (например, элемент P). Блочный тип создаётся с помощью значений свойства display - 'block', 'list-item', 'compact', 'run-in', 'table'.

Второй тип блоков – строчные блоки.

Данные типы блоков создаются с помощью значения 'inline', 'inline-table', 'compact' and 'run-in' свойства display. Блоки данного типа не создают структурные блоки в DOM структуре документа.

Свойства строковых блоков:

  1. Ширина строкового блока определяется шириной его содержимого. Это основное отличие от блочных типов блоков.
  2. Высота строчного блока определяется как расстояние между верхней нижней границами блока.
  3. Пустые сточные элементы все равно имеют внешние (margin) и внутренние (padding) отступы, рамку (border) и высоту строки (line-height), которые учитываются при рассечете размера блока с содержимым.
  4. Если все блоки находящиеся в строчном блоке выровнены по его нижней границе, то высота строчного блока будет определяться высотой самого высокого блока.

Все строчные элементы по общему правилу, согласно спецификации CSS2, поддерживают свойства padding и margin, однако браузер Internet Explorer, 5 версии данные свойства не поддерживает.

Выделяют анонимные строковые блоки. Пример анонимного строкового блока:

  1.<P>Some <EM>emphasized</em> text</P>
  2.

В этом примере блочный элемент P содержит несколько блоков выстроенных в линию – EM и текст «Some» и «text». Данный текст и есть анонимный блок. Анонимным блок называется так, потому что его содержимое не имеет связанного блока.

Основное, что Вам необходимо запомнить при использовании анонимных блоков – то, что данные блоки наследуют наследуемые свойства их родительских блоков. В нашем случае анонимные блоки, - с текстом «Some» и «text» наследуют свойство color (цвет текста) и свойство backgroumd(фон). Фон здесь представлен значением transparent.

Третий тип блоков – компактный.

Свойства компактных блоков:

  1. Компактный блок создаётся с помощью значения compact свойства display.
  2. Если компактный блок следует сразу за блочным блоком, то он становится строчным блоком.
  3. Во всех иных случаях данный тип блока заставляет блок рассматриваться как блочный.

Пример:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>A compact box example</TITLE>
  5. <STYLE type="text/css">
  6. DT { display: compact }
  7. DD { margin-left: 4em }
  8. </STYLE>
  9. </HEAD>
10. <BODY>
11. <DL>
12. <DT>Заголовок
13. <DD><P>Описание
14. <DT>Новый заголовок
15. <DD><P>Новое описание
16. </DL>
17. </BODY>
18.</HTML>
19.
20.

Четвёртый тип блоков- Run-in

Особенности блоков со свойством run-in:

  1. Если блочной элемент следует за элементом, в отношении которого установлено свойство display: run-in, то последний становится первой строкой блочного элемента.
  2. Во всех других случаях элемент с данным типом рассматривается как блочный.

Пример:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Блок по типу run-in </TITLE>
  5. <STYLE type="text/css">
  6. H3 { display: run-in }
  7. </STYLE>
  8. </HEAD>
  9. <BODY>
10. <H3>Заголовок с типом run-in</H3>
11. <P>Текст параграфа,
12. следующий за элементом со свойством display:none;
13. </BODY>
14.</HTML>
15.


Александр Ермаков. Хостинг - www.pwstudio.org