Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
лекции 2005 / P8 / CSS учебник.doc
Скачиваний:
19
Добавлен:
16.04.2013
Размер:
468.99 Кб
Скачать

Img { float: left }

BODY, P, IMG { margin: 2em }

</STYLE>

<BODY>

<P>

<IMG SRC=img.gif>

Примерный текст, чтобы показать...

</BODY>

Форматирование в приведенном примере будет выглядеть так:

________________________________________

|

| max(граница BODY, граница P)

| ______________________________

| | | Примерный текст,

| г | г |границы IMG чтобы показать, как

| р | р | _____ плавающие элементы

| а | а | | | смещаются относительно

| н | н | | IMG | к сторонам родительского

| и | и | | | элемента, несмотря

| ц | ц | |_____| на приоритет

| a | а | границы, бордюра

| | | и заполнения.

| B | P | Обратите внимание,

| O | |как смежные вертикальные границы

| D | |сжимаются между фиксированными

| Y | |блочными элементами.

Обратите внимание, как границы элемента 'P' окружают плавающий элемент 'IMG'.

Есть два случая, когда плавающие элементы могут перекрывать области границы, рамки и отступа других элементов:

  • когда плавающий элемент имеет отрицательную величину границы: отрицательные границы плавающих элементов имеют приоритет над иными блочными элементами;

  • когда плавающий элемент выше или шире чем элемент внутри.

4.2 Строчные элементы

Элементы, не форматируемые как блочные, относятся к строчным. Строчный элемент может делить пространство строки с другими элементами. Рассмотрим следующий пример:

<P>Несколько <EM>подчеркнутых</EM> слов <STRONG>имеется</STRONG>.</P>

Элемент 'P' - нормальный блочный, в то время как 'EM' и 'STRONG' - строчные. Если ширина элемента 'P' достаточна, чтобы расположить весь элемент на одной строке, то тогда в строке будут два строчных элемента:

Несколько подчеркнутых слов имеется.

Если же в строке места не хватает, строчные элементы будут разбиты на несколько полей:

<P>Несколько <EM>подчеркнутых слов</EM> имеют место.</P>

Форматирование этого примера будет выглядеть как:

Несколько подчеркнутых

слов имеют место.

Если строчный элемент имеет границы, бордюры, заполнение или приложенное текстовое оформление, то их эффект не будет проявляться в месте расчленения элемента:

-------------

Несколько |подчеркнутых

-------------

-----

слов | имеют место.

-----

(Вышеприведенный рисунок несколько искажается из-за использования псевдографики ASCII. См. описание вычисления высоты линий в разделе 4.4.)

4.3 Замещаемые элементы

Замещаемые элементы - это элементы, замещаемые содержанием, указываемым в элементе. Например элемент 'IMG' замещается изобра­жением, указанным в атрибуте 'SRC'. Важным свойством замещаемых элементов является наличие своих внутренних размеров. Если значения свойства "ширина"('width') равна 'auto', то в качестве ширины элемента используется внутренняя ширина. Если значение иное, чем 'auto' из перечисленных в таблице стилей, то это значение и используется, а замещаемый элемент соответственно меняет размеры (метод изменения размеров будет определяться видом информационного объекта). Таким же образом используется свойство "высота" ('height').

Замещаемые элементы могут быть как блочными, так и строчными.