HTML
.pdf
Правила, регулирующие
плавающие объекты
Если мы хотим расположить их в обратном порядке, просто применяем float:right вместо float:left, и не придется менять порядок в HTML
Правила, регулирующие
плавающие объекты
Чтобы избежать этого, необходимо использовать свойство clear.
Если применим его ко |
Нужно применить clear:both к абзацу: |
|
второму блоку: |
|
|
p { clear: both; } |
||
|
||
|
|
В этом случае остальные блки продолжают наследовать float:left. Соответсвенно текст будет продолжать обтекать остальные элекенты
Правила, регулирующие
плавающие объекты
С помощью float удобно группировать элементы на странице, но большой проблемой становится то, что последующие элементы (текст или блок) также получают свойство обтекания. Например, у нас есть блок картинок:
Текст под ним начинает обтекать весь блок
Правила, регулирующие
плавающие объекты
Теперь предположим, что нам необходимо установить фон для галереи из предыдущих примеров. Если бы элементы были не плавающими, то результат был бы такой:
.bg {background: grey;}
<div class=''bg''>
<div class="left"> </div> <div class="left"> </div> <div class="left"> </div> <div class="left"> </div> <div class="left"> </div> <div>
Правила, регулирующие
плавающие объекты
Но если элементам списка применить float:left, фон совсем пропадает:
Если мы сначала устанавливаем высоту для родительского DIV.
.bg { height: 300px;}
Это тоже не решает проблему, т.к. размеры фона заданы абсолютно.
Нам поможет параметр overflow, который будет применен к div
.bg { overflow: auto; }
Задача
Преобразование в блочный
элемент
В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height.
<style type="text/css">
.menu { width: 220px; padding: 5px; border: 1px solid #000; }
.menu P { margin: 0 0 2px; }
.menu A {padding: 2px; display: block; border: 1px solid #fff; text-decoration: none;
}
.menu A:hover {background: #faf3d2;
color: #800000; border: 1px dashed #634f36 } </style>
<div class="menu">
<p><a href="l.html">Ссылка1</a></p> <p><a href="2.html">Ссылка2</a></p> <p><a href="3.html">Ссылка3</a></p> <p><a href="4.html">Ссылка4</a></p>
</div>
Строчно-блочные элементы
Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно.
В HTML нет тега, который относится к строчно-блочным элементам, его можно определить, задав элементу свойство display со значением inline-block.
div {
display: inline-block;
}
Характеристики этих элементов следующие.
●Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
●Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
●Ширина равна содержимому плюс значения отступов, полей и границ.
●Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
●Можно выравнивать по вертикали с помощью свойства vertical-align.
●Разрешено задавать ширину и высоту.
●Эффект схлопывания отступов не действует.
Строчно-блочные элементы
<style type="text/css">
BODY { font: 10pt Arial, Helvetica, sans-serif; } #catalog A { color: #666; }
#catalog A:hover { color: #1fa0e2; }
#catalog DIV { width: 110px; margin: 0 5px 15px 0; text-align: center; display: inline-block; vertical-align: top;
}
#catalog P { margin: 0 5px; }
#catalog SPAN { color: #ccc; font-size: 0.8em; } </style>
<div id="catalog">
<div><p><img src="images/category1.jpg" alt="" /></p> <p><a href="#">Видео</a> <span>1856</span></p> </div>
<div><p><img src="images/category2.jpg" alt="" /></p> <p><a href="#">Фото</a> <span>315</span></p> </div>
<div><p><img src="images/category3.jpg" alt="" /></p> <p><a href="#">Мобильные устройства</a>
<span>2109</span></p>
</div>
</div>
Наложение и порядок слоёв
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
Синтаксис
z-index: число | auto | inherit
Значения
В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже.
Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.