CSS - Высота блока относительно его ширины. Параметры css width и height для задания размеров элементов html страницы Переопределение ширины блока

Свойства css width отвечает за значение ширины области с содержимым элемента.

Width: значение | проценты | auto | inherit

Свойства css height отвечает за значение высоты области с содержимым элемента.

Height: значение | проценты | auto | inherit

Отрицательные значения высоты и ширины указывать не допускается.

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

Задав какому-нибудь элементу на веб-странице ширину с помощью свойства width 500px это не будет означать, что общая ширина этого элемента будет 500 пикселей и не более.

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

Свойства width и height - это всего-лишь одни из составляющих из которых будет вычисляться общая ширина и высота элемента. Они указывают ширину и высоту области Content, которую можно видеть на следующем изображении. Также в формировании общей ширины и высоты участвуют такие свойства как padding, margin и border.

В этом можно легко сейчас убедиться.

Давайте, для примера, возьмем два блока с одинаковой шириной width, но одному из них зададим дополнительно свойство padding.

По умолчанию, веб-страницы имеют поведение, что к значению высоты и ширины добавляется значение padding для соответствующей стороны.

Т.е. общая ширина элемента будет состоять из значения свойства width элемента и к нею будет плюсоваться значение padding-left и padding-right.

Для разных типов элементов, которые можно встретить на странице общая ширина и высота элементов считается по специальным формулам.

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

Аналогичная ситуация будет со свойством height.

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

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

Описание

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег ). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

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

Синтаксис

height: значение | проценты | auto | inherit

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Рис. 1. Применение свойства height

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

document.getElementById("elementID ").style.height

Браузеры

Браузер Internet Explorer 6 некорректно определяет height как min-height .

В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

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

width

Это свойство устанавливает определённую ширину HTML элемента. Значение может быть указано в пикселях, процентах (другие величины используются реже).

MyBlock {
width: 400px; /* ширина 400 пикселей */

}
Или же в процентах:

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 пикселей */
}
Если остались вопросы, пишите в комментариях!

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

Height: 100%

Пожалуй, начнем с того, что попроще. Когда использовать height: 100% ? На самом же деле, вопрос часто звучит немного по-другому: «Как мне сделать так, чтобы моя страница заняла всю высоту экрана?». Ведь правда?

Для ответа на него нужно понять, что height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна». Так что, если вы захотите, чтобы ваш элемент занял все 100% от высоты окна, то установить height: 100% будет недостаточно.

Почему? А потому, что родителем вашего контейнера является элемент body, а у него свойство height установлено в auto по умолчанию; а значит - его высота равна высоте контента. Конечно, вы можете попробовать добавить height: 100% к body, но этого тоже будет недостаточно.

Почему? А все потому же, родителем элемента body является элемент html, у которого также свойство height равно auto и он также растягивается под размер контента. А вот теперь, если добавить height: 100% и к элементу html, то все заработает.

Стало понятнее? Корневой элемент html на самом деле не самый верхней уровень на странице - им является «viewport». Для простоты, будем считать, что это окно браузера. Так вот, если установить height: 100% элементу html, то это то же самое, что сказать - стань такой же высоты, как окно браузера.

Суммируем полученную информацию в небольшом кусочке кода:

Html, body, .container { height: 100%; }
Готово. Если вам интересно углубится в тему, как устроен viewport, я настоятельно рекомендую .

А что если у родительского элемента установлено свойство min-height, а не height?

Недавно, Роджер Йохансен (Roger Johansson) описал проблему с height: 100% , проявляющуюся, когда у родительского элемента не установлен height, но указан min-height. Я не хочу углубляться в сказанное в статье, а перейду сразу к выводам. Вам необходимо установить height: 1px для родителя, чтобы дочерний элемент смог занять всю высоту указанную в min-height.

Parent { min-height: 300px; height: 1px; /* Required to make the child 100% of the min-height */ } .child { height: 100%; }
Пример на jsFiddle .

Более подробно, с этим вопросом, вы можете ознакомится в статье Роджера Йохансена (Roger Johansson) .

Width: 100%

Теперь давайте разберемся с width: 100% . Для начала, небольшое уточнение: устанавливая свойство width: 100% , мы хотим, чтобы наш элемент занял всю ширину родительского элемента. Все стандартно.

Позвольте открыть вам небольшой секрет. width, для этого свойства - не очень подходящие название. Свойство width - это не абсолютный размер элемента, а размер содержимого элемента и это огромная разница.

Если добавить padding и/или border к элементу с width: 100% , то он перестанет помещаться в родительский элемент. Потому что появились padding и border и вот почему width должен был называться content-width. А теперь, пожалуйста, посмотрите на пример демонстрирующий вышесказанное.

Допустим, ширина родителя 25em, а дочернего элемента - 100% (от ширины родителя) и он также имеет padding равный 1em (1em справа и1emслева, всумме2em по горизонтали) и border размером в 0.5em (0.5 em справа и 0.5 emслева, всумме1em по горизонтали), что в итоге нам дает 25em (100%) + 2em + 1em = 28em.

Есть 4 возможных пути решения этой проблемы. Первый и, наверное, лучший способ - избегать свойства width: 100% , тем более что в данном случае оно абсолютно бесполезно. Если дочерний элемент блочный, то он и так займет всю ширину родителя автоматически (без проблем с padding`ами и border`ами). Но если мы работаем с inline-block элементом, то нам не удастся так просто решить эту проблему.

Мы можем заменить width: 100% на статичный размер. В нашем случае 25 - (2 + 1) = 22em. Само собой - это плохое решение, потому что нам нужно вычислять ширину вручную. Пойдем другим путем!

Третий способ - использовать calc() для расчета ширины: width: calc(100% - 3em) . Но оно тоже не подходит. Во-первых, нам все еще нужно вычислять размеры padding + border. Во-вторых, calc() плохо поддерживается браузерами (не работает в IE 8, Safari 5, Opera 12, родном браузере Android).

Идея номер четыре - использовать свойство box-sizing: border-box . Оно изменяет алгоритм расчета ширины и высоты элемента так, чтобы в них учитывались свойства padding и border. Отличная новость, заключается в том, что у box-sizing хорошая поддержка браузерами (IE8+, Opera 7+). А для всех остальных браузеров можно использовать polyfill .

Вывод: не используйте width: 100% без box-sizing: border-box .

Как не облажаться с z-index.

Все элементы на страницы позиционируются в трех плоскостях: кроме вертикальной и горизонтальной оси, существует дополнительная ось Z (глубина). Поначалу все выглядит очень просто - элементы с большим z-index находятся выше элементов с меньшим z-index. К несчастью, все гораздо сложнее. Я уверен, что z-index самое сложное css свойство за всю его историю. А также уверен, что проблемы связанные с z-index встречаются чаще других при работе с css. Надеюсь, что мы просветим возможные пути их решения.

Для начала. Свойство z-index не имеет эффекта на статических элементах. Чтобы иметь возможность перемещать элемент по оси Z, нам нужно изменить его позиционирование на relative, absolute или fixed.

Важно понимать в z-index то, что не все элементы в DOM дереве размещены на одном уровне. Это значит, что изменение z-index у элемента до очень большого значения, не гарантирует того, что он будет помещен на передний план. Это называется контекстом наложения.

Простыми словами, контекст наложения является, своего рода, группой на основе одного html элемента, у которого все дочерние элементы получают ту же позицию в контексте и такой же z-index. Изменения z-index у элемента может привести к перекрыванию им других элементов, так как вам необходимо. Вот как располагаются элементы в одном контексте наложения (снизу вверх):

1. Фон и границы элемента, формирующего контекст
2. Дочерние контексты наложения с негативным z-index (самый маленький первый)
3. Не позиционированные элементы
4. Позиционированные элементы со значением z-index равным auto или 0
5. Позиционированные элементы с положительным z-index (каждый следующий по порядку расположен выше предыдущего, при равенстве z-index)

Когда ситуация становится неприятной

Итак, мы рассмотрели основы z-index понимание которых сэкономит вам кучу времени, уж поверьте. К сожалению, их недостаточно. Тогда все было бы слишком просто.

Дело в том, что каждый контекст наложения имеет свою ось Z. Например, элемент A в контексте 1 и элемент B в контексте 2 не могут взаимодействовать через z-index. Это значит, что элемент A, как часть контекста наложения находящегося в самом низу общего контекста наложения, никогда не сможет перекрыть элемент B другого контекста, находящегося выше уровнем, даже с очень большим значением z-index.

Но, что еще хуже. Элемент html создает корневой контекст наложения. Затем, каждый не статично-спозиционированный элемент со свойством z-index не равным auto, также создает свой контекст наложения. Ничего нового. Но вот где все начинает рушиться: некоторые, никак не связанные с контекстом наложения css свойства, также создают новые контексты. Например, свойство opacity.

Все верно, свойство opacity создает новый контекст наложения. То же самое делают свойства transform и perspective. Хотя это не имеет никакого смысла, не так ли? Например, если у вас есть какой-нибудь элемент с opacity меньше 1 или с любой трансформацией, у вас потенциально может возникнуть проблема.

К сожалению, каждая проблема с z-index имеет свой контекст (не каламбур) делающий невозможным универсальное решение.

Давайте подведем краткий итог вышесказанного:

• Перед применением z-index убедитесь, что установили свойство position не равным static
• Не используйте более 5 цифр для значения z-index, это абсолютно бессмысленно; в большинстве случаев, значение z-index в районе 10, будет более чем достаточно
• Убедитесь, что элемент, который вы хотите перекрыть находится в том же контексте наложения.
• Если у вас все еще что-то работает не так, как должно, убедитесь в отсутствии трансформаций и opacity выше у родительских элементов.

В тему, я так же рекомендую к прочтению What No One Told You About Z-index от Филипа Волтона (Philip Walton) и официальную спецификацию css .

Борьба со схлопыванием отступов

Как мне кажется - это один из глюков css, который крадет наибольшее количество времени, чтобы разобраться в чем же дело. Можно сказать, что он чем-то похож на баг с z-index. Как бы то ни было, схлопывание отступов - это когда верхний и нижний отступ двух элементов схлопываются в один (самый большой из двух).

К счастью, как правило, такое поведение и ожидается. Возможно, поэтому оно так и работает (так указано в спецификации css). Однако, иногда вы не хотите, чтобы вертикальные отступы схлопнулись. Чтобы понять как этого избежать, мы для начала посмотрим, почему так происходит. Схлопывание отступов может произойти в трех разных случаях.

Соседние элементы

Когда два соседних элемента имеют вертикальные отступы - они схлопываются до самого большого из них. Есть несколько способов предотвратить схлопывание:

• clear: left; float: left; (right то же работает)
• display: inline-block;

Пример на jsFiddle иллюстрирует работу фиксов.

Родитель и первый/последний дочерний элемент

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

• overflow: hidden (или любой другой, но не visible)
• padding: 1px (или другое значение больше 0)
• border: 1px solid transparent (или любой другой border)
• float: left (right то же работает)

Пример на jsFiddle иллюстрирует работу фиксов.

Пустые блоки

Когда пустой блок не имеет границ, padding`ов, высоты, его верхние и нижние отступы схлопываются в один. Так или иначе, использовать пустые блоки плохая практика, так что такое встречается не часто.
за авторством Robert Nyman

Browserhacks за авторством Tim Pietrusky и меня

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

Последнее обновление: 21.04.2016

Размеры элементов задаются с помощью свойств width (ширина) и height (высота).

Значение по умолчанию для этих свойств - auto , то есть браузер сам определяет ширину и высоту элемента. Можно также явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:

Width: 150px; width: 75%; height: 15em;

Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если размер шрифта элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям. То есть если у элемента установить ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей. Если же у элемента не определен размер шрифта, то он будет взят из унаследованных параметров или значений по умолчанию.

Процентные значения для свойства width вычисляются на основании ширины элемента-контейнера. Если, к примеру, ширина элемента body на веб-странице составляет 1000 пикселей, а вложенный в него элемент