Как задать размер блока css

Размер блока css

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

Отслеживать

задан 6 апр 2020 в 12:11

Биар Горрилс Биар Горрилс

129 1 1 серебряный знак 6 6 бронзовых знаков

Как задавать в css размер блока

Дело в том, что не все фрагменты на веб-странице – блоки. Элементы вообще делятся на блочные и строчные. Вторые могут спокойно записываться в одну строку и при этом им не нужно ничего дополнительно прописывать. Простой пример строчного элемента – ссылка. На одной строке может быть сколько угодно ссылок, пока они будут помещаться на ней.

Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.

Рис. 1. Основные свойства, которые помогают задать размер

Простые свойства для размеров

Самые простые свойства, которыми можно записать размеры – это width и height. Означают они, соответственно, ширину и высоту. К ним также можно дописывать префиксы min- и max-. В таком случае будет задаваться минимальная и максимальная ширина или высота соответственно.

Значения можно записывать в пикселях или в процентах. Иногда еще используется относительная единица em (высота шрифта), но обычно с ее помощью определяется величина текста. По умолчанию все сетки (главные структурные блоки шаблона), в которых размеры определяются в процентах, называют резиновыми. Также процентная запись помогает легко адаптировать шаблон, что тоже очень важно.

Размер в пикселях

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

Размер текста относительно ширины блока

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

 
Заголовок
 
 

Отслеживать
задан 13 апр 2017 в 5:15
110 1 1 золотой знак 1 1 серебряный знак 7 7 бронзовых знаков
13 апр 2017 в 5:38

Извините, я плохо понимаю английский язык. Но как я понял, там речь идёт о медиа запросах. Данный вариант также не имеет место быть, т.к придётся писать слишком много лишних запросов создавая новый блок и.или «формат» блоков.

13 апр 2017 в 5:47

Возможно есть решение от яваскрипт (в нём я тоже не силён) которое позволяет высчитать ширину блока и относительно данной ширины увеличить или уменьшить шрифт?

13 апр 2017 в 5:54
13 апр 2017 в 6:54

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Вариант на CSS.

vw — еденица измерения, равная проценту ширины документа:

Некоторый тестовый текст

Он довольно неточен, поэтому я поставил white-space: nowrap;

Вариант с масштабированием.

Блок с текстом масштабируется с помощью JS и CSS transform

function fillDiv(div, proportional) < var div=$('#test') var currentHeight = div.outerHeight(); var currentWidth = div.outerWidth()+3; var availableHeight = window.innerHeight; var availableWidth = window.innerWidth; var scale = availableWidth / currentWidth; div.css(< "left": "0px", "top": "0px", "transform": "scale3d(" + scale + ", " + scale + ", 1)", "transform-origin": "0 0" >); > fillDiv(); $( window ).resize(fillDiv)

#test

 
Некоторый тестовый текст

Стырено и адаптировано из amazon

Отслеживать
ответ дан 13 апр 2017 в 6:43
9,720 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков

1. Обернём текст инлайн-элементом (в нашем случае это ) для того, чтобы вычислять ширину текста. Добавим для этого элемента свойство white-space: nowrap — так при инкрементальном увеличении текст не перенесется на другую строку и высчитываемая ширина не изменится.
2. Проверяем что больше — ширина страницы или ширина текста. Если текст больше, то в цикле уменьшаем его до тех пор, пока он не станет меньше. Если текст меньше, то в цикле увеличиваем его. Если в каком-либо из этих циклов произошел перебор с увеличением или уменьшением, то откатываем изменения назад и выходим из цикла.
3. Навешиваем на событие resize исполнение этой функции. Чтобы она не вызывалась при каждом событии и чтобы не сильно нагружать браузер, добавим функцию debounce() — так она вызовется один раз спустя 250 мс после окончания события.

P.S. пример не слишком хорош, потому что будет слишком часто дергаться DOM и начинаться перерисовка страницы, так что рекомендую подумать над тем, чтобы его улучшить 🙂

start(); window.addEventListener('resize', debounce(start, 250)); function getCurrentFz(selector) < let style = window.getComputedStyle(selector, null).getPropertyValue('font-size'), fontSize = parseFloat(style) return fontSize; >; function debounce(func, wait, immediate) < let timeout; return function() < let context = this, args = arguments, later = function() < timeout = null; if (!immediate) func.apply(context, args); >, callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); >; >; function start() < let body = document.body, bodyWidth = body.getBoundingClientRect().width, selectorInner = document.querySelector('h1 span'), fz = getCurrentFz(selectorInner); if (bodyWidth >selectorInner.offsetWidth) < while (bodyWidth >selectorInner.offsetWidth) < fz += 1; selectorInner.style.fontSize = fz + 'px'; if (bodyWidth < selectorInner.offsetWidth) < selectorInner.style.fontSize = fz - 1 + 'px'; break; >> > else < while (bodyWidth < selectorInner.offsetWidth) < fz -= 1; selectorInner.style.fontSize = fz + 'px'; if (bodyWidth >selectorInner.offsetWidth) < selectorInner.style.fontSize = fz + 1 + 'px'; break; >> > >;

h1 < margin: 0; >h1 span

Some text in header

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 точки на дюйм, то браузер поймёт, что надо пересчитать одни пиксели в другие. Если поставить два сайта рядом на этих экранах, они будут не один в один, но похожи.

Получите ИТ-профессию

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

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

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

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

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

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

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

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

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 пикселей:

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

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

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

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

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

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