Основы html. Общие правила
Влад Мержевич
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры
,
И др.
Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (, например). Запрещено добавлять внутрь встроенных элементов блочные (пример 1).
Пример 1. Использование блочных элементов
Lorem ipsum dolor sit amet...
Ut wisi enim ad minim veniam
В данном примере абзац (тег
) вставляется внутрь контейнера
. Кстати, ошибкой будет поступить
наоборот — добавить
в контейнер
(Ut wisi
),
поскольку тег
не относится к блочным элементам.
Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для
новичков, которые еще не понимают разницы между ними. К тому же браузеры научились
отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее,
рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу
без ошибок.
Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное
пространство. Здесь следует оговорить, что под этим подразумевается. Например,
если тег
в коде документа присутствует
один, то он занимает всю свободную ширину окна браузера и ширина блока будет
равна 100%. Стоит поместить один тег
внутрь
другого, как ширина внутреннего тега начинает исчисляться относительно его родителя,
т.е. внешнего контейнера.
Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации
CSS четко указано, что ширина складывается из суммы следующих параметров: ширины
самого блока (width
), отступов (margin
),
полей (padding
) и границ (border
).
В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример 2. Ширина слоя
Ширина
Lorem ipsum dolor sit amet...
В результате данного примера получим слой шириной 342 пиксела. На рис. 1
показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда
в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width
.
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается
как auto
, это позволяет вписывать слой в окно браузера,
не принимая в расчет значения установленных полей. Если изменить ширину на 100%,
то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано
создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Ширина
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере (layer1
)
установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя
(layer2
) ширина также задана 100%, но поля определяются
для внутреннего абзаца (тег
). За счет
этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3
)
вообще не применяется свойство width
, поэтому оно
определяется по умолчанию — auto
. В таком
случае слой будет занимать всю ширину окна браузера без всяких горизонтальных
полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика,
но в любом случае нужно учитывать особенности блочных элементов и создавать
универсальный код.
Высота
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height
и добавляет к нему еще значение margin
,
padding
и border
.
Если высота слоя не установлена явно, то она вычисляется автоматически исходя
из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно
превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Высота
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Результат данного примера продемонстрирован на рис. 3.
Рис. 3. Высота блока в разных браузерах
Видно, что браузер оставляет высоту неизменной,
за счет чего текст не помещается в блоке и накладывается поверх слоя.
Цвет фона
Цвет фона элемента проще всего устанавливать через универсальное свойство background
.
Фоном при этом заливается область, которая определяется значениями
width
, height
и padding
(рис. 4).
Рис. 4. Область слоя, которая заполняется фоновым цветом
Таким образом, margin
не принимает участия в формировании
цветной области.
Границы
Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается
и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку
внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку,
то увидим совершенно противоположную картину (рис. 5). А все потому, что
Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet
Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.
а. Internet Explorer 7
б. Firefox, Internet Explorer 8+
Рис. 5. Отображение рамки в браузерах
В примере 5 показано, как создать код для получения подобной границы.
Пример 5. Пунктирная рамка
Рамка
Lorem ipsum dolor sit amet...
Различия в подходе браузеров при рисовании границ заметны только на цветном
фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически
одинаковым.
Резюме
Блочные элементы выступают в качестве основного строительного материала при
верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с
новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только
значениями height
и width
,
но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане
делятся на две части: одни поддерживают в этом вопросе спецификацию, другие
же ее игнорируют и поступают по-своему. Это создает трудности разработчикам,
которые желают делать универсальные веб-страницы. Можно только посоветовать
ограниченно использовать свойства width
и height
,
поскольку по умолчанию браузер применяет аргумент auto
,
который заставляет настраивать размеры элемента автоматически.
В HTML большинство элементов можно разделить на две группы: блочные
(blok
) и строчные
(inline
).
Начинающему разработчику не всегда сразу удается разобраться - в чем разница между ними, а также запомнить принадлежность какого-либо элемента к конкретной группе. Но со временем, с опытом работы у Вас не возникнет и намека на подобные затруднения.
Строчные элементы
К строчным элементам относятся теги:
,
,
,
,
, ,
,
,
....
Строчные элементы в общем потоке располагаются последовательно на одной строке один за другим.
На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.
Строчные элементы, естественно, могут располагаться внутри блочных.
Блочные элементы
К блочным элементам относятся теги:
,
,
...
,
,
,
,
,
....
Блок представляет собой как бы отдельную структурную единицу, выделенную абзацем. Блочные элементы в общем потоке располагаются последовательно один под другим
. По умолчанию два блочных элемента не могут располагаться на одной строке.
Один или несколько блоков также могут располагаться внутри другого (родительского
) блочного элемента.
В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.
Любой блок имеет форму прямоугольника.
Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content
- содержание
).
Границе блока при помощи свойства border
можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.
Между содержимым и границей существуют внутренние расстояния - поля
(свойство padding
). Ими необязательно пользоваться. То есть если их явно не установить при помощи свойства padding
, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.
Вокруг блока - за его границей существуют пустые, ничем не занятые области, называемые отступами
(свойство margin
). Отступы - это расстояния от границы блока, до ближайших элементов, или, если их нет, то до краев окна браузера. Отступы также, как и поля по умолчанию отсутствуют, либо имеют минимальную ширину, автоматически определяемую браузером.
Также для блока можно задать фиксированную ширину (свойство width
) и высоту (свойство height
), но лишь для его содержимого. Отступы, граница и поля туда не входят. По умолчанию как высота, так и ширина блока подстраиваются под размеры пространства, занимаемого контентом.
Фрагмент кода:
Строчные элементы
расположены на одной строке.
Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега
div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!
Результат:
Строчные элементы расположены на одной строке.
Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!
Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги
, ,
,
,
и др., а также элементы, у которых свойство display
установлено как inline
. В основном они используются для изменения вида текста или его логического выделения.
По аналогии с блочными элементами перечислю их характерные особенности.
- Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
- Эффект схлопывания отступов не действует.
- Свойства, связанные с размерами (width
, height
) не применимы.
- Ширина равна содержимому плюс значения отступов, полей и границ.
- Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Можно выравнивать по вертикали с помощью свойства vertical-align
.
Строчные элементы удобно использовать для изменения вида и стиля текста,
в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный
тег , который самостоятельно никак не модифицирует
содержимое, но легко объединяется со стилями через классы или идентификаторы.
За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных
фрагментов текста или рисунков.
Для вёрстки строчные элементы применяются реже, чем блочные. Это
связано в основном с тем, что внутрь строчных элементов не допускается вкладывать
контейнеры
, И подобные широко распространённые теги. Тем не менее, блочные и строчные
элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять
вид составляющих веб-страниц. В примере 3.16 показано использование тега
для выделения отдельных слов.
Пример 3.16. Применение тега
Строчные элементы
Лягте животом на пол.
Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны.
Руки за головой. Тяните голову руками вверх и вперед до полного
сокращения мышц живота. Задержитесь на две
секунды. Выполните восемь повторений.
Результат примера показан ниже (рис. 3.25).
Рис. 3.25. Текст, оформленный с помощью стилей
В данном примере тег и стили используются
для выделения различными способами фрагментов текста. В частности, выделение
происходит за счёт фонового цвета, рамки вокруг текста и сменой его цвета. Обратите внимание, что в результате переноса текста рамка вокруг него также перенеслась на другую строку. Во многих случаях это выглядит не очень красиво, поэтому можно запретить перенос текста через white-space
: nowrap
.
Для текста, который не обрамлён строчным тегом вроде создаётся анонимный строчный элемент. Для примера выше схема элементов будет следующей (рис. 3.26).
Рис. 3.26. Анонимные строчные элементы
Серым цветом на рисунке помечен текст внутри тега , а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.
Преобразование в строчный элемент
Строчные элементы можно превращать в блочные с помощью свойства display
и его значения block
. Также возможно и обратное
действие через значение inline
(пример 3.17).
Пример 3.17. Свойство display
XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
Строчные элементы
Примечание
Исходя из различных критериев, основными из
которых являются показатели целесообразности и эффективности приложенных
усилий, можно однозначно сказать следующее. А именно, что достижение
желаемых результатов требует гибкого подхода, основанного на опыте и
глубоком понимании смысла вышеизложенного.
Результат примера приведен на рис. 3.27.
Рис. 3.27. Замена блочного элемента на строчный
В данном примере блочный тег
Отображается
на веб-странице как строчный элемент. Это требуется для того, чтобы ширина
фона и рамки равнялась ширине самого текста с учетом полей. Как известно,
ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится
представлять тег
В виде строчного элемента.
В принципе, аналогичным решением будет использовать вместо
Тег .
Учтите, что преобразование элемента в строчный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных.
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги
,
,
,
Ut wisi
), поскольку тег не относится к блочным элементам.Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними. К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.
Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег
Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width ), отступов (margin ), полей (padding ) и границ (border ). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример 2. Ширина слоя
В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width .
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto , это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Lorem ipsum dolor sit amet...
Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере (layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег
). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3 ) вообще не применяется свойство width , поэтому оно определяется по умолчанию — auto . В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.
Высота
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin , padding и border . Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Результат данного примера продемонстрирован на рис. 3.
Рис. 3. Высота блока в разных браузерах
Видно, что браузер оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.
Цвет фона
Цвет фона элемента проще всего устанавливать через универсальное свойство background . Фоном при этом заливается область, которая определяется значениями width , height и padding (рис. 4).
Рис. 4. Область слоя, которая заполняется фоновым цветом
Таким образом, margin не принимает участия в формировании цветной области.
Границы
Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.
а. Internet Explorer 7
б. Firefox, Internet Explorer 8+
Рис. 5. Отображение рамки в браузерах
В примере 5 показано, как создать код для получения подобной границы.
Пример 5. Пунктирная рамка
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.
Резюме
Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width , но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height , поскольку по умолчанию браузер применяет аргумент auto , который заставляет настраивать размеры элемента автоматически.
В HTML большинство элементов можно разделить на две группы: блочные (blok ) и строчные (inline ).
Начинающему разработчику не всегда сразу удается разобраться - в чем разница между ними, а также запомнить принадлежность какого-либо элемента к конкретной группе. Но со временем, с опытом работы у Вас не возникнет и намека на подобные затруднения.
Строчные элементы
К строчным элементам относятся теги:
,
,
,
,
, ,
,
,
....
Строчные элементы в общем потоке располагаются последовательно на одной строке один за другим.
На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.
Строчные элементы, естественно, могут располагаться внутри блочных.
Блочные элементы
К блочным элементам относятся теги:
-
,
- Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
- Эффект схлопывания отступов не действует.
- Свойства, связанные с размерами (width , height ) не применимы.
- Ширина равна содержимому плюс значения отступов, полей и границ.
- Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Можно выравнивать по вертикали с помощью свойства vertical-align .
...
,
,
,
,
,
....
Блок представляет собой как бы отдельную структурную единицу, выделенную абзацем. Блочные элементы в общем потоке располагаются последовательно один под другим
. По умолчанию два блочных элемента не могут располагаться на одной строке.
Один или несколько блоков также могут располагаться внутри другого (родительского
) блочного элемента.
В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.
Любой блок имеет форму прямоугольника.
Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content
- содержание
).
Границе блока при помощи свойства border
можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.
Между содержимым и границей существуют внутренние расстояния - поля
(свойство padding
). Ими необязательно пользоваться. То есть если их явно не установить при помощи свойства padding
, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.
Вокруг блока - за его границей существуют пустые, ничем не занятые области, называемые отступами
(свойство margin
). Отступы - это расстояния от границы блока, до ближайших элементов, или, если их нет, то до краев окна браузера. Отступы также, как и поля по умолчанию отсутствуют, либо имеют минимальную ширину, автоматически определяемую браузером.
Также для блока можно задать фиксированную ширину (свойство width
) и высоту (свойство height
), но лишь для его содержимого. Отступы, граница и поля туда не входят. По умолчанию как высота, так и ширина блока подстраиваются под размеры пространства, занимаемого контентом.
Фрагмент кода:
Строчные элементы
расположены на одной строке.
Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега
div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!
Результат:
Строчные элементы расположены на одной строке.
Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!
Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги
, ,
,
,
и др., а также элементы, у которых свойство display
установлено как inline
. В основном они используются для изменения вида текста или его логического выделения.
По аналогии с блочными элементами перечислю их характерные особенности.
Строчные элементы удобно использовать для изменения вида и стиля текста,
в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный
тег , который самостоятельно никак не модифицирует
содержимое, но легко объединяется со стилями через классы или идентификаторы.
За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных
фрагментов текста или рисунков.
Для вёрстки строчные элементы применяются реже, чем блочные. Это
связано в основном с тем, что внутрь строчных элементов не допускается вкладывать
контейнеры
, И подобные широко распространённые теги. Тем не менее, блочные и строчные
элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять
вид составляющих веб-страниц. В примере 3.16 показано использование тега
для выделения отдельных слов.
Пример 3.16. Применение тега
Строчные элементы
Лягте животом на пол.
Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны.
Руки за головой. Тяните голову руками вверх и вперед до полного
сокращения мышц живота. Задержитесь на две
секунды. Выполните восемь повторений.
Результат примера показан ниже (рис. 3.25).
Рис. 3.25. Текст, оформленный с помощью стилей
В данном примере тег и стили используются
для выделения различными способами фрагментов текста. В частности, выделение
происходит за счёт фонового цвета, рамки вокруг текста и сменой его цвета. Обратите внимание, что в результате переноса текста рамка вокруг него также перенеслась на другую строку. Во многих случаях это выглядит не очень красиво, поэтому можно запретить перенос текста через white-space
: nowrap
.
Для текста, который не обрамлён строчным тегом вроде создаётся анонимный строчный элемент. Для примера выше схема элементов будет следующей (рис. 3.26).
Рис. 3.26. Анонимные строчные элементы
Серым цветом на рисунке помечен текст внутри тега , а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.
Преобразование в строчный элемент
Строчные элементы можно превращать в блочные с помощью свойства display
и его значения block
. Также возможно и обратное
действие через значение inline
(пример 3.17).
Пример 3.17. Свойство display
XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
Строчные элементы
Примечание
Исходя из различных критериев, основными из
которых являются показатели целесообразности и эффективности приложенных
усилий, можно однозначно сказать следующее. А именно, что достижение
желаемых результатов требует гибкого подхода, основанного на опыте и
глубоком понимании смысла вышеизложенного.
Результат примера приведен на рис. 3.27.
Рис. 3.27. Замена блочного элемента на строчный
В данном примере блочный тег
Отображается
на веб-странице как строчный элемент. Это требуется для того, чтобы ширина
фона и рамки равнялась ширине самого текста с учетом полей. Как известно,
ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится
представлять тег
В виде строчного элемента.
В принципе, аналогичным решением будет использовать вместо
Тег .
Учтите, что преобразование элемента в строчный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных.
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги
,
,
,
,
-
,
,