CSS Высота и ширина
CSS height, width и max-width
CSS Свойства height и width используются для установки высоты и ширины элемента.
CSS Свойство max-width используется для установки максимальной ширины элемента.
Попробуйте сами »
CSS Настройка высоты и ширины
Свойства height и width используются для установки высоты и ширины элемента.
Свойства 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 и т.д., или в процентах (%) от содержащего блока, или установлено значение 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 Упражнения
Все CSS свойства измерения
| Свойство | Описание |
|---|---|
| height | Задает высоту элемента |
| max-height | Задает максимальную высоту элемента |
| max-width | Задает максимальную ширину элемента |
| min-height | Задает минимальную высоту элемента |
| min-width | Задает минимальную ширину элемента |
| width | Задает ширину элемента |