Як задавати в css розмір блоку

14

Від автора: доброго дня, читачі цього блогу. У цій статті я хочу поділитися з вами детальною інформацією щодо того, як визначати в css розмір блоку, тобто елементи на веб-сторінці.

На які типи поділяються елементи

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

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

Як задавати в css розмір блоку

Рис. 1. Основні властивості, які допомагають задати розмір

Прості властивості для розмірів

Найпростіші властивості, якими можна записати розміри width і height. Означають вони, відповідно, ширину і висоту. До них також можна дописувати префікси min і max-. В такому випадку буде задаватися мінімальна і максимальна ширина або висота відповідно.

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

Розмір в пікселях

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

#container{
width: 1000px;
}

Якщо записано так, то ширина контейнера не буде змінюватися ні під яким приводом. При зміні масштабу або зменшенні вікна вона буде залишатися незмінною. Розмір сайту не зменшиться і при необхідності з’явиться горизонтальна смуга прокрутки.

Це так звані фіксовані шаблони. Сьогодні все ще багато сайтів працюють таким чином. Наприклад, соціальна мережа Вконтакте. Спробуйте на комп’ютері зменшити розміри вікна і ви побачите, що шаблон ніяк не змінюється. Звичайно, у Вконтакте є окремі версії для планшетів і смартфонів, тому вони вирішили залишити фіксований шаблон.

І все ж уміння сітки сайту адаптуватися під нові екрани має величезну роль, тому що мобільний трафік зростає. У зв’язку з цим останні роки все частіше головний контейнер для каркаса сайту отримує не жорстку ширину. Наприклад, так:

#container{
max-width: 1320px;
}

І що це значить? А те, що при необхідності блок буде зменшуватися. Якщо стиснути вікно, то він теж зменшиться. У той же час, якщо дозвіл екрану дозволяє, ширина становитиме 1320 пікселів рівне. Зменшуючи вікно ви не побачите горизонтальний скрол.

Однак тут же можна задати ще і мінімальну ширину. Якщо блоку записати це властивість, то він не буде ставати вже, ніж вказане значення. Наприклад:

#container{
min-width: 600px;
}

Якщо ширина вікна стане менше 600 пікселів, то блок перестане стискатися і з’явитися та сама горизонтальна смуга прокрутки.

Розмір у відсотках

Задавати величину у відсотках стає все більш популярним. При грамотному використанні це може принести відмінне відображення сайту на різних пристроях.

Наприклад, ви захотіли на своєму сайті зробити зліва бічну колонку, а праворуч – області з основним вмістом, де буде виводитися основна текстова інформація. Наприклад, стаття, каталог товарів або теми на форумі. Для початку потрібно визначити, які розміри ви хочете дати приблизно цим контейнерам.

#sidebar{
float: left;
width: 28%;
}
#content{
float: right;
width: 62%;
}

У підсумку сайдбар отримає 28% ширини батьківського елемента (а в нашому випадку це загальний контейнер), а основний блок – 62%. Їх загальна ширина складе 90%. Решта 10 залишимо на різні зовнішні і внутрішні відступи, рамки і т. д.

Як задавати в css розмір блоку

Рис. 2. Гумові блоки змінюють свої розміри при зменшенні вікна в браузері

Як впливають відступи на розміри блоків

Коли ви задаєте ширину якогось блоку за допомогою властивості width, це може бути далеко не остаточне значення. Справа в тому, що так ми визначаємо ширину тільки тієї частини, в якої безпосередньо є вміст. Потрібно пам’ятати, що в css padding збільшує розмір блоку, так само, як і рамка (border).

Припустимо, візьмемо бічну колонку. Ми дали їй 28% від усієї ширини контейнера. Але щоб вміст в сайдбарі не прилипало до країв, їм потрібно дати деякі відступи. Також, можливо, ви захочете додати бічній колонці рамочку.

#sidebar{
padding: 10px 20px;
border: 2px solid black;
}

Ось вже і виходить, що загальна ширина сайдбара збільшилася на 44 пікселя (відступи праворуч і ліворуч по 20 і рамка з цих сторін по 2). Є варіант для тих, хто не хоче сильно заморочуватися над розмірами і записувати їх відразу з урахуванням відступів і рамок. Тоді треба записати так:

*{
box-sizing: border-box;
}

Це чудова властивість робить так, що в ширину блоку (width) починають включатися внутрішні відступ (padding) і рамки. Тепер якщо ви задасте контенту розмір 62%, він залишиться таким в будь-якому випадку. Адже є ще і зовнішні відступи, але вони вже на розміри блоку не впливають. Але якщо ви захочете зробити, припустимо, великий відступ праворуч від бічної колонки, то контент просто не влізе і змушений буде перенестися вниз.

Гумові картинки

Щоб дати можливість в css картинці змінюватися за розміром блоку, їй потрібно задавати ширину у відсотках. Таким чином, якщо сам блок має відносний розмір або йому прописаний max-width, то при зменшенні ширини картинка і блок будуть зменшуватися синхронно, що є добре для гарного відображення сайту.

Про гумової верстки на нашому сайті є дуже докладний відеокурс, з якого ви можете дізнатися масу корисної інформації, а саме головне, отримати реальний досвід розробки.

Підсумок

В css багато можливостей для завдання розміру. Набагато більшу увагу при цьому приділяється ширині блоків, так як саме від цього залежить відображення шаблону. В кінці я ще хотів би порекомендувати вам такий курс, з якого ви зможете дізнатися, як правильно працювати з розмірами елементів в умовах розробки під мобільні пристрої.