Приднестровская поддержка XOOPS
Иногда необходимо, чтобы браузер обрабатывал определенные HTML-элементы несколько иным образом, нежели по умолчанию.
Решение
На рис. 9.1 видно, что элемент div отображается в непрерывном потоке элементов страницы, а ссылка отображается как блочный элемент.
Рис. 9.1. Отображение блочного элемента в качестве строкового, а строкового – в качестве блочного
Такой эффект был достигнут с помощью следующего кода:
<!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>Строковые и блочные элементы</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">Этот div является блочным элементом.</div>
<p>Мы можем показать вшм или любой другой элемент как строковый элемент. </p>
<div id="two">Этот div показан как строковый элемент.</div>
<p>Этот параграф содержит <a href="http://xoops.ws/">ссылку</a>
которая показана как строковый элемент.</p>
<p>Этот параграф содержит <a class="block" href="http://xoops.ws/">ссылку</a>
которая показана как блочный элемент.</p>
</body>
</html>
Обсуждение
Блочные элементы отличаются от строковых тем, что они могут содержать другие элементы любого типа. Они также форматируются иным образом: по умолчанию для их размещения отводится прямоугольная область, по ширине занимающая всю страницу. Строковые элементы размещаются непосредственно в тексте, причем для того чтобы они уместились внутри содержащего их блока, осуществляется переход на новую строку. По умолчанию следующие HTML-элементы считаются блочными: заголовки (h1, h2, h3,...), абзацы (p), списки (ul, ol) и различные контейнеры (div, blockquote).
В приведенном выше примере есть элемент div, отображаемый в соответствии с его типом. Будучи блочным элементом, по ширине он занимает все доступное пространство родительского элемента – в данном случае body. Если бы он располагался внутри другого div или в ячейке таблицы, его ширина соответствовала бы ширине этого элемента.
Чтобы div отображался по-другому, можно превратить его в строковый элемент путем изменения следующего свойства:
display: inline;
Аналогичным образом можно превратить строковый элемент в блочный. Обратите внимание, что в рассмотренном ранее примере элемент a по умолчанию является строковым. У разработчика достаточно часто возникает потребность в изменении его типа на блочный, например при создании навигационной панели с помощью CSS. Для этого нужно задать свойству display значение block. В предыдущем примере благодаря использованию такого приема серое окошко со ссылкой по ширине занимает весь экран.
Отправитель | Нити |
---|
2 пользователь(ей) активно (1 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 2 далее... |