Урок 9. Ширина и высота в CSS

Большинству элементов в HTML, как правило, присваивается определённая высота и ширина. Задать данные параметры в CSS достаточно легко, а как результат - практично. Используются для этого уже известные Вам свойства height и width. Однако, в данном уроке мы ещё поговорим о не фиксированной ширине и высоте или резиновой, то есть в зависимости от ширины самого окна. Приступим)

width

Это свойство устанавливает определённую ширину HTML элемента. Значение может быть указано в пикселях, процентах (другие величины используются реже).

.myBlock {
  width: 400px; /* ширина 400 пикселей */
  color: #f1f1f1; /* светло-серый блок */
}

Или же в процентах:

.myBlockPercent50 {
  width: 50%; /* ширина 50% от ширины блока или окна (если не внутри блока с фиксированной шириной) */
  color: #f1f1f1; /* светло-серый блок */
}

Соответственно получаем блок, который всегда будет по ширине составлять половину от родительского.

Теперь о самом интересном. У width есть такие параметры, которые указывают максимальную или минимальную ширину. Это свойства min-width и max-width соответственно. Указывать для них значения можно также и в пикселях, и в процентах, и в других величинах. Данные свойства - это основа для создания резинового и адаптивного дизайнов ().

Пример адаптивного дизайна. Посмотри, изменяя размеры окна бразура:



Демонстрация Скачать исходники

Это я, конечно, забежал вперёд. Но вы должны понимать что и зачем нужно. Да и потрогать приятный результат)

Как Вы уже поняли, с помощью этих свойств можно более гибко обращаться с элементами на странице, не искажая содержимого. Как это работает? Рассмотрим код.

.block {
  max-width: 800px;
  background-color: #f1f1f1; /* светло-серый блок */
  padding: 20px;
}

Блок с данными свойствами при ширине родителя в 200 пикселей будет принимать соответствующее значение, но если родительский блок будет больше, например, 1000 пикселей, то он уже примет свою максимальную ширину, то есть 800 пикселей. То есть он будет увеличиваться пока ширина родительского блока не будет 801 пиксель и больше. Далее блок block всегда будет иметь свою максимально разрешённую ширину в 800 пикселей.

Демонстрация Скачать исходники

height

Это свойство отвечает за высоту элемента. В качестве величины используются всё те же пригодные для CSS. Чаще всего те же проценты и пиксели.

.info {
  height: 200px; /* высота блока будет 200 пикселей */
  padding: 10px; /* повторяем про отступы внутри блока =) */
}

Что логично, у высоты можно указывать минимальные и максимальные значения высоты для элемента свойствами min-height и max-height соответственно.

.info {
  max-height: 360px; /* максимальная высота блока */
  min-height: 120px; /* минимальная высота блока */
}

Как видите, свойства можно, а зачастую и нужно использовать в паре.
Или комбинировать величины:

.content {
  height: 100%; /* высота всегда будет 100% */
  width: 760px; /* а вот ширина фиксированная 760 пикселей  */
}

Если остались вопросы, пишите в комментариях!

Спасибо за внимание! Успехов в вёрстке!)