Урок 12: Высота(height) и ширина(width) блоков

Как Вы уже наверное заметили, по умолчанию высота и ширина блоков определяются автоматически, т.е. чем больше текста(или другого содержимого) тем шире и выше блок.

Но, с помощью технологии CSS , мы можем сами задавать необходимую нам ширину и высоту блоков. Ну что ж, давайте начнем.

HEIGHT - свойство устанавливающее высоту блока;

WIDTH- свойство устанавливающее ширину блока;

Обычно, в качестве блоков в CSS используют элемент DIV. Однако свойство ширины и высоты можно применить и к параграфам, спискам и др.

Теория - теорией, но давайте практиковаться. Я создал 4 класса, и поочередно присвоил их одному и тому же боксу (в данном случае DIV) с текстом. Смотрите что получилось.

.box1 {
width: 300px;
border: 1px solid red;
background: #FFE446;
}

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

Как видите, ширина фиксированная и равна 300 пикселей, а высота устанавливается по умолчанию, в зависимости от содержимого.

 

.box2 {
height: 300px;
border: 1px solid red;
background: #FFE446;
}

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

Теперь, фиксированная высота, а ширина растягивается по содержимому.

 

.box3{
width: 300px;
height: 600px;
border: 1px solid red;
background: #FFE446;
}

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

Здесь фиксированная как высота, так и ширина.

 

.box4{
width: 300px;
height: 300px;
border: 1px solid red;
background: #FFE446;
}

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

А это пример того, как будет выглядеть бокс с фиксированной шириной и высотой, если содержимое не влазит туда :)
Текст попросту выходит за рамки блока.








Дата добавления: 2015-04-05; просмотров: 778;


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

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

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

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