Высота и ширина элемента в CSS, использование префиксов min и max

height-и-width

При работе с каскадными таблицами стилей css, одними из наиболее часто используемых свойств являются свойства height (высота) и width (ширина). Они применяются к блочным элементам. Высота и ширина не включают толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента. Это добавит к элементу полосу прокрутки.


В качестве значений свойств height и width принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt), проценты (%) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если размеры родительского элемента явно не указаны, то в его качестве выступает окно браузера.

Даже если вы только начали работать с CSS, очень может быть, что вам уже довелось использовать свойства height и width. Однако вы могли заметить, что данные свойства могут накладывать лишние ограничения на элементы страницы. Поэтому полезно знать и применять связанные свойства, использующие префиксы «min» и «max».

min-width / min-height

Свойства min-width и min-height принимают значения единиц измерения таким же образом, что и свойства height и width, таким образом нет разницы в синтаксисе. Можно использовать любые приемлемые единицы измерения, включая пиксели, единицы em и проценты.

Данные свойства указывают браузеру как отображать элемент при минимальном размере. Вот пример использования обоих свойств:

.element {
     min-height: 200px;
     min-width: 200px;}

Блочный элемент с таким кодом будет иметь минимальные размеры 200 на 200 пикселей даже если элемент пустой. Однако, поскольку блочный элемент будет по умолчанию занимать всю доступную ширину, только значение min-height в реальности будет иметь значение.

Чтобы увидеть эффект от min-width можно для данного элемента добавить свойство float.

max-width / max-height

Так же, как и в случае с префиксом «min», свойства max-width и max-height имеют обычные единицы измерения. Но на этот раз вместо минимального размера элемента, данные свойства задают максимальный размер. Еще один пример:

.element {
     width: 15%;
     height: 15%;
     max-height: 200px;
     max-width: 200px;}

Обратите внимание, что сейчас я указал процентные значения для ширины и высоты, но ограничил максимальные ширину и высоту 200 пикселями. Ширина в 15% рассчитывается исходя из размера родительского элемента. Но даже если родительский элемент равен 5000 пикселей в ширину, блок с селектором класса .element будет не шире 200 пикселей, что и является заданной максимальной шириной.

Вывод

Вам придется очень часто использовать минимальную/максимальную ширину и высоту в своем коде CSS. Поэтому нужно хорошенько разобраться в тонкостях их применения. Хотя тут нет ничего сложного, но у неопытного пользователя часто возникают некоторые трудности при их использовании. Если у вас возникнут какие-либо затруднения — напишите о них в комментариях. Я постараюсь Вам помочь.

Также не забудьте подписаться на обновления сайта.

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.