Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
№ 4 Блочная вёрстка Лекция.docx
Скачиваний:
2
Добавлен:
07.09.2019
Размер:
986.74 Кб
Скачать

Использование float

Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон. Такое поведение текста напоминает поток воды, обтекающий камень, поэтому элементы с таким поведением и называются плавающими. В отличие от абсолютно позиционированных плавающие элементы не обладают властью над координатами, их не получится заставить встать в точно заданную точку, но они имеют ряд примечательных характеристик. Настолько, что свойство float для вёрстки стало использоваться повсеместно. Перечислим лишь ряд возможных приложений:

  • галереи небольших фотографий;

  • двух и трёхколоночные макеты;

  • горизонтальные меню;

  • иллюстрации в тексте;

  • многоколоночный текст.

float может добавляться к изображениям (тег <img>), блочным элементам вроде <p><div> и к строчным элементам (<span><a><strong>). В примере 3.12 показано использование float для абзаца с фотографией.

Пример 3.12. Плавающий элемент

XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Обтекание</title>

<style type="text/css">

.right {

float: right;

}

</style>

</head>

<body>

<p class="right"><img src="images/cat.jpg" alt="Кошка" /></p>

<p>Сфотографировано на камеру Canon EOS 50D. Объектив 24-105,

диафрагма 4.0, выдержка 1/500, чувствительность ISO 400</p>

</body>

</html>

Результат примера показан на рис. 3.22.

Рис. 3.22. Плавающий элемент

Свойство float лишь частично влияет на элемент в потоке. Можно управлять положением по горизонтали, меняя значение float с right на left, но по вертикали положение элемента задаётся его местом в коде.

Блочные элементы

Начало формы

Конец формы

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>,<blockquote><div><fieldset><form><h1>,...,<h6><hr><ol><p><pre><table><ul> и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table и в некоторых случаях run-in.

Для блочных элементов характерны следующие особенности.

  • Блоки располагаются по вертикали друг под другом.

  • На прилегающих сторонах элементов действует эффект схлопывания отступов.

  • Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h1>Заголовок</h1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h1><a>Заголовок</a></h1>.

  • По ширине блочные элементы занимают всё допустимое пространство.

  • Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.

  • Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.

  • Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.

  • На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.

  • Текст по умолчанию выравнивается по левому краю.

Не все блочные теги допустимо вкладывать один в другой, поэтому при создании структуры кода активную роль выполняет <div> как универсальный кирпичик вёрстки. Тег <div> допустимо вкладывать один в другой, другие блочные элементы также можно помещать внутрь<div>. В примере 3.13 показан фрагмент кода сайта CSS Zen Garden, где активно применяются эти теги для формирования требуемой конструкции.

Пример 3.13. Использование тега <div>

<div id="container">

<div id="intro">

   <div id="pageHeader">

<h1><span>css Zen Garden</span></h1>

      <h2><span>The Beauty of <acronym

         title="Cascading Style Sheets">CSS</acronym> Design</span></h2>

    </div>

    <div id="quickSummary">

      <p class="p1"><span>A demonstration of what can be accomplished

      visually through <acronym title="Cascading Style Sheets">CSS</acronym>

- based design. Select any style sheet from the list to load it into

this page.</span></p>

   </div>

  </div>

</div>

Если в одном блочном элементе содержатся строчные элементы наряду с блочными, то вокруг строчных элементов генерируется анонимный блок. Для таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя. В примере 3.14 внутри <div>располагается два тега <p> и рядовой текст. Поскольку этот элемент анонимный, напрямую только к нему одному нельзя применить стили.

Пример 3.14. Анонимный блок

XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Анонимный блок</title>

</head>

<body>

<div>

<p>Первый абзац</p>

Анонимный блок

<p>Второй абзац</p>

</div>

</body>

</html>

Схематично блоки в данном примере показаны на рис. 3.23. Серым цветом выделены блочные теги <p>, а пунктиром — анонимный блок.

Рис. 3.23. Блоки в документе

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]