Свойства CSS Размер
Свойства измерения CSS позволяют контролировать высоту и ширину элемента.
Этот элемент имеет ширину 100%.
Настройка высоты и ширины
На height и width свойства используются для установки высоты и ширины элемента.
height и width может быть установлен в автоматический режим (это по умолчанию. Означает , что браузер вычисляет ширину и высоту), или быть указаны в значениях длины, как и px, cm , и т.д., или в процентах (%) от содержащего блока ,
Примечание: height и width свойства не включают в себя отступы, рамки или поля; они задают высоту / ширину зоны внутри отступа, границы и край элемента!
Следующий пример показывает <div> элемент с высотой 100 пикселей и шириной 500 пикселей:
Установка макс ширины
max-width свойство используется для установки максимальной ширины элемента.
max-width может быть указана в значениях длины, как и px, cm и т.д., или в процентах (%) , содержащего блока, либо не определены (это по умолчанию. Значит , что нет максимальной ширины).
Проблема с <div> выше имеет место , когда окно браузера меньше , чем ширина элемента (500px). Браузер затем добавляет горизонтальную полосу прокрутки на страницу.
Используя max-width вместо этого, в этой ситуации, улучшит управляемость браузера маленьких окон.
Совет: Перетащите окно браузера меньше 500px в ширину, чтобы увидеть разницу между двумя дивы!
Примечание: значение max-width Переопределение свойств width .
Следующий пример показывает <div> элемент с высотой 100 пикселей и максимальной ширине 500 пикселей:
Попробуйте сами - Примеры
Установите ширину и высоту элементов
Этот пример показывает, как установить ширину и высоту различных элементов.
Установите высоту и ширину изображения с использованием процентов
Этот пример показывает, как установить высоту и ширину изображения, используя процентное значение.
Установка мин-макс ширина и ширину элемента
Этот пример показывает, как установить минимальную ширину и максимальную ширину элемента, используя значение пикселя.
Установить мин-высота и максимальная высота элемента
Этот пример показывает, как установить минимальную высоту и максимальную высоту элемента, используя значение пикселя.
Проверьте себя с упражнениями!
Все свойства CSS Размер
| Имущество | Описание |
|---|---|
| height | Устанавливает высоту элемента |
| max-height | Устанавливает максимальную высоту элемента |
| max-width | Устанавливает максимальную ширину элемента |
| min-height | Устанавливает минимальную высоту элемента |
| min-width | Устанавливает минимальную ширину элемента |
| width | Устанавливает ширину элемента |