Урок 12: height/высота и width/ширина
До сих пор мы особо не заботились о размерах элементов, с которыми работали. В этом уроке мы посмотрим, как легко можно определять высоту и ширину элемента.
Установка ширины [width]
Свойством width вы можете определять ширину элемента.
В примере показан бокс для ввода текста:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Установка высоты [height]
Обратите внимание, как, в предыдущем примере, высота бокса устанавливается
содержимым этого бокса. Высоту элемента можно определить свойством height.
В качестве примера попытаемся создать бокс высотой 500px:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Резюме
Уроки 9, 10, 11 и 12 дали введение в боксовую модель CSS. Как вы, вероятно, заметили, боксовая модель предоставляет много новых возможностей. Ранее вы уже могли использовать таблицы в HTML для дизайна страниц, но с помощью CSS и боксовой модели вы сможете создавать элегантный дизайн более точно и в соответствии с рекомендациями W3C.