Ширина и высота блочных элементов.

Свойства CSS width и height - устанавливают ширину и высоту блочных элементов. Ширина и высота элемента может быть задана следующими способами:

· auto - Размеры элемента определяется его содержанием. (по умолчанию)

· % - Размеры элемента задаётся в процентах от высоты/ширины элемента родителя.

· px - Размеры элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Размеры блока</title>
</head>
<body>
<div style="background-color: #00ffff; height: 100px; width: 250px">Блок 1</div>
<div style="background-color: #00ff00; height: 150px; width: 50%">Блок 2</div>
<div style="background-color: #ffff00; height: auto; width: auto">Блок 3</div>
</body>
</html>

Если содержание элемента превышает его указанный размер, то в некоторых браузерах элемент автоматически присвоит значение auto, а в некоторых содержание "выползет" за пределы элемента.

Управление содержанием элемента.

Что делать с содержанием элемента, если оно превышает его размер?

Если элементу присвоены точные значения высоты и ширины (height, width) а его содержание, например длинный текст, не вмещается в указанных пределах, то по умолчанию такой элемент растягивается до нужных размеров, что не всегда на руку веб-мастеру. На помощь приходит атрибут overflow, который указывает браузеру, что делать с элементом в таких случаях.

Свойство overflow может иметь следующие значения:

· visible - Элемент растягивается до необходимых размеров. (по умолчанию)

· hidden - Содержание элемента "обрезается" видна лишь та его часть что помещается в элементе.

· scroll - Добавляются полосы прокрутки (всегда! даже если содержание помещается в пределах элемента).

· auto - Полосы прокрутки добавляются при необходимости.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Содержание элемента</title>
</head>
<body>
<div style="overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd">
<h3 align="center">Диктант</h3>
На дощатой террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками и другими яствами, под аккомпанемент виолончели.
</div>
</body>
</html>

Минимальные и максимальные размеры элемента.

Так как размеры элемента по умолчанию регулируются исключительно вложенным в него содержанием, текстом, графикой.. и т.д. то элементы становятся, вернее, остаются "резиновыми" и это хорошо! Но хорошо не во всех случаях.. иногда требуется ограничить эту "резиновость" конкретными размерами. Например, указать ячейке таблицы, что ты мол, независимо от твоего содержания, можешь быть по высоте не менее 50 пикселей, но и не более 200 пикселей.. определить, так сказать, диапазон её высоты или ширины.

Ниже перечисленные свойства CSS позволяют определить минимальные и максимальные размеры того или иного элемента

· max-height - максимальная высота элемента

· max-width - максимальная ширина элемента

· min -height - минимальная высота элемента

· min-width - минимальная ширина элемента

Эти свойства CSS, в свою очередь, могут выражаться в пикселях, процентах от размеров родительского элемента и none - без ограничений.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Минимальные и максимальные размеры элемента</title>
</head>
<body>
<div style="min-height: 50px; min-width: 100px; max-height: 250px; max-width: 300px; border: solid 2px #dddddd">
Браузер Internet Explorer игнорирует свойства css min-width, max-width, min-height и max-height.
</div>
</body>
</html>

Полезные советы:

Как Вы уже поняли не все браузеры одинаково интерпретируют как HTML теги, так и свойства CSS. Особым "невежеством" по отношению как к пользователям так и к веб дизайнерам отличился Internet Explorer 6 и его более ранние версии.. Впрочем, и в остальных браузерах далеко не всё проходит гладко. Отсюда необходимо сделать вывод, что прежде чем выкладывать ту или иную страницу в Интернет её необходимо просмотреть (протестировать) в различных браузерах и их версий. А совет заключается собственно в том, что хорошо бы было их иметь под рукой - в установленном виде на Вашем компьютере. Соберите свою "коллекцию" браузеров.

Глава 8

Поля и отступы.

В этой главе мы поговорим о полях (свойство margin) и отступах (свойство padding) элемента. Между собой эти два свойства весьма схожи, однако все же это два абсолютно разных свойства.

Давайте разберемся в этих понятиях..

Поле (margin) - Это расстояние от внешней границы элемента до границы окна браузера или же элемента родителя.. ну границы того блока в который вложен наш элемент.

Отступом (padding) - Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц..

На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром (border) про него тоже не следует забывать.

Расстояния margin и padding указываются:

· px - В пикселях или любых других допустимых CSS единицах измерения.

· % - В процентах.

· auto - Размер полей и отступов автоматически рассчитывается браузером.

Давайте попробуем сделать тоже самое, что показано на рисунке с помощью блоков <div> и свойств CSS.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Поля и отступы</title>
<style type="text/css">
div.block1 {
width: 260px;
background-color: #c5ffa0;
border: 2px solid #a68754
}
div.block2 {
background-color: #c0e4ff;
border: 8px solid #a68754;
margin: 40px;
padding: 20px
}
</style>
</head>
<body>
<div class="block1">
<div class="block2">
<samp>Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!</samp>
</div>
</div>
</body>
</html>

Попробуйте поменять значения свойств margin и padding и Вы поймете, что к чему.. а если и так понятно идем дальше..

Предыдущая 1 2 3 456 7 8 9 Следующая

Не нашли, что искали? Воспользуйтесь поиском по сайту: