Содержание:
Свойства блоков width, max-width, height, max-height
width
ширина блока
max-width
height
высота блока
max-height
Возможные значения для всех свойств:
auto- величина в пикселях
%
Пример:
.div1{ width:100%; background-color:#ccc; } .div2{ width:50%; height:100px; background-color:#fc3; } |
</style></head> <body> <div class="div1">div1 <div class="div2">div2</div> </div> |
Результат:
float
блочность или обтекание
В обычном состоянии элемент div — блочный:
При использовании float элемент теряет блочность и выравнивается согласно значению:
При этом следует иметь в виду, что если блок, следующий дальше, не имеет установленного свойства float, то сам блок поместится за блок со значением свойства float:left. А содержимое блока (текст) будет обтекать блок со значением свойства float:left:
Рис. Расположение блоков при использовании свойства float
Возможные значения float:
leftrightnoneinherit
элемент выравнивается по левому краю, давая остальным элементам обтекать его справа
элемент выравнивается по правому краю, давая остальным элементам обтекать его слева
обтекание не задается (значение по умолчанию)
значение наследуется от родителя
Пример:
.left{ float: left; /* Обтекание по правому краю */ background: #fd0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ width: 40%; /* Ширина блока */ } .right{ float: right; /* Обтекание по правому краю */ background: #fd0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ width: 40%; /* Ширина блока */ } |
</style></head> <body> <div class="left">float: left</div> <div>Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div.Это пример обычного div. Это пример обычного div.Это пример обычного div.Это пример обычного div. Это пример обычного div.</div> <br/> <div class="right">float: right</div> <div>Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div.Это пример обычного div. Это пример обычного div.Это пример обычного div.Это пример обычного div. Это пример обычного div.</div> </div> |
Результат:
clear
отмена обтекания
Возможные значения:
leftrightbothnoneinherit
отмена обтекания элемента слева
отмена обтекания элемента справа
отмена обтекания элемента и справа и слева
нет отмены обтекания (значение по умолчанию)
значение наследуется от родителя
Пример:
.left{ float: left; /* Обтекание по правому краю */ background: #fd0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ width: 40%; /* Ширина блока */ } .clear{ clear: left; /* Обтекание по правому краю */ } |
</style></head> <body> <div class="left">float: left</div> <div class="clear">Это пример div с clear. Это пример div с clear.</div> |
Результат:
margin-left и margin-right
или выравнивание блока по центру
auto для свойств margin-left и margin-right выравнивает блок по центру в своем контейнере (или браузере). При этом у элемента должна быть задана ширина.Пример:
.center{ background: #fd0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ width: 300px; /* Ширина блока */ margin-left: auto; margin-right: auto; } |
</style></head> <body> <div class="center">Это пример div</div> |
Результат:
