Единицы измерения

CSS: как задавать размеры элементов на сайте

Мы тут рассказывали про размеры текста в вёрстке. Но что, если задавать размеры не только текста, но вообще всего? В CSS это делается так же легко, как и в случае с текстом.

Как задаются размеры

У большинства элементов в CSS есть такие параметры для работы с размером:

height, width — высота и ширина;

max-height, max-width — высота и ширина, больше которых элемент не может быть (а меньше — может);

min-height, min-width — минимальная высота и ширина;

margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;

padding — отступы внутри элемента, например, если внутри будет написан текст.

Например, нам нужно нарисовать кнопку, внутри которой будет текст. Описание стиля кнопки может быть таким:

.button width:75%;
max-width:600px;
min-width:300px;
padding: 15px 15px 19px 15px;
margin: 20px auto 50px auto;
>

Перевод: кнопка должна занимать от 300 до 600 пикселей в ширину, а в этом диапазоне быть 75% ширины от содержащего ее контейнера; внутри кнопки отступи сверху 15 пикселей, справа 15, снизу 19, слева 15 (по часовой стрелке). Саму кнопку от ближайшего элемента сверху отодвинь на 20 пикселей, слева и справа отодвинь одинаково, чтобы она встала по центру, а снизу отступи еще 50 пикселей до следующего элемента.

Запись в стиле padding: 15px 15px 19px 15px — это короткий способ задать отступы по часовой стрелке. Первое значение — отступ сверху, второе — справа, третье — снизу, четвёртое — слева. Вместо короткой записи можно ещё так:

Но так обычно не пишут, потому что много текста.

Размеры в пикселях — жёстко, но точно

Самый простой способ задать размер элемента — указать его в пикселях. Например, если нам нужна ширина элемента 100 пикселей, то можно написать:

В пикселях можно задавать размеры почти чему угодно, потому что пиксели есть везде:

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

С пикселями есть только одна проблема: так как размеры и плотность пикселей на разных экранах разные, то может получиться так:

• на экране 5-дюймового телефона с разрешением 1920 на 1080 пикселей баннер шириной 200 пикселей получит размер в 5 сантиметров;
• а на мониторе с диагональю 24 дюйма, но с тем же разрешением 1920 на 1080 те же 200 пикселей будут иметь длину 10 сантиметров.

Чтобы было нагляднее, сделаем тестовую страницу с тремя блоками одинаковой высоты, но с шириной 100 пикселей.

div < /* у блоков будет единая высота */ height: 100px; /* и становиться они будут друг за другом в один ряд */ float: left; >/* у блоков будет одинаковая ширина, но разный цвет фона */ .div1 < width: 100px; background: red; >.div2 < width: 100px; background: green; >.div3

Справедливости ради, браузеры понимают эту проблему, поэтому умеют пересчитывать пиксели так, чтобы сайты не ломались. Например, если у вас есть современный экран с разрешением 288 точек на дюйм и тут же рядом старый экран с разрешением 72 точки на дюйм, то браузер поймёт, что надо пересчитать одни пиксели в другие. Если поставить два сайта рядом на этих экранах, они будут не один в один, но похожи.

В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах

Чтобы не зависеть от размера пикселей, а масштабировать элементы в зависимости от размера экрана, придумали другие единицы измерения:

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

В этом случае браузер сделает так:

1. Посмотрит, что за единица измерения — vw, значит нужна ширина экрана.
2. Узнает, какой ширины в пикселях окно, в котором открывается эта страница.
3. Поделит её на 100, чтобы узнать размер одного vw в пикселях.
4. Умножит это значиние на 50, чтобы понять размер в пикселях нужного нам элемента.
5. Установит это значение в пикселях при вёрстке.
6. Если в процессе просмотра у браузера поменяется размер экрана — он сам всё пересчитает и отрисует заново.

Используем страницу из предыдущего раздела и немного переделаем её — установим такой размер блоков:

div < /* у блоков будет единая высота */ height: 100px; /* и становиться они будут друг за другом в один ряд */ float: left; >/* задаём ширину относительно ширины экрана */ .div1 < width: 10vw; background: red; >.div2 < width: 20vw; background: green; >.div3

Если нам нужно, чтобы блоки по высоте занимали всю высоту экрана, то для этого достаточно указать в стилях div такой параметр:

Ещё есть vmin и vmax, которые работают так:

• vmin находит минимальное значение из пары (vh, vw);
• а vmax находит максимальное значение из пары (vh, vw).

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

Проценты — очень гибко, но всегда нужен родительский элемент

Кажется, что vh и vw — это и есть те самые проценты от ширины экрана и что можно обойтись без обычных процентов. Но на самом деле просто проценты в вёрстке тоже используются, но с одним важным моментом:

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

Родительский элемент — тот, внутри которого находятся другие наши элементы. Например, мы хотим сделать на странице блок шириной 500 пикселей:

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

div < /* у блоков будет единая высота */ height: 100vh; /* и становиться они будут друг за другом в один ряд */ float: left; >/* задаём ширину в процентах относительно родителя */ .div1 < width: 10%; background: red; >.div2 < width: 20%; background: green; >.div3

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

Нужно ли в этом разбираться?

Вообще в современном мире взрослые фронтендеры верстают с помощью css-grid и готовых верстальных фреймворков: в них все размеры стандартизированы и прописаны под капотом, а верстальщики просто говорят «большое», «среднее», «сбоку», «на три четверти», «на всю ширину» и т. д. А уже как это интерпретировать и какие конкретно там размеры — этим занимается фреймворк.

Источник

Ширина (width) и высота (height) в HTML

В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота):

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

К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать «height:50%;», то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой.

Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after)

Максимальная и минимальная ширина (max-width и min-width)

Жёсткое ограничение ширины — это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%.

Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить «max-width:400px;» на «width:400px», то блок будет выходить за пределы родительского элемента:

По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.

Максимальная и минимальная высота (max-height и min-height)

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

Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код:

 
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
 

Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки:

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
 

Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.

По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.

Источник

CSS: Ширина и высота элемента

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

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

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

     p.first < width: 150px; height: 100px; background-color: #B2FFCC; padding: 0px; /*обнуляем внутренние отступы*/ >p.second 
Для данного абзаца зададим только ширину и высоту.
 
Этот абзац содержит, кроме ширины и высоты, внутренний отступ, рамку и внешний отступ.
   

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

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

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

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

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник