Урок посвящен позиционированию HTML-объектов с помощью CSS. Рассмотрим несколько способов.
Свойство float
Создадим два объекта с id first и second, и общим классом block:
<div id="first" class="block">Первый блок</div>
<div id="second" class="block">Второй блок</div>
В CSS-файле удалим внешние и внутренние отступы для всех объектов и зададим стили для класса block:
* {
margin: 0;
padding: 0;
}
.block {
width: 200px;
height: 200px;
margin: 20px;
background-color: red; /* или yellow */
}
По умолчанию блочные элементы располагаются друг под другом. Свойство float изменяет это поведение. Применим float: left; к элементу first:
#first {
float: left;
}
Первый блок прижмется к левой стороне, позволяя другим элементам обтекать его справа. Для корректного отображения свойство float должно быть применено ко всем элементам на одном уровне. Добавим float: left; к элементу second:
#second {
float: left;
background-color: blue;
}
Теперь оба блока располагаются на одной строке. Свойство float принимает значения left (влево) и right (вправо).
Верстка сайта с помощью float
Создадим простую структуру сайта: шапка (header), футер (footer), основная часть (main) и боковая панель (sidebar):
<div id="header" class="header">Шапка</div>
<div id="main" class="main">Основная часть</div>
<div id="sidebar" class="sidebar">Боковая часть</div>
<div id="footer" class="footer">Футер</div>
CSS-стили:
#header {
width: 100%;
height: 100px;
text-align: center;
border-bottom: 2px solid silver;
background-color: #333;
color: #fff;
line-height: 100px; /* для центрирования текста по вертикали */
padding-bottom: 50px;
}
#footer {
width: 100%;
height: 100px;
text-align: center;
border-top: 2px solid silver;
background-color: #333;
color: #fff;
line-height: 100px;
padding-top: 50px;
margin-top: 50px;
}
#main {
width: 50%;
margin-left: 10%;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px 2.5%;
}
#sidebar {
width: 35%;
margin-left: 10%;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px 2.5%;
}
Для позиционирования main и sidebar в одну строку, применим float: left;:
#main {
float: left;
/* ... другие стили ... */
}
#sidebar {
float: left;
/* ... другие стили ... */
}
#footer {
float:left;
clear: both;
}
clear: both; для футера обеспечит его отображение под основным контентом. Правильное вычисление процентов ширины важно для корректного отображения на разных экранах.
Свойство position
Свойство position управляет позиционированием элементов. Рассмотрим значения relative и absolute.
- position: relative; Позиционирует элемент относительно его исходного положения. Свойства top, bottom, left, right указывают смещение.
- position: absolute; Позиционирует элемент относительно ближайшего предка с position: relative или position: absolute, либо относительно документа, если предка нет.
- position: fixed; Позиционирует элемент относительно окна браузера. Элемент остается на месте при прокрутке страницы.
Пример использования position: absolute; для создания кнопки:
<div id="plus">+</div>
#plus {
background-color: red;
color: white;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
position: absolute;
left: 20px;
top: 50px;
}
Аналогичный код с position: fixed; зафиксирует кнопку на экране независимо от прокрутки.
Рассмотрены основные способы позиционирования блоков в CSS: свойство float для позиционирования элементов на одной строке, и свойство position со значениями relative, absolute и fixed для более точного контроля над размещением элементов. Правильное сочетание этих свойств позволяет создавать сложные и гибкие макеты веб-страниц.