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

Свойства 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>

Смотреть пример








Дата добавления: 2016-02-16; просмотров: 589;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.003 сек.