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