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