Большинству элементов в HTML, как правило, присваивается определённая высота и ширина. Задать данные параметры в CSS достаточно легко, а как результат - практично. Используются для этого уже известные Вам свойства height и width. Однако, в данном уроке мы ещё поговорим о не фиксированной ширине и высоте или резиновой, то есть в зависимости от ширины самого окна. Приступим)
width
Это свойство устанавливает определённую ширину HTML элемента. Значение может быть указано в пикселях, процентах (другие величины используются реже).
HTML:
.myBlock {
width:400px;/* ширина 400 пикселей */
color:#f1f1f1; /* светло-серый блок */
}
HTML:
.myBlockPercent50 {
width:50%;/* ширина 50% от ширины блока или окна (если не внутри блока с фиксированной шириной) */
color:#f1f1f1; /* светло-серый блок */
}
Теперь о самом интересном. У width есть такие параметры, которые указывают максимальную или минимальную ширину. Это свойства min-width и max-width соответственно. Указывать для них значения можно также и в пикселях, и в процентах, и в других величинах. Данные свойства - это основа для создания резинового и адаптивного дизайнов ().
Пример адаптивного дизайна. Посмотри, изменяя размеры окна бразура:
Это я, конечно, забежал вперёд. Но вы должны понимать что и зачем нужно. Да и потрогать приятный результат)
Как Вы уже поняли, с помощью этих свойств можно более гибко обращаться с элементами на странице, не искажая содержимого. Как это работает? Рассмотрим код.
демо:
http://tradebenefit.ru/tbtemplates/adaptive-responsive-design/index.html
HTML:
.block {
max-width:800px;
background-color:#f1f1f1; /* светло-серый блок */
padding:20px;
}
демо: http://tradebenefit.ru/examples/css015.html
height
Это свойство отвечает за высоту элемента. В качестве величины используются всё те же пригодные для CSS. Чаще всего те же проценты и пиксели.
HTML:
.info {
height:200px;/* высота блока будет 200 пикселей */
padding:10px;/* повторяем про отступы внутри блока =) */
}
HTML:
.info {
max-height:360px;/* максимальная высота блока */
min-height:120px;/* минимальная высота блока */
}
Или комбинировать величины:
HTML:
.content {
height:100%;/* высота всегда будет 100% */
width:760px;/* а вот ширина фиксированная 760 пикселей */
}
Спасибо за внимание! Успехов в вёрстке!)
Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину