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

⇐ ПредыдущаяСтр 5 из 9Следующая ⇒

Свойства 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 Следующая ⇒