Размеры CSS (Размеры)

CSS размерные атрибуты, используемые для управления высотой и шириной элементов.

CSS размерные атрибуты

Этот CSS предоставляет несколько атрибутов, таких как width, height, max-width и max-height, которые позволяют определить размер Box (коробки). В следующем разделе будет рассмотрено, как использовать эти атрибуты для создания лучшего веб-дизайна.

Ширина (Width) и высота (Height) атрибуты

Атрибуты width и height определяют ширину и высоту области содержимого элемента. Эта ширина и высота не включают отступы, рамки или отступы. См.CSS бокс-модель 　 чтобы понять, как вычислять эффективную ширину и высоту.

Атрибуты width и height могут принимать значения длины (например, px, pt, em и т.д.), одинПроцентили ключевое слово auto. Негативные значения длины не допускаются.

div　{
　　　　width:　300px;
　　　　height: 200px;
}

Этот стиль правилаassigns фиксированную ширину 300 пикселей и высоту 200 пикселей<div>Элемент.

Атрибут max-height максимальной высоты

Атрибут max-height позволяет определить максимальную высоту содержимого коробки. Этот максимальный размер не включает ползунки, рамки или отступы.

max-height даже если установить атрибут height на большее значение, applied элемент не будет выше указанного значения. Например, если установить height на 200px и max-height на 100px, фактическая высота элемента будет 100px.

div　{
　　　　height: 200px;
　　　　max-height: 100px;
}

Атрибут max-height обычно используется вместе с атрибутом min-height, чтобы определить диапазон высоты элемента.

Атрибут min-height минимальной высоты

Атрибут min-height позволяет вам определить минимальную высоту содержимого блока. Этот минимальный размер не включает ползунки, рамки или отступы.

Элементы, на которые applies min-height, никогда не будут меньше указанной минимальной высоты. Например, если установить height на 200px и min-height на 300px, фактическая высота элемента будет 300px.

div　{
　　　　height: 200px;
　　　　min-height: 300px;
}

Свойство min-height обычно используется вместе с свойством max-height для управления диапазоном высоты элемента.

Свойство max-width максимальная ширина

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

Свойство max-width даже если установить значение width больше, элемент, применяемый к a, не будет уже, чем указанное значение. Например, если установить width на 300px и max-width на 200px, фактическая ширина элемента будет 200px.

div　{
　　　　width:　300px;
　　　　max-width:　200px;
}

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

Свойство min-width минимальная ширина

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

Элементы, на которые применяется min-width, никогда не будут уже, чем указанная минимальная ширина. Например, если установить width на 300px и min-width на 400px, фактическая ширина элемента будет 400px.

div　{
　　　　width:　300px;
　　　　min-width:　400px;
}

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