Пока что мы всего лишь применили гибкую блочную модель к нашему шаблону, однако для того, чтобы полностью раскрыть ее потенциал, необходимо хорошо понимать, как эта модель работает, а также внимательно изучить ее свойства.
Одной из главных причин создания гибкой блочной модели была необходимость иметь возможность эффективно распределять экранное пространство между элементами. Приходилось увеличивать или уменьшать элементы в зависимости от того, сколько свободного места было в соответствующем контейнере. Чтобы понимать, какое количество пространства доступно для распределения, нужно было точно определять размер контейнера, и это привело к возникновению понятия родительских блоков. Родительские блоки определяются свойством display, и их можно описывать как блочные элементы, используя значение box, либо как строчные элементы, если задать значение inline-box.
Parentbox
|
Box-1 |
Box-2 |
Box-3 |
Box-4 |
рис. 2.4. Родительский блок с четырьмя потомками
HTML-код для генерации блоков, изображенных на рис. 2.4, может выглядеть примерно так, как показано в листинге 2.45.
Листинг 2.45. Базовый HTML-код, с которым мы будем работать
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexible Box Model sample</title> <link rel="stylesheet" href="test. css">
</head>
<body>
<section id="parentbox">
<div id="box-1">Box 1</div>
<div id="box-2">Box 2</div>
<div id="box-3">Box 3</div>
<div id="box-4">Box 4</div>
</section>
</body>
</html>
Создайте еще один пустой текстовый файл с любым названием и расширением. html. Скопируйте в него код из листинга 2.45. Используя этот файл, мы поэкспериментируем со свойствами гибкой блочной модели. Правила CSS будут подключаться из внешнего файла под названием test. css. Создайте и этот файл тоже и добавляйте в него правила из следующих листингов. Проверяйте результаты применения каждого правила, открывая HTML-файл в окне браузера.
Свойство display
Как уже говорилось, свойство display может принимать два значения: box и inline-box. Мы определим родительский блок как блочный элемент, используя значение box.
Не забывайте о том, что пока все эти свойства находятся на этапе разработки. Для того чтобы применять их, объявлять каждое из свойств необходимо с добавлением префикса — moz — или — webkit — в зависимости от того, с каким браузером вы работаете. Например, пока что display: box следует записывать как display: — moz-box для механизма Gecko и display: — webkit-box для механизма WebKit. Посмотрите, как это делается, в предыдущих листингах или зайдите на наш вебсайт, чтобы загрузить полные версии этих примеров. Мы решили не добавлять префиксы в листинги из этого раздела, для того чтобы вам было проще читать код.
Листинг 2.46. Объявление элемента parentbox в качестве родительского блока
#parentbox { display: box;
}
Свойство box-orient
По умолчанию родительский блок определяет горизонтальную ориентацию для всех своих потомков. С помощью свойства box-orient можно объявить определенную ориентацию элементов.
Листинг 2.47. Объявление ориентации дочерних элементов
#parentbox { display: box; box-orient: horizontal;
}
Свойство box-orient может принимать одно из четырех значений: horizontal, vertical, inline-axis или block-axis. По умолчанию устанавливается значение inline-axis, поэтому блоки выстраиваются в ряд по горизонтали (как показано на рис. 2.4). Аналогичного эффекта можно добиться с помощью значения horizontal, которое мы применили в листинге 2.47.
Этот и последующие примеры будут работать в браузере, только если вы будете объявлять каждый новый стиль с добавлением префикса — moz — или — webkit — в соответствии с тем, какой браузер используете (соответственно, Firefox или Google Chrome).
Добавить комментарий