CSS Height and Width - ширина и высота
Установка высоты и ширины
Свойства height и width используются для задания высоты и ширины элемента.
heightи width могут быть установлены в Auto (это по умолчанию. Означает, что обозреватель вычисляет высоту и ширину) или указывается в значениях длины, таких как px, cm и т. д., или в процентах (%), содержащихся в блоке.
Пример
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Пример
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Примечание: Свойства height и width не включают заполнение, границы или поля; они устанавливают высоту/ширину области внутри заполнения, границы и поля элемента!
Установка Макс-ширина
Свойство max-width используется для задания максимальной ширины элемента.
max-widthможет быть задано в значениях длины, таких как px, cm и т.д., или в процентах (%), содержащихся в блоке, или значение None (по умолчанию. Означает, что максимальная ширина отсутствует).
Проблема с <div> выше возникает, когда окно обозревателя меньше, чем ширина элемента (500px). Затем обозреватель добавляет горизонтальную полосу прокрутки на страницу.
Использование max-width вместо этого, в этой ситуации, улучшит обработку браузера небольших окон.
Совет: Перетащите окно браузера в меньшую ширину, чем 500px, чтобы увидеть разницу между двумя div!
Примечание: Значение свойства max-width переопределяет width.
В следующем примере показан элемент <div> с высотой 100 пикселей и максимальным шириной 500 пикселей:
Пример
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
Попробуйте примеры
Установка высоты и ширины элементов
В этом примере показано, как задать высоту и ширину различных элементов.
Установка высоты и ширины изображения с помощью процента
В этом примере показано, как задать высоту и ширину изображения, используя значение процента.
Установить минимальную ширину и максимальную ширину элемента
В этом примере демонстрируется, как задать минимальную ширину и максимальную ширину элемента, используя значение пиксела.
Установить min-высоту и максимальную высоту элемента
В этом примере показано, как задать минимальную высоту и максимальную высоту элемента, используя значение пиксела.
Все свойства измерения CSS
| Свойство | Описание |
|---|---|
| height | Задает высоту элемента |
| max-height | Задает максимальную высоту элемента |
| max-width | Задает максимальную ширину элемента |
| min-height | Задает минимальную высоту элемента |
| min-width | Задает минимальную ширину элемента |
| width | Задает ширину элемента |