Главная | Регистрация | Вход | RSS | Вторник, 19.03.2024, 12:00 | |||||||||||||||||
КАК СОЗДАТЬ СВОЙ САЙТ | ||||||||||||||||||
Урок "12"Высота(height) и ширина(width) блоковКак Вы уже наверное заметили, по умолчанию высота и ширина блоков определяются автоматически, т.е. чем больше текста(или другого содержимого) тем шире и выше блок. Но, с помощью технологии CSS , мы можем сами задавать необходимую нам ширину и высоту блоков. Ну что ж, давайте начнем. HEIGHT - свойство устанавливающее высоту блока; WIDTH - свойство устанавливающее ширину блока; Обычно, в качестве блоков в CSS используют элемент DIV. Однако свойство ширины и высоты можно применить и к параграфам, спискам и др. Теория - теорией, но давайте практиковаться. Я создал 4 класса, и поочередно присвоил их одному и тому же боксу (в данном случае DIV) с текстом. Смотрите что получилось. .box1 { Как видите, ширина фиксированная и равна 300 пикселей, а высота устанавливается по умолчанию, в зависимости от содержимого.
.box2 { Теперь, фиксированная высота, а ширина растягивается по содержимому.
.box3 { Здесь фиксированная как высота, так и ширина.
.box4 { А это пример того, как будет выглядеть бокс с фиксированной шириной и высотой, если содержимое не влазит туда :) Примечание! Как я уже говорил, в 9 уроке, согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого. Ну вот мы и разобрались с шириной и высотой блоков. Можно смело двигаться дальше... См. также Следующий - Урок 13: Позиционирование блоков |
|