Следующие структурные элементы в нашем коде — это два блока, находящиеся по соседству. Традиционная блочная модель строится на базе стилей CSS, позволяющих задать местоположение каждого блока. С помощью свойства float блоки можно поместить у правого или левого края экрана в зависимости от того, какие перед нами стоят задачи. Для создания этих блоков в шаблоне HTML использованы теги <section> и <aside>, а идентифицируются они атрибутом id со значениями main_ section и main_aside соответственно.
Листинг 2.33. Создание двух столбцов с помощью свойства float
#main_section { float: left; width: 660px; margin: 20px;
}
#main_aside { float: left; width: 220px; margin: 20px 0px; padding: 20px; background: #CCCCCC;
}
Свойство CSS float — одно из наиболее часто используемых в реализации традиционной блочной модели. Оно заставляет элемент прикрепляться к одному или другому краю доступного пространства. Элементы, для которых определено свойство float, работают, как блочные элементы, — различия определяются лишь значением данного свойства, а не нормальным потоком документа. В зависимости от значения свойства float элементы переносятся к самому краю доступной для размещения области — как можно левее или правее.
В правилах из листинга 2.33 мы объявляем позиции и размеры обоих блоков и таким образом создаем на экране столбцы содержимого. Свойство float перемещает блок к тому краю доступного пространства, на который указывает его значение, свойство width определяет размер по горизонтали, а margin — размер полей элемента.
Что касается стилей, создаваемых нашими правилами, то содержимое элемента <section> будет располагаться у левого края экрана. Для него отводится 660 пикселов по ширине плюс 40 пикселов на поля, итого 700 пикселов по горизонтали.
Значение свойства float, связанного с элементом <aside>, — left. Это означает, что данный блок будет располагаться у левого края доступного пространства. Поскольку предыдущий блок, определяемый элементом <section>, также отодвигается к левому краю экрана, в данный момент мы рассматриваем только пространство, остающееся справа от него. Новый блок будет находиться в той же строке, что и первый, справа от него. Занимая оставшееся на этой строке место, он будет создавать второй столбец в нашем дизайне.
Для получения реального значения складываем размер элемента с шириной его полей. Если ширина элемента равна 200 пикселам, а справа и слева у него есть поля шириной 10 пикселов каждое, то в действительности он займет область шириной 220 пикселов. Общая ширина полей (20 пикселов) прибавляется к ширине элемента (200 пикселов): итоговое значение и показывает, сколько места для него потребуется на экране.
То же самое относится к свойствам padding (внутренние поля или забивка) и border (рамка). Добавляя рамку к элементу или определяя пустое пространство между содержимым и рамкой с помощью свойства padding, не забывайте прибавлять эти значения к ширине элемента, для того чтобы понять его реальный размер на экране. Реальная ширина вычисляется по формуле: размер + поля + забивка + рамки.
Вернитесь к листингу 2.25. Пройдитесь по всем созданным до этого момента правилам CSS и найдите в шаблоне элементы HTML, соответствующие каждому из этих правил. Обращайте внимание на ссылки: ключевые слова элементов (например, h1) и атрибуты id (такие, как main_header) помогают понять, как работают ссылки и как стили назначаются различным элементам.
Мы также определили размер второго блока — 220 пикселов, добавили серый фоновый цвет и внутренние поля шириной 20 пикселов. В результате ширина поля будет равна 220 пикселам плюс еще 40, добавленных за счет применения свойства padding (внешние поля справа и слева от элемента имеют нулевую ширину).
Добавить комментарий