Форматирование блоков
Как вы уже знаете, любой элемент Web-страницы занимает в окне Web- браузера некоторую прямоугольную область. Эта область имеет как внутрен- ние, так и внешние отступы, а также содержит реальную или воображаемую границу. Тип блочной модели зависит от формата документа. Если тег
<!DOCTYPE> указан, то блочная модель соответствует стандартам консорциу-
ма W3C. Реальные размеры элемента вычисляются так:
Реальная ширина = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
Реальная высота = margin-top + border-top-width + padding-top + height +
padding-bottom + border-bottom-width + margin-bottom
Если тег <!DOCTYPE> не указан, то Web-браузер Internet Explorer переходит в режим совместимости (Quirks Mode). В этом режиме padding и border вхо- дят в состав width и height, а следовательно, реальные размеры будут дру- гие:
Реальная ширина = margin-left + width + margin-right
Реальная высота = margin-top + height + margin-bottom
Поэтому при отсутствии тега <!DOCTYPE> разные Web-браузеры могут по-
разному отображать Web-страницу.
П РИМ Е ЧАНИЕ
Более подробную информацию о типах блочной модели можно получить в Ин- тернете на странице консорциума W3C http://www.w3.org/TR/CSS2/box.html и на странице http://www.quirksmode.org/css/box.html.
2.12.1. Указание типа блока
Атрибут display предназначен для указания типа блока. Может принимать следующие значения:
? block — блок занимает всю ширину родительского элемента. Значение
block по умолчанию имеют теги <div> и <p>;
? inline — блок занимает только необходимое для отображения содержи-
мого пространство. Значение inline по умолчанию имеют теги <span>,
<b> и др.;
? inline-block — аналогично inline, но дополнительно можно задать размеры и другое форматирование, применяемое для блочного элемента. Результат аналогичен встраиванию тега <img> в строку;
? none — содержимое блока не отображается.
Различные варианты использования атрибута display приведены в листин-
ге 2.8.
Листинг 2.8. Атрибут display
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Атрибут display</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
<style type="text/css">
div div { border: 2px solid #333 }
label { display: inline-block; width: 100px }
</style>
</head>
<body>
<h2>Различные типы блоков</h2>
<div>
<div style="display: inline">display = inline</div>
<div style="display: inline; width: 300px">display = inline</div>
<div style="display: inline-block; width: 300px">
display = inline-block
</div>
<div style="display: block">display = block</div>
<div style="display: none">Этого блока не видно</div>
</div>
<h2>Выравнивание элементов формы</h2>
<div><label for="login">Логин:</label>
<input type="text" name="login" id="login"></div>
<div><label for="pass">Пароль:</label>
<input type="password" name="pass" id="pass"></div>
<h2>Указание типа блока для ссылки</h2>
<div>
<div style="width: 300px"><a href="link1.html">Обычная ссылка</a></div>
<div style="width: 300px">
<a href="link.html" style="display: block">Ссылка занимает всю ширину блока</a>
</div>
</div>
</body>
</html>
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Что такое селекторы и как их правильно использовать (0)
- Создание макета страницы с помощью CSS-таблиц (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Создание горизонтального меню с помощью списков и CSS (0)
- Выбор единиц измерения размера шрифтов:пикселы, пункты, пики или что-то другое (0)
- Оформление карты сайта (0)
- Организация табличных данных:удобство доступа и наглядность (0)