Максимальная ширина css: Свойства Min и Max width/height в CSS / Habr – CSS max-width property

Max-width, max-height, min-width, min-height — учебник CSS

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

Свойства min-width/min-height и max-width/max-height позволяют задавать минимальную и максимальную ширину/высоту соответственно. Разберем их по порядку:

  • min-width — с помощью этого свойства вы можете указать минимальную ширину элемента. Например, если вы зададите блоку стиль min-width: 50px, то ширина блока может стать больше, но она никогда не станет меньше, чем 50 пикселей. Это очень удобно, например, при создании адаптивной верстки, когда при определенных размерах экрана элемент с относительной шириной становится слишком узким. Свойство min-width позволяет предотвратить такие искажения.
  • min-height — работает аналогично предыдущему свойству, но только по отношению к высоте элемента. Безусловно, это тоже очень полезное свойство в практике, которое позволяет задать минимальную высоту элемента.
  • max-width — как вы уже догадались, это свойство позволяет задать максимально допустимую ширину элемента. Например, элемент со стилем max-width: 960px может иметь ширину меньше максимальной, но он никогда не станет больше, чем 960 пикселей. Данное свойство удобно использовать при создании адаптивной разметки, когда вам необходимо, чтобы элемент адаптировался под ширину экрана любого устройства, но при этом не слишком широко разъезжался на больших экранах.
  • max-height — работает аналогично предыдущему свойству, только по отношению к высоте. Но, как мы уже говорили ранее, лучше не играть с ограничением высоты элемента без крайней надобности.
  • auto — это значение можно использовать для отмены действия свойства.

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

div { width: 100%; min-width: 100px; max-width: 600px; }
Что с кроссбраузерностью?

Поддержка браузерами свойств max-width, max-height, min-width, min-height практически стопроцентная. Данную запись не понимает только Internet Explorer 6.


Далее в учебнике: «плавающие» элементы и свойство float.

Свойство height, width: высота и ширина элементов. Справочник CSS

css

Содержание:

Свойства HEGHT, WIDTH

Свойство Значения Пр* Нc*
height
width
ВЫСОТА (ШИРИНА), %, auto, inherit * -

Свойство Height определяет высоту содержимого элемента.

Свойство Width задаёт ширину содержимого элемента. Оба свойства не учитывают ширину рамки, полей и отступов. Однако для разных случаев браузеры определяют высоту и ширину по-своему. Например, для html5 браузер Chrome прибавляет ширину рамки и отступов к высоте и ширине элемента, а внешнее поле

Margin лежит за их пределами и не учитывается.

Область применения*: блочные и замещаемые элементы.

При переполнении области содержимого элемента, оно выступает за его границы. Чтобы подобного не происходило можно применять значение auto или использовать свойство Overflow, которое определяет, что делать с таким содержимым.

Пример:

.element { height: 90px; width: 100px; margin: 15px; padding: 15px; border: 2px solid #000;}
.element { height: auto; width: 100px; margin: 15px; padding: 15px; border: 2px solid #000;}

— в первом случае задана фиксированная высота 90px, а содержимое переполнило область содержимого элемента и вышло за его пределы;
— во втором примере, для высоты установлено значение auto, которое можно аналогично применять и для ширины:

высота и ширина элементов в css

Значения:

Используются принятые единицы CSS.

% — относительно высоты, ширины родительского элемента.
auto — устанавливает высоту, ширину согласно фактической области содержимого элемента.
inherit — наследование свойства родителя.

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

Свойство Значения Пр* Нc*
max-height
max-width
ВЫСОТА (ШИРИНА), %, none, inherit * -
min-height
min-width
ВЫСОТА (ШИРИНА), %, inherit * -

Эти свойства устанавливают максимально и минимально допустимые ширину и высоту элементов. Это может понадобиться, например, для отображения одинаковой высоты блоков с неодинаковой по объёму областью содержимого. Или ограничить максимально допустимую ширину колонки или экрана.

Область применения*: все, кроме строковых незамещаемых элементов и элементов таблиц.

Значения:

Тоже, что и у свойств Height и Width. Начальное значение для свойст Min-height и Min-width — 0.

none — свойство не работает.

Пример:

#sidebar { width: 250px;}
#main { max-width: 1024px;}

— для боковой колонки задана фиксированная ширина;
— для второй, главной, с основным контентом, установлена максимально допустимая, т.е. общая ширина сайта будет «резиновая», но максимум 1024px. Конечно, в примере не учтены возможные отступы, поля и рамки.

Содержание:

min-width | CSS | WebReference

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

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

Табл. 1. Ширина элемента
Значения свойствШирина
min-width<width<max-widthwidth
min-width>width>max-widthmin-width
min-width>width<max-widthmin-width
min-width<width  width
min-width>width  min-width
min-width>  max-widthmin-width
min-width<  max-widthmax-width

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам, кроме строчных и таблиц
АнимируетсяДа

Синтаксис ?

min-width: <размер> | <проценты>

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>min-width</title>
  <style>
   .container {
    min-width: 420px; /* Минимальная ширина контейнера */
   }
   .col1 {
    background-color: #fc0; /* Цвет фона колонки */
    padding: 5px; /* Поля вокруг текста */
    float: left; /* Обтекание по правому краю */
    width: 150px; /* Ширина левой колонки */
   }
   .col2  {
    background-color: #c0c0c0; /* Цвет фона колонки */
    padding: 5px; /* Поля вокруг текста */
    width: 250px; /* Ширина правой колонки */
    float: left; /* Обтекание по правому краю */
   }
  </style>
 </head>
 <body>
  <div>
   <div>Колонка 1</div>
   <div>Колонка 2</div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат использования min-width в браузере

Рис. 1. Результат использования min-width в браузере

Объектная модель

Объект.style.minWidth

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

CSS :: Размеры элементов

Высоту и ширину элементов можно задать при помощи ненаследуемых свойств height и width, которые в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Кроме того, свойства принимают значение auto, которое используется браузером по умолчанию и сообщает ему о том, что высоту и ширину элемента нужно устанавливать автоматически таким образом, чтобы в нем поместилось все его содержимое. Применение этих свойств к строчным элементам не будет иметь никакого эффекта. Также не будет иметь эффекта установка ширины для строк таблицы и высоты для колонок таблицы.

По умолчанию, говоря о высоте и ширине, имеются в виду размеры области содержимого элемента, которые не включают в себя внутренние отступы и границы элемента (см. рис. №1). Если же требуется, чтобы браузер, имея дело со свойствами height и width, интерпретировал их значения по другому, необходимо использовать свойство box-sizing, которое может принимать следующие значения:

  • content-box – используемое по умолчанию значение, браузер не принимает во внимание внутренние отступы и границы элемента при расчете его высоты и ширины, в результате свойства height и width задают высоту и ширину контента элемента;
  • border-box – браузер учитывает внутренние отступы и границы элемента при расчете его высоты и ширины, в результате свойства height и width задают высоту и ширину самого элемента.

Рис №1. Общая схема элемента

Также имеются возможности для указания минимально и максимально допустимых значений высоты и ширины. Для этого предназначены ненаследуемые свойства min-height и min-width, max-height и max-width (см. пример №2). Если высота (ширина) элемента будет меньше, чем значение свойства min-height (min-width), то браузер отдаст приоритет значению свойства min-height (min-width). Аналогично, если высота (ширина) элемента будет больше, чем значение свойства max-height (max-width), то браузер отдаст приоритет значению свойства max-height (max-width).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Размеры элементов</title>
	
	<style>
		.size_1{
		width: 250px;
		height: 15vh;
		background-color: yellow;
		}
		
		.size_2{
		width: 250px;
		height: 150px;
		min-width: 350px;
		max-height: 400px;
		background-color: violet;
		}
	</style>
	
</head>
<body>
	<p>
		Ширина абзаца равна 250px, высота &ndash; 15%
		от высоты области просмотра окна браузера.
	</p>
	
	<p>
		Ширина абзаца будет 350px, т.к. width меньше min-width,
		а высота &ndash; 150px, т.к height меньше max-height.
	</p>
</body>
</html>

Пример №2. Установка размеров элементов

В конце пункта отметим, что свойства min-height, min-width, max-height и max-width в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Но, в отличие от свойств определения высоты и ширины, они не принимают значение auto.

Учебник CSS для начинающих. Размеры элемента и управление его содержанием.

Глава 7

Прежде чем говорить о работе с размерами элементов их расположении, полях и отступах, расскажу немного о самих элементах, точнее об их типах.

Все элементы (теги) можно разделить на две категории: Блочные и строковые.

Чем они отличаются?

Думаю, сами названия уже говорят о различиях. Блочные или боксовые элементы - это контейнеры, прямоугольные области на мониторе компьютера которым без труда и вело-изобретательства можно присвоить определенное положение, размер, вложить в них другие блоки, определить расположение относительно друг друга. А строковые элементы располагаются в одну сроку, выравниваются по её базовой линии и как правило служат для форматирования и редакции текста.

К блочным (block) элементам относятся:
<div>, <dl>, <form>, <h2>- <h6>, <hr>, <noscript>, <ol>, <p>, <pre>, <table>, <ul>

К строчным (inline) элементам относятся:
<a>, <br>, <cite>, <code>, <em>, <img>, <input>, <label>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>

Основные отличия от элементов строкового и блочного типа заключаются в том что:

Боксовые элементы могут содержать в себе другие элементы, как блочного, так и строкового типа. Строчные же элементы могут включать в себя только строчные элементы.

На примере:

<div>
<b>Это <i>правильная строка</i> в блоке</b>
</div>

<i><b>
<div>А это неправильная толи строка толи блок. Так лучше не делать!!</div>
</b></i>

Боксовые элементы, по умолчанию, располагаются относительно друг друга вертикально, т.е. в начале и конце блока происходит "перенос строки", а строковые элементы располагаются горизонтально, перенос строки происходит только в том случае если это необходимо.

По умолчанию блочные элементы имеют ширину 100% и тем самым оставляют за собой все пространство по горизонтали, у строковых же элементов ширина определяется содержанием.

Думаю, на примере будет понятнее.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Блочные и строковые элементы</title>
</head>
<body>
<p>Параграф</p>
<p>Параграф</p>
<p>Параграф</p>
<hr>
<span>Строка</span>
<span>Строка</span>
<span>Строка</span>
<hr>
<div>Блок</div>
<div>Блок</div>
<div>Блок</div>
</body>
</html>

Свойства CSS width и height - устанавливают ширину и высоту блочных элементов. Ширина и высота элемента может быть задана следующими способами:

  • auto - Размеры элемента определяется его содержанием. (по умолчанию)
  • % - Размеры элемента задаётся в процентах от высоты/ширины элемента родителя.
  • px - Размеры элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Размеры блока</title>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</body>
</html>

Если содержание элемента превышает его указанный размер, то в некоторых браузерах элемент автоматически присвоит значение auto, а в некоторых содержание "выползет" за пределы элемента.

Что делать с содержанием элемента, если оно превышает его размер?

Если элементу присвоены точные значения высоты и ширины (height, width) а его содержание, например длинный текст, не вмещается в указанных пределах, то по умолчанию такой элемент растягивается до нужных размеров, что не всегда на руку веб-мастеру. На помощь приходит атрибут overflow, который указывает браузеру, что делать с элементом в таких случаях.

Свойство overflow может иметь следующие значения:

  • visible - Элемент растягивается до необходимых размеров. (по умолчанию)
  • hidden - Содержание элемента "обрезается" видна лишь та его часть что помещается в элементе.
  • scroll - Добавляются полосы прокрутки (всегда! даже если содержание помещается в пределах элемента).
  • auto - Полосы прокрутки добавляются при необходимости.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Содержание элемента</title>
</head>
<body>
<div>
<h4 align="center">Диктант</h4>
На дощатой террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками и другими яствами, под аккомпанемент виолончели.
</div>
</body>
</html>

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

Ниже перечисленные свойства CSS позволяют определить минимальные и максимальные размеры того или иного элемента

  • max-height - максимальная высота элемента
  • max-width - максимальная ширина элемента
  • min -height - минимальная высота элемента
  • min-width - минимальная ширина элемента

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Минимальные и максимальные размеры элемента</title>
</head>
<body>
<div>
Браузер Internet Explorer игнорирует свойства css min-width, max-width, min-height и max-height.
</div>
</body>
</html>

Как Вы уже поняли не все браузеры одинаково интерпретируют как HTML теги, так и свойства CSS. Особым "невежеством" по отношению как к пользователям так и к веб дизайнерам отличился Internet Explorer 6 и его более ранние версии.. Впрочем, и в остальных браузерах далеко не всё проходит гладко. Отсюда необходимо сделать вывод, что прежде чем выкладывать ту или иную страницу в Интернет её необходимо просмотреть (протестировать) в различных браузерах и их версий. А совет заключается собственно в том, что хорошо бы было их иметь под рукой - в установленном виде на Вашем компьютере. Соберите свою "коллекцию" браузеров.



Урок 9. Ширина и высота в CSS


Большинству элементов в HTML, как правило, присваивается определённая высота и ширина. Задать данные параметры в CSS достаточно легко, а как результат - практично. Используются для этого уже известные Вам свойства height и width. Однако, в данном уроке мы ещё поговорим о не фиксированной ширине и высоте или резиновой, то есть в зависимости от ширины самого окна. Приступим)

width


Это свойство устанавливает определённую ширину HTML элемента. Значение может быть указано в пикселях, процентах (другие величины используются реже).
.myBlock {
  width: 400px; /* ширина 400 пикселей */
  color: #f1f1f1; /* светло-серый блок */
}

Или же в процентах:
.myBlockPercent50 {
  width: 50%; /* ширина 50% от ширины блока или окна (если не внутри блока с фиксированной шириной) */
  color: #f1f1f1; /* светло-серый блок */
}

Соответственно получаем блок, который всегда будет по ширине составлять половину от родительского.

Теперь о самом интересном. У width есть такие параметры, которые указывают максимальную или минимальную ширину. Это свойства min-width и max-width соответственно. Указывать для них значения можно также и в пикселях, и в процентах, и в других величинах. Данные свойства - это основа для создания резинового и адаптивного дизайнов ().

Пример адаптивного дизайна. Посмотри, изменяя размеры окна бразура:

Демонстрация Скачать исходники

Это я, конечно, забежал вперёд. Но вы должны понимать что и зачем нужно. Да и потрогать приятный результат)

Как Вы уже поняли, с помощью этих свойств можно более гибко обращаться с элементами на странице, не искажая содержимого. Как это работает? Рассмотрим код.

.block {
  max-width: 800px;
  background-color: #f1f1f1; /* светло-серый блок */
  padding: 20px;
}

Блок с данными свойствами при ширине родителя в 200 пикселей будет принимать соответствующее значение, но если родительский блок будет больше, например, 1000 пикселей, то он уже примет свою максимальную ширину, то есть 800 пикселей. То есть он будет увеличиваться пока ширина родительского блока не будет 801 пиксель и больше. Далее блок block всегда будет иметь свою максимально разрешённую ширину в 800 пикселей.Демонстрация Скачать исходники

height


Это свойство отвечает за высоту элемента. В качестве величины используются всё те же пригодные для CSS. Чаще всего те же проценты и пиксели.
.info {
  height: 200px; /* высота блока будет 200 пикселей */
  padding: 10px; /* повторяем про отступы внутри блока =) */
}

Что логично, у высоты можно указывать минимальные и максимальные значения высоты для элемента свойствами min-height и max-height соответственно.
.info {
  max-height: 360px; /* максимальная высота блока */
  min-height: 120px; /* минимальная высота блока */
}

Как видите, свойства можно, а зачастую и нужно использовать в паре.
Или комбинировать величины:
.content {
  height: 100%; /* высота всегда будет 100% */
  width: 760px; /* а вот ширина фиксированная 760 пикселей  */
}

Если остались вопросы, пишите в комментариях!

Спасибо за внимание! Успехов в вёрстке!)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *