САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
HTMLCSSJAVASCRIPTSQLPYTHONPHPBOOTSTRAPКАКW3.CSSJQUERYJAVAВСЕ ФОРУМУПРАЖНЕНИЯ СПРАВОЧНИКИ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Подключение CSS Комментарии CSS Цвет
Цвет RGB HEX HSL
CSS Фон
Фон цвет Фон изображение Фон повторение Фон вложеный Фон стенография
CSS Границы
Границы Ширина границ Цвет границ Стороны границ Сокращение границ Закругленные границы
CSS Отступ cнаружи
Поля Разрушить поля
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 Особенности

CSS3 Учебник

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

CSS3 Адаптивный дизайн

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

CSS Сетка

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

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

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

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

CSS height и width

❮ Назад Далее ❯

Этот элемент имеет ширину на все 100 процентов width:100%.


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

Установка высоты и ширины

Свойства height и width используются, чтобы установить высоту и ширину элемента.

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

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

Пример

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

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

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

Пример

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

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

Примечание: Свойства height и width не содержат отступы, границы и поля; они устанавливают высоту и ширину площадки внутри отступов, границ и полей для элемента!

Установка максимальной ширины

Свойство max-width используется, чтобы установить максимальную ширину элемента.

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

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

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

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

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

Примечание: Значение max-width переопределяет свойство width.

В следующем примере показан элемент <div> высота 100 пикселей и максимальная ширина 500 пикселей:

Пример

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

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

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

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

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

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

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

Проверьте себя с помощью упражнений

Упражнение:

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

<style>
h1 {
: 100px;
}
</style>
<body>
<h1>Это заголовок</h1>
<p>Это параграф</p>
<p>Это еще один параграф</p>
</body>

Все CSS свойства размеров

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