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

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 — это короткий способ задать отступы по часовой стрелке. Первое значение — отступ сверху, второе — справа, третье — снизу, четвёртое — слева. Вместо короткой записи можно ещё так: 

padding-top: 15px;

padding-right: 15px;

padding-bottom: 19px;

padding-left:15px;

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

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

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

width: 100px;

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

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

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

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

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

<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Единицы измерения</title>
  <style type="text/css">
  	div{
  		/* у блоков будет единая высота */
  		height: 100px;
  		/* и становиться они будут друг за другом в один ряд */
  		float: left;
  	}
  	/* у блоков будет одинаковая ширина, но разный цвет фона */
  	.div1{
  		width: 100px;
  		background: red;
  	}
  	.div2{
  		width: 100px;
  		background: green;
  	}
  	.div3{
  		width: 100px;
  		background: blue;
  	}
  </style>

</head>
<body>
	<!-- первый блок -->
	<div class="div1"></div>
	<!-- второй блок -->
	<div class="div2"></div>
	<!-- третий блок -->
	<div class="div3"></div>

</body>
</html>
CSS: как задавать размеры элементов на сайте
Так наша страница будет выглядеть на большом мониторе
CSS: как задавать размеры элементов на сайте
А так — на экране мобильника. Но те же 100 пикселей в ширину у каждого блока

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

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

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

  • vh — это 1% от высоты окна;
  • vw — это 1% от ширины окна.

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

width: 50vw;

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

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

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

  • первый блок — 10vw
  • второй блок —  20vw
  • третий — 50vw

<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Единицы измерения</title>
  <style type="text/css">
  	div{
  		/* у блоков будет единая высота */
  		height: 100px;
  		/* и становиться они будут друг за другом в один ряд */
  		float: left;
  	}
  	/* задаём ширину относительно ширины экрана */
  	.div1{
  		width: 10vw;
  		background: red;
  	}
  	.div2{
  		width: 20vw;
  		background: green;
  	}
  	.div3{
  		width: 50vw;
  		background: blue;
  	}
  </style>

</head>
<body>
	<!-- первый блок -->
	<div class="div1"></div>
	<!-- второй блок -->
	<div class="div2"></div>
	<!-- третий блок -->
	<div class="div3"></div>
</body>
</html>

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

height: 100vh;
CSS: как задавать размеры элементов на сайте
Блоки стали такой же высоты, как и экран

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

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

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

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

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

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

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

<div style="width: 500px;">
</div>

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

  • первый блок — 10%;
  • второй блок —  20%;
  • третий — 50%.

<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Единицы измерения</title>
  <style type="text/css">
  	div{
  		/* у блоков будет единая высота */
  		height: 100vh;
  		/* и становиться они будут друг за другом в один ряд */
  		float: left;
  	}
  	/* задаём ширину в процентах относительно родителя */
  	.div1{
  		width: 10%;
  		background: red;
  	}
  	.div2{
  		width: 20%;
  		background: green;
  	}
  	.div3{
  		width: 50%;
  		background: blue;
  	}
  </style>

</head>
<body>
	<div style="width: 500px;">
		<!-- первый блок -->
		<div class="div1"></div>
		<!-- второй блок -->
		<div class="div2"></div>
		<!-- третий блок -->
		<div class="div3"></div>
	</div>
</body>
</html>
CSS: как задавать размеры элементов на сайте
Блок занял свои 500 пикселей, а внутри мы поделили его по процентам

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

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

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

Но знать полезно. 

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства и компенсация, если вы пойдёте работать в «Яндекс».
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Пианино на JavaScript для Chrome
Пианино на JavaScript для Chrome

Не «Мир Дикого запада», но тоже сгодится.

Простейший генератор креативного текста

Без нейросетей, регистрации и СМС.

Делаем собственный таймер для спорта
Делаем собственный таймер для спорта

Без рекламы и встроенных покупок.

Прогаем в Экселе: автомобиль в кредит или по подписке?
Прогаем в Экселе: автомобиль в кредит или по подписке?

Программерский подход, подручные средства.

Проект: собственный поиск по странице на jQuery
Проект: собственный поиск по странице на jQuery

Потому что почему бы и нет.

Что означает ошибка: TypeError: ‘undefined’ is not an object
Что означает ошибка: TypeError: ‘undefined’ is not an object

Это значит, что браузер не может найти нужный объект.

Подключаем нейросеть к веб-камере

Готовьтесь — искусственный интеллект уберёт вас из кадра.

Как сохранить JSON на сервере
Как сохранить JSON на сервере

И отдать его обратно по запросу.

Переводим аудио в текст. Часть 2

Python, выручай!

Bomberman на JavaScript

Как на старой приставке из детства.

Пишем собственный лапшесниматель
Пишем собственный лапшесниматель

Инструмент для защиты ума от пропаганды, контрпропаганды, инфобизнеса и лжепсихологов.

Простейший генератор креативного текста

Без нейросетей, регистрации и СМС.

Как добавить плавающий блок на страницу
Как добавить плавающий блок на страницу

Иногда это и правда нужно.

easy