Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Подключение CSS Комментарии CSS Цвет CSS Фон CSS Границы CSS Поля CSS Отступы внутри CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиционирование CSS Перекрытие CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдоклассы CSS Псевдоэлементы CSS Прозрачность CSS Навигация сайта CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Атрибут селектора CSS Формы CSS Счетчики CSS Макет сайта CSS Единицы измерений CSS Особенности CSS !important CSS Математ. функции

CSS3 Учебник

CSS3 Закругленные углы CSS3 Изображен. граница CSS3 Слои фона изображ. CSS3 Цвета CSS Ключевые сл. цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D Трансформация CSS3 3D Трансформация CSS3 Переход CSS3 Анимация CSS3 Всплыв. подсказки CSS3 Стиль изображения CSS3 Отраж. изображения CSS3 Объект-подгонка CSS3 Объект-позиция CSS3 Маскировка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Размеры боксов CSS3 Медиа запросы CSS3 Медиа примеры CSS3 Флексбокс

CSS Адаптивный

АВД-Введение АВД-Область просмотра АВД-Вид сетка АВД-Медиа запросы АВД-Изображения АВД-Видео АВД-Фреймворк АВД-Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры кода CSS Онлайн редактор CSS Фрагменты кода CSS Тест-викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы CSS Поддержка

CSS Высота и ширина



CSS свойства height, width и max-width

CSS свойства height и width используются для установки высоты и ширины элемента.

CSS свойство max-width используется для установки максимальной ширины элемента.


Этот элемент имеет высоту 50 пикселей и ширину 100%.

Попробуйте сами »

CSS настройка height и width

CSS свойства height и width используются для установки высоты и ширины элемента.

CSS свойства height и width не включают отступы, границы или поля. Он задает высоту/ширину области внутри отступа, границы и поля элемента.


CSS значения height и width

CSS свойства height и width могут иметь следующие значения:

  • auto - Это значение по умолчанию. Браузер вычисляет высоту и ширину
  • length - Определяет высоту/ширину в пикселях, см и т.д.
  • % - Определяет высоту/ширину в процентах от содержащего блока
  • initial - Устанавливает высоту/ширину на значение по умолчанию
  • inherit - Высота/ширина будут унаследованы от его родительского значения

CSS примеры height и width

Этот элемент имеет высоту 200 пикселей и ширину 50%
Пример

Установите высоту и ширину элемента <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Попробуйте сами »

Этот элемент имеет высоту 100 пикселей и ширину 500 пикселей.
Пример

Установите высоту и ширину другого элемента <div>:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Попробуйте сами »

Примечание: Помните, что свойства height и width не включают отступы, границы или отступы на полях! Они задают высоту/ширину области внутри отступа, границы и поля элемента!



CSS свойство max-width

CSS свойство max-width используется для установки максимальной ширины элемента.

CSS свойство max-width может быть задано в значениях длины, таких как px, cm и т.д., или в процентах (%) от содержащего блока, или установлено значение none (это значение по умолчанию. Означает, что максимальная ширина отсутствует).

Проблема с <div> выше возникает, когда окно браузера меньше ширины элемента (500 пикселей). Затем браузер добавляет на страницу горизонтальную полосу прокрутки.

Использование max-width вместо этого в этой ситуации улучшит работу браузера с маленькими окнами.

Совет: Перетащите окно браузера шириной менее 500 пикселей, чтобы увидеть разницу между двумя разделами!

Элемент имеет высоту 100 пикселей и максимальную ширину 500 пикселей.

Примечание: Если вы по какой-то причине используете оба свойства width и свойство max-width одного и того же элемента и значение, свойство width больше, чем свойство max-width; свойство max-width будет использоваться (а свойство width будет проигнорировано).

Пример

Элемент <div> имеет высоту 100 пикселей и максимальную ширину 500 пикселей:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Попробуйте сами »


Еще примеры height и width

Установите высоту и ширину элементов
Этот пример демонстрирует, как задать высоту и ширину различных элементов.

Установите высоту и ширину изображения, используя процент
В этом примере показано, как задать высоту и ширину изображения, используя процентное значение.

Установите минимальную ширину и максимальную ширину элемента
Этот пример демонстрирует, как задать минимальную ширину и максимальную ширину элемента, используя значение в пикселях.

Установите минимальную и максимальную высоту элемента
Этот пример демонстрирует, как установить минимальную высоту и максимальную высоту элемента, используя значение в пикселях.


Практика: height и width

Упражнение: height и width

Установите высоту элемента <h1> равным "100px".

<style>
h1 {
  : 100px;
}
</style>

<body>
  <h1>Это заголовок</h1>
  <p>Это параграф</p>
  <p>Это параграф</p>
</body>


Все CSS свойства height и width

Свойство Описание
height Задает высоту элемента
max-height Задает максимальную высоту элемента
max-width Задает максимальную ширину элемента
min-height Задает минимальную высоту элемента
min-width Задает минимальную ширину элемента
width Задает ширину элемента