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

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

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

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

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

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://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" " https://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>