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

составляет 1000 * 0.75 = 750 пикселей. Если пользователь изменит размер окна браузера, то ширина элемента body и соответственно ширина вложенного в него блока div тоже изменится.

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

Например:

В то же время фактические размеры элемента могут в итоге отличаться от тех, которые установлены в свойствах width и height . Например:

Как видно на скриншоте, в реальности значение свойства width - 200px - определяет только ширину внутреннего содержимого элемента, а под блок самого элемента будет выделяться пространство, ширина которого равна ширине внутреннего содержимого (свойство width) + внутренние отступы (свойство padding) + ширина границы (свойство border-width) + внешние отступы (свойство margin). То есть элемент будет иметь ширину в 230 пикселей, а ширина блока элемента с учетом внешних отступов составит 250 пикселей.

Подобные расчеты следует учитывать при определении размеров элементов.

С помощью дополнительного набора свойств можно установить минимальные и максимальные размеры:

min-width : минимальная ширина

max-width : максимальная ширина

min-height : минимальная высота

max-height : максимальная высота

min-width: 200px; width:50%; max-width: 300px;

В данном случае ширина элемента равна 50% ширины элемента-контейнера, однако при этом не может быть меньше 200 пикселей и больше 300 пикселей.

Переопределение ширины блока

Свойство box-sizing позволяет переопределить установленные размеры элементов. Оно может принимать одно из следующих значений:

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

padding-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы как часть своего значения. Например, пусть у нас есть следующий стиль:

Width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: padding-box;

Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) - 10px (padding-left) - 10px (padding-right) = 180px.

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

border-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы и границы как часть своего значения. Например, пусть у нас есть следующий стиль:

Width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: border-box;

Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) - 10px (padding-left) - 10px (padding-right) - 5px (border-left-width) - 5px (border-right-width) = 170px.

Например, определим два блока, которые отличаются только значением свойства box-sizing:

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

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

Особенности вычисления ширины и высоты

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

В качестве значения ширины можно использовать и единицу em , которая является примерно тем же, чем и размер шрифта текста, но только в условных единицах. К примеру, вы установили размер для шрифта 24px . Тогда 1em для этого элемента будет равен 24 пикселам, а если вы зададите width: 2em , то ширина составит 2×24px = 48 пикселов . Если размер шрифта не задан, он будет унаследован.

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

Процентная ширина и высота дочернего элемента вычисляются на основании размеров родителя

Что входит в ширину и высоту

Сразу стоит запомнить, что у свойств width и height есть особенность - они не включают в себя значения margin , padding и border . Значение, которое вы установите для width/height, будет означать лишь ширину/высоту области содержимого элемента.

Таким образом, для того чтобы вычислить, например, фактическую ширину элемента (место, которое он в действительности займет на экране), понадобится немного арифметики. Фактическая ширина - это сумма значений, таких как width , padding , border и margin . Напомним, что ранее мы рассматривали, как выглядит блочная модель CSS .

Для закрепления знаний покажем пример. Допустим, у вас есть элемент с таким стилем:

Width: 200px; margin-left: 15px; margin-right: 15px; padding-left: 10px; border-left: 3px solid #333;

Для подсчета фактической ширины элемента выполним сложение:

width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (фактическая ширина)

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

Вместо фиксированной высоты использовать height: auto - эта запись означает, что высота объекта будет рассчитываться автоматически, в зависимости от содержимого, которое он содержит.

Другой способ избежать развала верстки - использовать запись overflow: auto . В таком случае, если высота содержимого будет превышать значение height своего контейнера, браузер добавит к контейнеру полосу прокрутки.

В следующем уроке вы узнаете, как можно переопределять ширину элемента с помощью интересного и очень полезного свойства

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 и меня

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

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

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

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

Для данного абзаца зададим только ширину и высоту.

Этот абзац содержит, кроме ширины и высоты, внутренний отступ, рамку и внешний отступ.

Попробовать »

В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца - 150x100 пикселей, а размеры второго абзаца:

Общая высота:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	верхняя рамка		верхний отступ		высота		нижний отступ		нижняя рамка

то есть 180x130 пикселей.

Переполнение элементов

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

• visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.
• scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали.
• auto - добавляет полосы прокрутки при необходимости.
• hidden - скрывает часть содержимого, которое выходит за границы блочного элемента.