Css какое свойство определяет минимальную ширину элемента
Перевод «Min and Max Width/Height in CSS» Ахмада Шадида.
Порой у разработчиков возникает необходимость ограничить ширину элемента относительно родителя, и в то же время, оставить её динамичной. Задав таким образом начальный размер с возможностью расширения при наличии доступного пространства. Например, нам нужна кнопка, которая должна иметь минимальную ширину. Именно в таких ситуациях удобно использовать свойства максимума и минимума.
В этой статье мы познакомимся с CSS-свойствами максимума и минимума для ширины и высоты, а также детально рассмотрим каждое из них и сценарии их использования.
Свойства ширины
Начать обсуждение хотелось бы со свойств, связанных с шириной. У нас есть min-width и max-width, и каждое из них крайне важно и полезно в определённых ситуациях.
Минимальная ширина (min-width)
Своство min-width предназначено для предотвращения уменьшения ширины элемента ниже заданного значения. Значением по умолчанию является auto, которое может доходить до 0.
Чтобы продемонстрировать его, давайте рассмотрим базовый пример:
Есть кнопка с текстом, размер которого может меняться от одного до нескольких слов. Чтобы быть уверенным, что эта кнопка будет иметь минимально допустимую ширину, даже если внутри будет только одно слово, нужно использовать min-width. Минимальную ширину задали равной 100px, поэтому даже если у кнопки будет очень короткое содержимое, как, например, только слово «Done» или только иконка, она всё равно будет достаточно большой, чтобы оставаться заметной. Это особенно важно, когда вы работаете с сайтами, переведёнными на разные языки
Рассмотрим пример с арабским языком в Twitter:
В примере выше кнопка содержит слово “تم”, что на арабском значит «Готово». Из-за короткого содержимого ширина и самой кнопки стала слишком мала, поэтому я обозначил минимум, задав ей свойство min-width, что можно увидеть на изображении справа (в секции «After»).
Минимальная ширина и Padding
Хотя свойство min-width и допускает увеличение ширины кнопки при увеличении размера её содержимого, по бокам всё же следует задавать padding, чтобы гарантировать внутренний отступ от её границ. Разница приведена на рисунке ниже
Максимальная ширина (max-width)
Свойство max-width предназначено для предотвращения увеличения ширины элемента выше заданного значения. Значение по умолчанию – none.
Распространённый и простой пример использования max-width заключается в его применении к изображениям. Рассмотрим пример ниже:
Если к изображению применить свойство max-width: 100% оно останется в границах родительского элемента, даже при том, что его изначальный размер больше. Если же изображение изначально меньше родителя, данное свойство никак на него не повлияет.
Использование min-width и max-width
Если к элементу применяются оба свойства, какое из них переопределит значение другого? Другими словами, у какого свойства приоритет выше?
Если значение min-width больше, чем max-width, оно будет принято за ширину элемента. Рассмотрим следующий пример:
HTML
<div class=»wrapper»>
<div class=»sub»></div>
</div>
CSS
.sub {
width: 100px;
min-width: 50%;
max-width: 100%;
}
Исходное значение width равно 100px и в дополнение к этому заданы значения свойств min-width и max-width. В результате ширина данного элемента не будет превышать 50% ширины родительского блока
Свойства высоты
В дополнение к свойствам минимальной и максимальной ширины, есть такие же свойства для высоты
Минимальная высота (min-height)
Свойство min-height предназначено для предотвращения уменьшения высоты элемента ниже заданного значения. Значением по умолчанию является auto, которое может доходить до 0.
Чтобы продемонстрировать его, давайте рассмотрим простой пример.
У нас есть секция с текстовым содержимым. Необходимо, чтобы она смотрелась красиво как с большим, так и с малым количеством текста
CSS
.sub {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
min-height: 100px;
color: #fff;
background: #3c78dB;
}
Минимальная высота задана 100px, а содержимое центрировано с помощью flexbox по горизонтали и вертикали. Что произойдёт, если содержимого станет больше? Например, будет целый абзац
Да, вы уже догадались. Высота секции увеличится, чтобы вместить больше содержимого. С помощью этого мы может создавать гибкие компоненты, реагирующие на количество содержимого
Максимальная высота (max-height)
Свойство max-height предназначено для предотвращения увеличения высоты элемента больше заданного значения. Значением по умолчанию является none.
На следующем примере я задал max-height для содержимого. Но так как оно больше указанной области, происходит переполнение и текст выходит за границы родительского элемента
Примеры использования свойств
Рассмотрим некоторые распространённые и редкие сценарии использования свойств min-width, min-height, max-width, и max-height
Список тегов
В списке тегов рекомендуется указывать минимальную ширину каждого тега, чтобы не страдал их внешний вид в случае короткого содержимого.
Обладая такой гибкостью, тег будет хорошо выглядеть независимо от того, насколько коротким является его содержимое. Но что случится, если автор задал очень большое имя тега, а используемая им CMS (content management system) не имеет ограничений по количеству символов в теге? В этой ситуации также можно использовать max-width
CSS
.c-tag {
display: inline-block;
min-width: 100px;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*Other styles*/
}
С помощью max-width можно ограничить максимальную ширину определённым значением. Однако, недостаточно применения только этого свойства. Содержимое, превышающее максимальную ширину, должно быть усечено.
https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
Кнопки
Существуют разные сценарии использования свойств минимума и максимума для кнопок, поскольку и самих вариантов компонентов кнопок также немало. Рассмотрим следующий макет:
Обратите внимание, что ширина кнопки «Get» слишком мала. Если по какой-то причине у кнопки еще и не будет текста (а только иконка), всё может стать еще хуже. В этом случае установка минимальной ширины очень важна
Обнуление минимальной ширины для Flexbox
Значение по умолчанию у свойства min-width равняется auto, что вычисляется как ноль. Когда элемент является flex-элементом, значение min-width не становится нулём. Минимальный размер flex-элемента равняется размеру его содержимого.
Согласно CSSWG:
По умолчанию, flex-элементы не становятся меньше минимального размера, необходимого их содержимому (длина самого длинного слова или элемента с фиксированным размером). Чтобы изменить это, задайте свойство min-width или min-height.
Рассмотрим следующий пример:
Имя пользователя содержит очень длинное слово, которое вызывает переполнение и горизонтальную прокрутку. Хотя я и добавил представленный ниже CSS для усечения содержимого:
CSS
.c-person__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Поскольку заголовок является флекс-элементом, решение состоит в том, чтобы сбросить значение min-width и заставить его стать нулём
CSS
.c-person__name {
/*Other styles*/
min-width: 0;
}
Вот как это должно выглядеть после исправления:
Из описания в CSSWG следует, что установка свойства overflow в значение, отличное от visible, может привести к тому, что значение min-width будет вычислено как ноль, что также решает нашу проблему без необходимости явно задавать min-width: 0.
Обнуление минимальной высоты для Flexbox
Хотя это менее распространённая проблема по сравнению с min-width, она всё же может встретиться. Проблема связана с flex-элементами, которые не могут быть короче своего содержимого. В результате значение min-height устанавливается равным размеру контента.
Рассмотрим следующий пример:
Текст, окрашенный в красный цвет, должен быть обрезан границами контейнера. Но поскольку данный элемент является flex-элементом, его min-height равняется высоте содержимого. Чтобы предотвратить это, мы должны сбросить значение минимальной высоты. Давайте посмотрим на HTML и CSS код:
HTML
<div class=»c-panel»>
<h2 class=»c-panel__title»><!— Title —></h2>
<div class=»c-panel__body»>
<div class=»c-panel__content»><!— Content —></div>
</div>
</div>
CSS
.c-panel {
display: flex;
flex-direction: column;
height: 180px;
}
.c-panel__body {
min-height: 0;
}
.c-panel__content {
overflow-y: scroll;
height: 100%;
}
Добавление элементу min-height: 0 сбросит значение свойства и оно начнёт работать так, как ожидается
Демо
Одновременное использование min-width и max-width
Порой бывают ситуации, когда у нас есть элемент с минимальной шириной, но в то же время, максимальная ширина не задана. Это может привести к тому, что элемент станет слишком широким, хотя такое поведение не задумывалось. Рассмотрим следующий пример:
Поскольку ширина определена в пикселях, нет уверенности, что описанное выше будет работать для мобильных. Чтобы решить эту проблему, мы можем использовать проценты вместо пикселей для свойств минимума и максимума. Рассмотрим пример ниже:
Я добавил следующий CSS-код для изображений:
CSS
img {
min-width: 35%;
max-width: 70%;
}
Контейнер для страницы
Один из наиболее полезных сценариев применения свойства max-width – для обёртки (или контейнера) страницы. Задав странице максимальную ширину, мы можем быть уверены, что пользователям будет удобно просматривать и читать содержимое
Ниже приведён пример центрированной обёртки, имеющей padding слева и справа
CSS
.wrapper {
max-width: 1170px;
padding-left: 16px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
}
Максимальная ширина и единица измерения «ch»
Единица измерения ch равняется ширине символа 0 (ноль), используемого в шрифте текущего элемента. Используя её в свойстве max-width, мы можем регулировать количество символов в строке. Согласно этой статье с сайта Smashing Magazine, рекомендованная длина строки от 45 до 75 символов.
В предыдущем примере с элементом-обёрткой, мы могли извлечь пользу от использования этого символа, поскольку это элемент статьи
CSS
.wrapper {
max-width: 70ch;
/* Other styles */
}
Анимирование элемента с неизвестной высотой
Порой мы сталкиваемся с проблемой анимирования аккордеона или мобильного меню с неизвестной высотой содержимого. В этом случае применение max-height может быть хорошим решением.
Рассмотрим следующий пример:
Когда нажимается кнопка меню, само меню должно плавно появляться сверху вниз. Сделать это без JavaScript невозможно, если только у элемента не задана фиксированная высота (а это делать не рекомендуется). Тем не менее, это возможно с помощью max-height. Идея заключается в добавлении элементу очень большой высоты, например, max-height: 20rem, которая, не будет достигнута, после чего мы можем задать шаги анимации от max-height: 0, до max-height: 20rem
CSS
.c-nav {
max-height: 0;
overflow: hidden;
transition: 0.3s linear;
}
.c-nav.is-active {
max-height: 22rem;
}
Нажмите на гамбургера, чтобы увидеть анимацию в действии
Минимальная высота для верхней секции (hero)
Как видите, я не люблю задавать элементам фиксированную высоту. Я чувствую, что поступая так, иду против концепции, согласно которой компоненты в вебе должны быть гибкими. Добавление минимальной высоты для первой секции сайта (секция «hero») полезно в ситуациях, когда добавляется очень большое содержимое (такое бывает).
Рассмотрим следующий пример, где у нас есть секция «hero» с фиксировано заданной высотой. Вроде смотрится хорошо.
Однако, когда содержимое увеличивается, оно переполняет контейнер и выходит за рамки обёртки секции. Это плохо.
Чтобы заранее избежать этой проблемы, мы можем вместо height добавить min-height. Мы поступаем именно так, по крайней мере, для того, чтобы очистить нашу совесть. Даже при том, что это может быть причиной весьма странного отображения страницы, я считаю, что подобные ситуации должны быть предотвращены в первую очередь, в системе управления контентом (CMS). После этого проблема исправлена и страница выглядит хорошо:
Проблема переполнения содержимым заключается не только в том, что оно может быть больше фиксированной высоты родителя. Это может произойти в результате уменьшения размера экрана и, как следствие, увеличения высоты текстового содержимого из-за переносов:
Если задавать не фиксированную высоту, а лишь ограничивать минимальную с помощью min-height, описанная выше проблема не произойдёт вовсе.
Модальное окно
Для компонента модального окна необходимо задавать и минимальную и максимальную ширину, следовательно, это будет работать на экранах любых размеров (от мобильных до десктопных). Это напоминает об интересной статье на CSS-Tricks, в которой рассказывается, что делать в этом случае.
1 способ
.c-modal__body {
width: 600px;
max-width: 100%;
}
2 способ
.c-modal__body {
width: 100%;
max-width: 600px;
}
Что касается меня, я предпочитаю второй способ, так как мне нужно только определить max-width: 600px. Модальное окно – это элемент div, поэтому у него уже ширина задана = 100% от родителя, правильно?
Рассмотрим приведённый ниже пример с модальным окном. Обратите внимание, как ширина становится равной 100% от ширины родителя, если в области просмотра недостаточно свободного места
Минимальная высота и липкий footer
Когда содержимое страницы недостаточно большое, футер ожидаемо не прилипнет к нижней части. Давайте рассмотрим пример, который лучше продемонстрирует это:
Обратите внимание, что футер не прилип к нижнему краю окна браузера. Это происходит из-за того, что высота содержимого меньше высоты окна браузера. После решения этой проблемы, страница должен выглядеть следующим образом:
Сначала я сделал элемент body flex-контейнером, после чего установил ему минимальную высоту 100% от области просмотра.
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin-top: auto;
}
Рекомендую ознакомиться с этой статьёй о липких футерах.
Демо
Пропорциональные размеры элемента и max-width/height
Чтобы сделать пропорциональный контейнер, который масштабируется в зависимости от размера области просмотра, однажды был представлен хак с использованием padding. Сейчас мы можем имитировать похожее поведение, комбинируя единицы измерения области просмотра и максимальную ширину/высоту.
На основе материалов статьи Miriam Suzanne, я хочу объяснить, как это работает.
У нас есть изображение с размерами 644 x 1000 пикселей. Нам нужно сделать следующее:
- Соотношение сторон: height / width (высоту поделить на ширину)
- Ширина контейнера: может быть фиксированной или динамической (100%)
- Задайте height, равный 100% ширины области просмотра, умноженной на соотношение сторон
- Задайте max-height, равный ширине контейнера, умноженной на соотношение сторон
- Задайте max-width, равное ширине контейнера
CSS
img {
—ratio: 664 / 1000;
—container-width: 30em;
display: block;
height: calc(100vw * var(—ratio));
max-height: calc(var(—container-width) * var(—ratio));
width: 100%;
max-width: var(—container-width);
}
HTML/Body с высотой 100%
Что делать, если нам нужно, чтобы элемент body занимал 100% высоты области просмотра? Это распространённый вопрос как в веб-сообществе в целом, так и на сайте StackOverflow в частности.
Сначала нужно задать height: 100% элементу html. Это будет гарантировать, что корневой элемент имеет высоту 100%. Затем добавляем min-height для элемента body. Причина, по которой используется именно min-height в том, что это свойство позволяет высоте элемента body быть динамичной, и подстраиваться, каким бы большим не было содержимое
CSS
html {
height: 100%;
}
body {
min-height: 100%;
}
Демо
Примечания
Минимальная ширина и блочные элементы
Порой мы забываем, что элемент, к которому пытаемся применить min-width, является блочным. В итоге это может сбить с толку и никак не влиять на элемент. Убедитесь, что элемент не является блочным
CSS функции сравнения
При исследовании на StackOverflow основных проблем, с которыми сталкиваются разработчики, я наткнулся на этот вопрос, в котором автор спрашивает следующее:
Реально ли сделать что-то подобное? max-width: calc(max(500px, 100% — 80px)) или может вот такое max-width: max(500px, calc(100% — 80px)))
Желаемое поведение заключается в том, чтобы удерживать ширину элемента не более 500px. Если ширина области видимости недостаточна, чтобы вместить элемент, то ширина должна быть 100% – 80px.
Что касается решения, опубликованного в ответ на вопрос, я попробовал применить его и он работает в Chrome 79 и Safari 13.0.3. Хоть это и выходит за рамки статьи, я всё же приведу здесь решение:
CSS
.yourselector {
max-width: calc(100% — 80px);
}
/* Update: I changed the max-width from 500px to 580px. Thanks @fvsch */
@media screen and (max-width: 580px) {
.yourselector {
max-width: 500px;
}
}
Источники и материалы для дальнейшего изучения
- Flex items and min-width:0 от Dominic McPhee
- CSS: Flex and “min-width” от Dominik Schöler
- Flexbugs от Philip Walton
Эта объемная статья учебника будет посвящена важным темам, задача которых заключается в том, чтобы расставить по полочкам методы работы с блочными элементами, объянить читателю для чего применяется изменение модели вычисления ширины и высоты элементов, как управлять переполнением блочных элементов, и как работать с минимальными и максимальными размерами элементов.
При изучении блочной модели CSS мы разобрали, что свойства width и height устанавливают ширину и высоту внутренней области элемента (content area), которая может содержать текст, изображения и прочие элементы.
В блочной модели CSS существует разница между значениями ширины и высоты, которые вы задаете для элемента и размером пространства, которое браузер резервирует для его отображения. Общая ширина и высота элементов представляет собой область окна браузера, которая состоит из ширины и высоты внутренних отступов, границ и указанных для них пользовательских значений.
Рис. 99 Схема вычисления общей ширины и высоты элементов.
Общая ширина элемента вычисляется по формуле:
width (ширина) + padding-left (левый внутренний отступ) + padding-right (правый внутренний отступ) + border-left (левая граница) + border-right (правая граница).
Общая высота элемента вычисляется по формуле:
height (высота) + padding-top (верхний внутренний отступ) + padding-bottom (нижний внутренний отступ) + border-top (верхняя граница) + border-bottom (нижняя граница).
Допустим, у нас есть следующие стили для элемента <div>:
div {
width: 150px; /* устанавливаем ширину элемента */
height: 150px; /* устанавливаем высоту элемента */
padding: 10px; /* устанавливаем внутренние отступы элемента */
border: 5px; /* устанавливаем границы элемента */
}
Для размещения элемента <div> браузеру необходимо подготовить следующее пространство:
Общая ширина элемента:
150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 5 пикселей (левая граница) + 5 пикселей (правая граница) = 180 пикселей.
Общая высота элемента:
150 пикселей (пользовательское значение высоты) + 10 пикселей (нижний внутренний отступ) + 10 пикселей (верхний внутренний отступ) + 5 пикселей (нижняя граница) + 5 пикселей (верхняя граница) = 180 пикселей.
И так, мы с Вами рассмотрели, как классически происходит вычисление общей ширины и высоты элементов. Минусы этой модели заключаются в том, что вам необходимо проводить математические вычисления, чтобы понять какую действительно ширину, либо высоту имеет тот, или иной элемент. Удобно ли это?
Изменение модели вычисления ширины и высоты элементов
С выходом стандарта CSS 3 добавлено свойство box-sizing
, оно позволяет изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.
Для того, чтобы понять стоит ли нам использовать альтернативные способы вычисления ширины и высоты элементов, давайте рассмотрим пример, в котором создадим четыре блока одной ширины, при этом мы будем использовать процентные значения:
<!DOCTYPE html>
<html>
<head>
<title>Пример вычисления ширины и высоты элементов</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 25%; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
}
.test {
background-color: red; /* задаем цвет заднего фона */
}
.test2 {
background-color: green; /* задаем цвет заднего фона */
}
.test3 {
background-color: blue; /* задаем цвет заднего фона */
}
.test4 {
background-color: yellow; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
/* обязательно прочтите пояснение ниже */
<div class = «test»></div><div class = «test2»></div><div class = «test3»></div><div class = «test4»></div>
</body>
</html>
Обратите внимание на важный момент — все четыре блока размещены в одну строчку.
Это очень тонкий момент, дело в том, что когда вы используете display: inline-block браузер расценивает переносы строки как пробельный символ, и как следствие, добавляет после каждого блока 3-4px пустого пространства в зависимости от браузера и шрифта пользователя. По сути это является междусловным интервалом, так как блок расценивается в данном случае как слово. Может на данном этапе этот момент для вас не до конца понятен, просто запомните его, чтобы в последствии случайно не потерять пару часов, когда у вас будет «съезжать» какой-то блок, или список в панели навигации из-за вдруг появившихся «не понятно откуда пикселей». Я человек простой: вижу непонятные пиксели при display: inline-block – пишу элементы в линейку без пробелов.
В результате у нас должно получиться четыре разноцветных блока, расположенных в линейку:
Рис.100 Пример вычисления ширины и высоты элементов.
А теперь техническое задание поменялось, и Вам необходимо к каждому нечетному блоку добавить сплошную границу справа размером 5px. Для этого мы создадим следующий стиль:
div:nth-child(odd) { /* выбираем каждый нечетный блок внутри родительского элемента */
border-right: 5px solid; /* добавляем сплошную границу справа размером 5px */
}
Теперь добавим стиль к нашему коду и посмотрим, что у нас из этого получится.
<!DOCTYPE html>
<html>
<head>
<title>Пример вычисления ширины и высоты элементов в процентах</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 25%; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
}
div:nth-child(odd) { /* выбираем каждый нечетный блок внутри родительского элемента */
border-right: 5px solid; /* добавляем сплошную границу справа размером 5px */
}
.test {
background-color: red; /* задаем цвет заднего фона */
}
.test2 {
background-color: green; /* задаем цвет заднего фона */
}
.test3 {
background-color: blue; /* задаем цвет заднего фона */
}
.test4 {
background-color: yellow; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
<div class = «test»></div><div class = «test2»></div><div class = «test3»></div><div class = «test4»></div>
</body>
</html>
Как вы можете заметить на изображении ниже, нас ждет разочарование, так как наш макет «поплыл»:
Рис. 101 Пример вычисления ширины и высоты элементов в процентах.
Какие у нас есть варианты, чтобы исправить наш макет?
Варианта два:
- Первый – брать в руки калькулятор и высчитывать проценты, которые стали занимать элементы в нашем документе.
- Второй – использовать альтернативную модель вычисления ширины и высоты элементов.
В нашем случае я считаю, что необходимо выбрать второй вариант:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства box-sizing</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 25%; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
box-sizing: border-box; /* изменяем модель вычисления ширины и высоты элементов */
}
div:nth-child(odd) {
border-right: 5px solid; /* к каждому нечетному блоку добавляем сплошную границу справа черного цвета размером 5px. */
}
.test {
background-color: red; /* задаем цвет заднего фона */
}
.test2 {
background-color: green; /* задаем цвет заднего фона */
}
.test3 {
background-color: blue; /* задаем цвет заднего фона */
}
.test4 {
background-color: yellow; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
<div class = «test»></div><div class = «test2»></div><div class = «test3»></div><div class = «test4»></div>
</body>
</html>
Мы использовали CSS свойство box-sizing со значением border-box, что позволило нам изменить модель вычисления ширины и высоты элементов.
Отличительная особенность данной модели заключается в том, что значения свойства ширины (width) и высоты (height) включают в себя содержание элемента, границы (border) и внутренние отступы (padding).
В нашем случае это спасает ситуацию, и нам не придется производить каких-то вычислений, и в дальнейшем боятся каких-либо изменений, которые могут потребоваться для наших элементов. Оставим эти не нужные вычисления на стороне браузера и посмотрим на результат нашего примера:
Рис.102 Пример использования свойства box-sizing.
Для окончательного понимания этой модели вычисления ширины и высоты элементов, закрепим полученные знания на следующем примере:
<!DOCTYPE html>
<html>
<head>
<title>Пример изменения модели вычисления ширины и высоты элементов</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 150px; /* устанавливаем ширину блока */
height: 150px; /* устанавливаем высоту блока */
margin: 10px; /* устанавливаем внешний отступ для всех сторон */
padding: 10px; /* устанавливаем внутренний отступ для всех сторон */
border: 10px solid orange; /* устанавливаем сплошную границу 10px оранжевого цвета */
background: khaki;
}
.test {
box-sizing: content-box; /* ширина и высота элемента включают в себя только содержание элемента (по умолчанию) */
}
.test2 {
box-sizing: border-box; /* ширина и высота элемента включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */
}
</style>
</head>
<body>
<div class = «test»>content-box</div><div class =»test2″>border-box</div>
</body>
</html>
Значение content-box свойства box-sizing является значением по умолчанию и производит расчёт общей ширины и высоты элемента по классической схеме. На примере ширины:
150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 10 пикселей (левая граница) + 10 пикселей (правая граница) = 190 пикселей.
Что касается второго элемента, к которому мы применили свойство box-sizing со значением border-box, то пользовательское значение ширины и высоты элемента уже включают в себя содержание элемента, границы (border) и внутренние отступы (padding). В большинстве случаев применение свойства box-sizing со значением border-box предпочтительно на страницах, так как делает очевидным конечные размеры элемента и позволяет избежать некоторых непредвиденных ситуаций рассмотренных выше.
Результат нашего примера:
Рис. 103 Пример изменения модели вычисления ширины и высоты элементов (свойство box-sizing).
Управление переполнением блочных элементов
В процессе верстки у вас будут возникать такие ситуации, когда содержимое элемента будет отображаться за пределами границ элемента. По умолчанию браузер отображает такое содержимое (переполнение элемента отображается), что в некоторых случаях приводит к визуальным ошибкам. За такое поведение браузера отвечает CSS свойство overflow. Рассмотрим его возможные значения:
| Значение | Описание |
|---|---|
| visible | Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию. |
| hidden | Переполнение обрезается (контент, который выходит за размеры будет невидимым). |
| scroll | Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров. |
| auto | Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров. |
Давайте рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<title>Пример управления переполнением элемента</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 125px; /* устанавливаем ширину блока */
height: 100px; /* устанавливаем высоту блока */
padding: 5px; /* устанавливаем внутренний отступ для всех сторон */
border: 1px solid orange; /* устанавливаем сплошную границу 1px оранжевого цвета */
vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента в строке (вертикальное позиционирование) */
}
.test {
overflow: visible; /* переполнение не обрезается */
}
.test2 {
overflow: hidden; /* переполнение обрезается */
}
.test3 {
overflow: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */
}
.test4 {
overflow: auto; /* если переполнение обрезается, то полоса прокрутки будет добавлена автоматически */
}
</style>
</head>
<body>
<div class = «test»><p>overflow: visible</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = «test2»><p>overflow: hidden</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = «test3»><p>overflow: scroll</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = «test4»><p>overflow: auto</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
</body>
</html>
В данном примере мы разместили четыре блока фиксированной ширины и высоты, для которых указали различные значения CSS свойства overflow:
- Первый блок (значение visible) – содержимое выходит за границы элемента (значение по умолчанию).
- Второй блок (значение hidden) – содержимое, которое переполняет элемент обрезается.
- Третий блок (значение scroll) – переполнение обрезается, но добавляется полоса прокрутки.
- Четвертый блок (значение auto) – как и при значении scroll, только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x — горизонтальной, либо y — вертикальной), а не отображается на странице постоянно.
Результат нашего примера:
Рис. 104 Пример управления переполнением элемента.
Переполнение по определённой оси
С выходом стандарта CSS 3 были добавлены свойства, которые способны управлять по отдельности горизонтальным переполнением (ось x) – overflow-x и вертикальным переполнением (ось y) – overflow-y. В отличии от свойства overflow, данные свойства отвечают только за одну ось (x, либо y) при этом значения и синтаксис аналогичен свойству overflow (таблица выше).
Давайте рассмотрим пример, в котором нам необходимо добавить полосу прокрутки для блока текста, если содержимое переполнит элемент по горизонтали:
<!DOCTYPE html>
<html>
<head>
<title>Пример управления переполнением элемента по горизонтальной оси</title>
<style>
pre {
width: 300px; /* устанавливаем ширину элемента */
overflow-x: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */
background-color: orange; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
<pre>
Съешь же ещё этих мягких французских булок да выпей чаю.
</pre>
</body>
</html>
В данном примере мы использовали элемент <pre>, который сохраняет все пробелы и переносы строк (текст может выходить из отведённой области), что нам и помогло продемонстрировать возможности свойства overflow-x. В нашем случае текст вышел за пределы ширины размера элемента <pre> и браузер добавил горизонтальный бегунок прокрутки, что нам и требовалось.
Результат нашего примера:
Рис. 105 Пример управления переполнением элемента по горизонтальной оси.
Минимальные и максимальные значения ширины и высоты блочного элемента
Заключительная тема этой статьи, которую необходимо освоить это указание минимальных и максимальных размеров для блочных элементов.
CSS, помимо явного указания значений ширины и высоты элементов (свойства width и height) предлагает такие свойства, которые позволяют указать для блочных элементов их минимальные, либо максимальные значения:
- min-width (устанавливает минимальную ширину элемента).
- max-width (устанавливает максимальную ширину элемента).
- min-height (устанавливает минимальную высоту элемента).
- max-height (устанавливает максимальную высоту элемента).
На просторах интернет не редко можно встретить такое оформление сайтов, где основное содержимое находится по центру, а на заднем фоне находятся какие-то рекламные, либо графические материалы. Сделаем для этого похожую начальную разметку:
<!DOCTYPE html>
<html>
<head>
<title>Минимальная высота и максимальная ширина для блочных элементов</title>
<style>
:root { /* псевдокласс :root определяет корневой элемент документа */
background-color: black; /* задаем цвет заднего фона */
}
html {
height:100%; /* задаем высоту элемента в процентах */
background-color: white; /* задаем цвет заднего фона */
}
body {
margin: 0 auto; /* задаем внешние отступы элемента (0 для верха и низа, автоматически слева и справа) */
max-width: 800px; /* задаем максимальную ширину элемента в пикселях */
height: 100%; /* задаем высоту элемента в процентах */
}
div {
min-height: 100%; /* задаем минимальную высоту элемента в процентах */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Какие приёмы CSS надо обязательно уяснить из этого примера:
Как установить высоту элемента 100% при любом разрешении?
Для начала мы должны установить для родителя элемента размер высоты 100%. В нашем случае необходимо установить 100% для элементов <html> и <body>, и только после этого мы устанавливаем для нашего блока размер минимальной высоты 100% (min-height). В итоге это приводит к тому, что у нас даже пустой блок растягивается на весь экран.
Как горизонтально центрировать страницу?
Для этого необходимо установить внешние отступы элемента сверху и снизу равными 0 (нулю), а слева и справа установить как auto (автоматически):
margin: 0 auto;
В нашем случае мы центрируем страницу, используя такой стиль для элемента <body>.
Кроме того, мы указываем для элемента <body> максимальное значение ширины равной 800px (если разрешение экрана не будет вмещать 800px, то значение будет равно размеру экрана браузера (меньше этого числа), но элемент в котором установлен максимальный размер не может растянуться больше этого числа).
Например, если бы мы указали min-width: 100px, то это бы означало, что элемент не может быть меньше чем 100px (если экран будет меньше, то браузер добавит полосу прокрутки).Как установить стиль, который будет приоритетней элемента <html>?
Псевдокласс :root
, как и селектор типа html делают одно и тоже (выбирают одни и те же элементы), но псевдокласс :root обладает более высокой специфичностью (болеее значимый при определении стиля).
Вы можете использовать такой прием в будущем для установки изображений в качестве заднего фона. Подробное изучение работы с задним фоном мы рассмотрим далее в учебнике в статье «Работа с фоном элемента в CSS».
Результат нашего примера приведен на изображении ниже:
Рис. 106 Пример установки минимальной высоты и максимальной ширины для блочных элементов.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующий документ, посвященный белому тигру (внимательно изучите страницу перед выполнением):
Практическое задание № 26.
Обратите внимание, что при уменьшении размера окна браузера страница принимает следующий вид:
