ZorNet.Ru — сайт для вебмастера » HTML и CSS » Высота и ширина элемента width и height в CSS

Высота и ширина элемента width и height в CSS

Высота и ширина элемента width и height в CSS
Безусловно с начало любой работы с CSS, скорее всего, здесь вероятно каждый давно прописываете height и width для элемента дизайн. Очень удобная команда CSS, которая существует. Это min-width в которой вы можете указать минимальную ширину для любого элемента. Это может быть особенно полезно для указания минимальной ширины страницы.

Но вы вероятно могли увидеть, что свойство могут изначально создавать ненужные ограничение для ваших элементов страницы. Таким образом возможно полезно узнать и использовать связанные свойства, которые используют min и также max, что идут как префиксы.

Что сказать, то, что min-width и также min-height изначально по умолчанию принимают единичные значения, точно так же, как height и widthс делают так что нет никакого различие в синтаксисе. Вы можете использовать разную единицу, которая даже будет включать пиксель, как ems, что происходит в процентном соотношении.

Эти свойства используются, чтобы сообщить браузеру визуализации элемента с минимальным размером.

Вот пример с обоими:

Код
.zornet_ru_element {
  min-height: 157px;
  min-width: 157px;
}

Элемент уровня блока с указанным выше CSS имел бы по крайней мере размеры 157 × 157 пикселей, если даже он изначально пустой. Поскольку изначально эти элементы уровня блока по умолчанию, естественно расширяются, чтобы соответствовать пространству, за исключением min-heightво, которые во многих случаях действительно имеет какой-либо анимацию эффекта.

Чтоб рассмотреть заданные эффекты min-width вы можете добавить float к элементу. Попробуйте удалить float в этом примере и вы увидите что элемент расширяется чтобы соответствовать странице.

Демонстрация:

Как min и также max-width и max-height принимайте обычные значения единицы. Здесь изначально идет с минимального размера на разнообразные элементы, что будут задаваться по максимальному размеру.

Второй пример:

Код
.zornet_ru_element_3 {
  width: 15%;
  height: 15%;
  max-height: 180px;
  max-width: 180px;
}

Здесь нужно заострить внимание, что на этот раз указанные проценты, что по умолчанию идут на ширину и безусловно высоту, но здесь изначально ограничена, как ширины, так и высота на 180 пикселей.

Ширина «15%» будет рассчитываться на основе размера изначального или еще говорят, родительского элемента, то есть 15%. Но если элемент имеет ширину 5000 px, где размер.zornet_ru_element_3 окна, не станет больше 18px, где идет максимальная ширина, что установили.

Значения минимальной и максимальной ширины и высоты должны стать регулярной частью вашего инструментария CSS.

Видео обзор по теме:


Эти свойства весьма полезны для гибкого веб дизайна, где используется в сочетании с мультимедийными запросами CSS3, max-properties могут помочь вам обеспечить, чтобы на странице не было чрезмерно широких элементов, что может сделать контент неудобным и не читаемым.
27 Декабря 2017 Просмотров: 1935 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar