Методи розміщення блоків горизонтально. Параметри css width та height для завдання розмірів елементів html сторінки Поведінка блоків по ширині

Відомо, що веб-дизайнер малює макет сайту, а верстальник робить верстку, тобто пише HTML/CSSкод. А що саме він пише на HTMLсторінці? Всі елементи дизайн-макету розміщуються в блоках.

Якщо заглянути у вихідний код, то ми побачимо, що там дуже багато див та всі вони заповнені фрагментами дизайну. Цілісний малюнок розкидали, як мозаїку по своїх осередках.

Для того щоб усі фрагменти дизайну нікуди не поїхали, а були чітко зафіксовані у своїх блоках, бо намалював дизайнер. Необхідно добре знати, як поводяться блоки по висоті та ширині.

Розглянемо з прикладу блоку div, зробимо HTMLрозмітку.

Поведінка блоків за висотою

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

Body (
background: #d5d5d5;
}

Div (
background: #d56287;
height: 100px;
}

Задамо йому висоту 100 пікселів та колір фону, щоб фон сторінки та блок були різного кольору, інакше ми нічого не побачимо.

Поведінка блоків з контентом

Забираємо висоту heightта вставляємо текст усередині блоку.

Div (
background: #d56287;
}

Ми бачимо, що висота блоку змінюється, вона залежить кількості контенту. Чому так відбувається? За замовчуванням висота блоку дорівнює значенню autoтобто автоматично підлаштовується під висоту займаного контенту в батьківському блоці.

Пріоритети у блоків

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

Невже ніяк не можна змусити блок дотримуватися заданої висоти і не розтягуватися за контентом? Можна тільки за рахунок автоматичного обрізання тексту, що виходить за рамки заданих розмірів, називається ця властивість overflow.

Приховування зайвого вмісту у блоці

Треба додати до CSSкод властивість overflow: hidden

Div (
background: #d56287;
height: 100px;
overflow: hidden;
}

все, що не поміститися в блоці, буде приховано, бачимо, як некрасиво обрізався текст.

У разі необхідності виведення вмісту блоку цілком можна задіяти прокручування, тоді слід прописати блоку замість hidden.

Overflow: scroll;

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

Поведінка блоків по ширині

А як поводяться блоки, якщо не задавати їм ширину? Ми не ставили ширину блоку, але його ширина автоматично займає весь відведений йому простір. Ширина блоку за замовчуванням дорівнює 100%. Але якщо ми обмежимо ширину, задавши, наприклад, 200 пікселів, то візуально побачимо, що блок займає 200 пікселів.

Div (
background: #d56287;
height: 100px;
width: 200px;
}

Однак, тут є каверза, якщо ми наведемо на елемент в інспекторі коду, то побачимо, що насправді блок продовжує займати всю ширину браузера, але робить це потай. Таким чином, 200 пікселів він займає відкрито, а решта простору зарезервована і не дає іншим елементам стати з ним в один рядок.

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

То як же їх змусити стати в один ряд? Треба зробити їх рядково-блочними елементами і тоді вони чудово стоятимуть поряд в одному рядку. Кожному блоку необхідно задати властивість.

Display: inline-block;

Висота та ширина блоку можуть задаватися у відносних одиницях, наприклад %. Потрібно враховувати, що розміри дочірніх блоків задаються щодо батька і тоді батьком для блоку. divбуде body.

Мій допоможе вам від теорії перейти до практики та згорнути свій перший сайт.

Опис

Встановлює ширину блокових або замінних елементів (до них, наприклад, відноситься тег ). Ширина не включає товщину меж навколо елемента, значення відступів та полів.

Браузери неоднаково працюють із шириною, результат відображення залежить від використовуваного. У табл. 1 наведено можливі варіантиі отримувана ширина.

Табл. 1. Дія width у браузерах

	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Не вказано (режим сумісності)	Якщо вміст перевищує задану ширину, блок змінює свої розміри, підлаштовуючись під вміст. В іншому випадку ширина блоку дорівнює значенню width.	У всіх випадках браузер діє за специфікацією CSS. А саме, ширина блоку виходить додаванням значень width, padding, margin і border. Вміст блоку, якщо не поміщається у задані розміри, відображається поверх блоку.	Ширина дорівнює значенню width.
Перехідний HTML
Суворий HTML	Ширина формується шляхом складання значень width, padding, margin та border. Вміст блоку, якщо не вміщується в задані розміри, відображається поверх.		Ширина дорівнює значенню width плюс padding, margin, і border. Вміст блоку, якщо не вміщується в задані розміри, відображається поверх.
HTML 5
XHTML

Синтаксис

width: значення | відсотки | auto | inherit

Значення

В якості значень приймаються будь-які одиниці довжини, прийняті CSS — наприклад, пікселі (px), дюйми (in), пункти (pt) та інших. При використанні відсоткового запису ширина елемента обчислюється залежно від ширини батьківського елемента. Якщо батько явно не вказаний, то як його виступає вікно браузера.

Auto Встановлює ширину на основі типу та вмісту елемента. inherit Наслідує значення батька.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат цього прикладу, як він відображається у браузері Safari, показаний на рис. 1.

Мал. 1. Ширина блоку

Об'єктна модель

document.getElementById("elementID ").style.width

Браузери

Браузер Internet Explorer 6 некоректно визначає width як min-width. У режимі сумісності Internet Explorer до версії 8.0 включно неправильно обчислює ширину елемента, не додаючи до неї значення відступів, полів і меж.

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Здрастуйте, шановні читачі! Сьогодні ми розглянемо як задавати розміри блокових елементів веб сторінки за допомогою css властивостей і налаштувати відображення контенту, якщо він не міститься в елементі.

width і height — ширина та висота елементів у css

За допомогою атрибутів стилю width і height можна задавати відповідно ширину та висоту блокових елементів:

width: auto|<ширина>|inherit
height: auto|<ширина>|inherit

Як значення можна використовувати будь-які доступні в css одиниці виміру - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін.

p (width:200px; height:150px)

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

div (width:40%;)

Значення auto віддає керування розмірами елемента веб-браузеру і значення за промовчанням. У цьому випадку розміри елемента будуть такі, щоб у ньому повністю вмістився весь вміст.

Розглянемо кілька прикладів.

Результат:

У цьому прикладі ми створили блок div і вклали абзац p з текстом. Для div-а ми суворо поставили розміри 300 на 300 пікселів. У елемента p значення властивостей width і height рівні auto, тому як видно на скріншоті, його ширина встановилася рівною ширині батьківського елемента, а висота стала такою, щоб у ньому помістився текст, що міститься в абзаці.

Тепер змінимо css налаштування для абзацу p і задаємо фіксовані розміри:

Layer2 (
background: #eee;
width:250px;
}

Результат:

Як бачимо ширина абзацу стала вже й дорівнює 250 пікселів, а його висота збільшилася так, щоб вмістився текст, оскільки параметр height залишився рівним auto.

Тепер давайте поставимо висоту і ширину абзацу у відсотках:

Layer2 (
background: #eee;
width:50%;
height:50%;
}

Результат:

Як видно на картинці, ширина елемента p дорівнювала половині ширини елемента div. А висота збільшилася і дорівнювала 75 відсоткам висоти div.

При заданні ширини та висоти будь-яких елементів у відносних одиницях, може знадобитися вказати мінімальні та максимальні можливі розміри. Адже, наприклад, при зміні розмірів вікна браузера розміри елемента можуть зменшуватися і збільшуватися до таких розмірів, що зручність читання сайту стане дуже низькою.

Визначити мінімальну ширину та висоту можна за допомогою атрибутів min-width та min-heigh:

min-width:<ширина>
min-height:<высота>

Аналогічні атрибути стилю max-width та max-height дозволяють задати максимальні розміри:

max-width:<ширина>
max-height:<высота>

Зрозуміло, що при заданні максимальних і мінімальних значень висоти і ширини, розміри елемента не зможуть стати більшими за максимальне і менше мінімального значень.

Варто уточнити, що завдання параметрів height та width має сенс тільки для блокових тегів, оскільки для малих елементів ці параметри браузером не обробляються.

Може вийти так, що при заданні жорстких параметрів висоти і ширини елемента, що міститься в ньому, контент може не вписатися в обмежену область.

Наприклад, зменшимо розміри абзацу p з вище розглянутих прикладів до 100 пікселів:

Layer2 (
background: #eee;
width:100px;
height:100px;
}

Результат:

Як видно, текст вийшов за межі абзацу і виглядає не дуже красиво. Для уникнення подібних ситуацій існує правило css overflow.

Параметр переповнення overflow для приховування (hidden, visible) або прокручування (scroll, auto) контенту

Переповнення контенту може виникнути, коли обмежують ширину і висоту елемента. Розглянемо два абзаци:

Текст першого абзацу

Текст другого абзацу

Результат:

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

Тепер у першого абзацу обмежимо ширину:

Текст першого абзацу

Текст другого абзацу

Результат:

Ширина абзацу очікувано зменшилася, а висота встановилася такою, щоб вмістити весь текст.

Ну а тепер обмежимо у першого абзацу та висоту:

Текст першого абзацу

Текст другого абзацу

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

overflow: visible|hidden|scroll|auto|inherit

За замовчуванням overflow приймає значення visible, яке повідомляє браузеру, щоб він відображав вміст, що не вмістився в контейнері. Результат можна побачити на прикладі вище.

Правило приховує все, що не міститься у контейнері:

Значення scroll відображає в елементі по вертикалі та горизонталі смуги прокручування навіть у тому випадку, якщо весь вміст міститься:

Текст першого абзацу

Текст другого абзацу

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

Текст першого абзацу

Текст другого абзацу

Результат:

Для налаштування смуг прокручування також можна використовувати атрибути стилю overflow-x та overflow-y, які дозволяють налаштовувати відображення прокручування по окремих осях. Таким чином відповідає за горизонтальну вісь, а за вертикальну вісь.

Тому якщо вам, наприклад, потрібно, щоб в абзаці горизонтальна прокручування не з'являлася ніколи, а вертикальна з'являлася тільки за потребою, то достатньо написати наступне правило css:

p(overflow-x:hidden;overflow-y:auto;)

І завдання буде вирішено.

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

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

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

Фіксована ширина макетної сітки

Верстку заганяють у горизонтальний габарит 960-980 пікселів (щоб на більшості пристроїв у більшості дозволів все входило), що при великих горизонтальних розмірах вікна виглядає якось мерзлякувато - тонка вертикальна смуга корисного вмісту сторінки і величезні марні поля невикористання.

«Гумова» макетна сітка по ширині вікна

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

Хочу запропонувати нехитрий варіант рішення – обмежити мінімальний горизонтальний розмір фіксованим значенням у пікселях, а максимальний зробити відносним у відсотковому співвідношенні до ширини вікна. Це дуже банально вирішується простими засобами ще двох версій специфікації CSS.

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

Ще раз акцентую увагу:у пості не йдеться про рішення для всіх видів пристроїв та всі діапазони дозволів. В рамках одного макету це завдання не вирішуване в принципі, Для її вирішення так чи інакше знадобиться кілька макетів. Мухи окремо, котлети окремо.

Створюємо контейнер макету:
...
Оформляємо його невигадливим кодом стилю:
div.page-container ( min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; )
Однак цього рішення комусь може здатися мало через те, що при дуже великих горизонтальних розмірах вікна знову проявляються проблеми з довжиною рядків. Це вирішується настільки ж простим додатковим прийомом: створення додаткового зовнішнього контейнера всередині вже описаного та обмеження його максимальної ширини фіксованим значенням (мені суб'єктивно здається, що найкраще підходять значення в діапазоні 1400-1600 пікселів). Знову ж таки використовуємо лише засоби CSS 2.0. Таке рішення замість запропонованого у першому коментарі простого додавання ширини у відсотках для вихідного контейнера працюватиме ще й у IE, який аж до 9 версії не розуміє одночасної вказівки значень.

Доповнюємо HTML:
...

І трохи змінюємо CSS:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 auto;
Як бачите - рішення дуже просто і досить універсально, може застосовуватися для будь-яких блокових елементів.

Привіт, шановний читач.

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

Перед вивченням цього уроку пройдіть попередні уроки:

Теорія та практика

Минулого уроку ми розглянули що таке блокова модель, внутрішні та зовнішні відступи. У цьому вся ми розглянемо лише дві властивості: висоту і ширину блоку. Висота в CSS визначається властивістю height , а ширина властивістю width . Відразу подивимося в коді на реальному прикладі (візьмемо приклад з минулого уроку):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html > <head > <title >Головна</ title > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > <body > <div id = "content" > <div class = "firstPar" > <p > Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna no purus fermentum egestas ac eu nulla.</ p > <p > Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</ p > </ div > <div class = "secondPar" > <p > Cras</ p > <ul > <li > amet condimentum</ li > <li > aliquam volutpat</ li > <li > elementum interdum</ li > </ ul > </ div > </ div > </ body > </ html >

А в CSS для кожного блоку