Отображение строкового элемента как блочного, и наоборот
Иногда необходимо, чтобы броузер обрабатывал определенные HTML- элементы несколько иным образом, нежели по умолчанию.
Решение
На рис. 9.1 видно, что элемент div отображается в непрерывном пото- ке элементов страницы, а ссылка отображается как блочный элемент.
Рис. 9.1. Отображение блочного элемента в качестве строкового, а строкового – в качестве блочного
Такой эффект был достигнут с помощью следующего кода:
chapter09/inline-block.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Inline and block level elements</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
<style type=”text/css”>
#one {
background-color: #CFEAFA; border: 2px solid #6CB5DF; padding: 2px 6px 2px 6px;
}
#two {
background-color: #CFEAFA; border: 2px solid #6CB5DF; padding: 2px 6px 2px 6px; display: inline;
}
a {
background-color: #6CB5DF;
color: #FFFFFF;
text-decoration: none;
padding: 1px 2px 1px 2px;
}
a.block {
display: block;
}
</style>
</head>
<body>
<div id=”one”>A div is a block level element.</div>
<p>It is possible to display a div or any other block level element as an inline element. </p>
<div id=”two”>This div is displaying as an inline element.
</div>
<p>This paragraph contains a
<a href=”http://www.sitepoint.com/”>link</a> that displays as an inline element.</p>
<p>This paragraph contains a
<a class=”block” href=”http://www.sitepoint.com/”>link</a> that displays as a block element.</p>
</body>
</html>
Обсуждение
Блочные элементы отличаются от строковых тем, что они могут содер- жать другие элементы любого типа. Они также форматируются иным образом: по умолчанию для их размещения отводится прямоугольная область, по ширине занимающая всю страницу. Строковые элементы размещаются непосредственно в тексте, причем для того чтобы они уместились внутри содержащего их блока, осуществляется переход на новую строку. По умолчанию следующие HTML-элементы считаются блочными: заголовки (h1, h2, h3,…), абзацы (p), списки (ul, ol) и различ- ные контейнеры (div, blockquote).
В приведенном выше примере есть элемент div, отображаемый в соот- ветствии с его типом. Будучи блочным элементом, по ширине он зани- мает все доступное пространство родительского элемента – в данном случае body. Если бы он располагался внутри другого div или в ячейке таблицы, его ширина соответствовала бы ширине этого элемента.
Чтобы div отображался по-другому, можно превратить его в строковый элемент путем изменения следующего свойства:
display: inline;
Аналогичным образом можно превратить строковый элемент в блоч- ный. Обратите внимание, что в рассмотренном ранее примере элемент a по умолчанию является строковым. У разработчика достаточно часто возникает потребность в изменении его типа на блочный, например при создании навигационной панели с помощью CSS. Для этого нужно за- дать свойству display значение block. В предыдущем примере благодаря использованию такого приема серое окошко со ссылкой по ширине за- нимает весь экран.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Да, но это реально? (0)
- Что такое селекторы и как их правильно использовать (0)
- Центрирование текста (0)
- Удаление отступов от края страницы (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Создание горизонтального меню с помощью списков и CSS (0)
- Выбор единиц измерения размера шрифтов:пикселы, пункты, пики или что-то другое (0)