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

При вивченні блокової моделі CSS ми розібрали, що властивості width і height встановлюють ширину та висоту внутрішньої області елемента ( content area), яка може містити текст, зображення та інші елементи.

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

Загальна ширина елемента обчислюється за такою формулою:

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

Для остаточного розуміння цієї моделі обчислення ширини та висоти елементів, закріпимо отримані знання на наступному прикладі:

Значення content-box властивості є значенням за промовчанням і здійснює розрахунок загальної ширини та висоти елемента за класичною схемою. На прикладі ширини:

150 пікселів (значення ширини) + 10 пікселів (лівий внутрішній відступ) + 10 пікселів (правий внутрішній відступ) + 10 пікселів (ліва межа) + 10 пікселів (правий кордон) = 190 пікселів .

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

Результат нашого прикладу:

Управління переповненням блокових елементів

У процесі верстки у вас виникатимуть такі ситуації, коли вміст елемента відображатиметься поза межами елемента. За промовчанням браузер відображає такий вміст (переповнення елемента відображається), що в деяких випадках призводить до візуальних помилок. За таку поведінку браузера відповідає CSS властивість overflow. Розглянемо його можливі значення:

Давайте розглянемо наступний приклад:

У цьому прикладі ми розмістили чотириблоку фіксованої ширини та висоти, для яких вказали різні значення CSS властивості overflow :

• Перший блок(значення visible ) – вміст виходить за межі елемента (значення за промовчанням).
• Другий блок(значення hidden) – вміст, який переповнює елемент обрізається.
• Третій блок(значення scroll ) – переповнення обрізається, але додається смуга прокручування.
• Четвертий блок(значення auto ) – як і при значенні scroll , тільки смуга прокручування буде додана автоматично, якщо відбудеться переповнення блоку певної осі ( x- горизонтальною, або y- вертикальної), а не відображається на сторінці постійно.

Результат нашого прикладу.

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

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

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

Мал. 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 залишимо на різні зовнішні та внутрішні відступи, рамки і т.д.

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

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

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

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

#sidebar( padding: 10px 20px; border: 2px solid black; )

У сучасній верстці на веб-сторінках часто можна зустріти блоки, які займають 100% ширини сторінки.

Це виглядає так:

Давайте розберемося, яким чином можна досягти такого ефекту.

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

Дивимося на результат, що вийшов.

Загалом добре, але з боків блоку видно невеликі відступи, які псують усю картину. Хотілося б їх усунути.

Перше, що спадає на думку, це привласнити блоку властивість width:100%. Але це ніяк не змінить ситуацію. Можете самі в цьому переконатись.

Тому властивість width:100% можете сміливо прибирати.

У чому реальна причина таких відступів?

Справа в тому, що блок div, ширину якого ми хочемо зробити 100%, зберігається в двох батьківських елементах body і html. За замовчуванням, браузери задають їм певні значення властивостей padding і margin.

Для того, щоб вирішити проблему, потрібно лише обнулити ці відступи. Зробити це дуже просто:

Дивимось, як виглядає блок тепер.

Все чудово, простір, що був з обох боків, був прибраний.

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

Послуга верстки посадкових сторінок.

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

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

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

Щоб застосувати верстку для різних екранів, допоможе правило стилів @media. Наприклад,

@media (max-width:1024px;) (

All (Padding: 10px;)

Цей запис говорить про те, що для класу allбуде застосовано відступи в 10pxу тому випадку, коли роздільна здатність екрану буде до 1024px.

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

@media (min-width:1024px;) and (max-width:1640px) (
.all (padding: 10px;)

table (width:80%)
}

У цьому випадку властивості стилів будуть застосовані для екранів, які використовують роздільну здатність від 1024 до 1640px.

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

Коли потрібно вказати правила лише для мобільних пристроїв (планшети, смартфони), то в цьому випадку застосовується запис max-device-widthабо min-device-widthдля позначення максимального та мінімального дозволів відповідно.

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

@media screen (max-width:1380px) ( … )

Вона означає, що стилі будуть застосовані тільки до настільних комп'ютерів, з шириною екрана до 1380px.

Так само, замість screen, можна вказувати handheld(мобільні пристрої), print(принтери), проектування(проектори), tv(Телевізори).

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

width у відсотках%

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

Ви навіть можете використовувати і щоб обмежити максимальний і мінімальний розмір картинки!

percent width layout

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Висота div дорівнює ширині CSS

Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros не fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

Адаптуємо сторінку під розмір вікна браузера

В даний час існує безліч цифрових пристроїв з різними розмірами екранів, від смартфонів до телевізорів з діагоналлю 42 дюйми та вище. Як годиться, на всіх цих пристроях різні дозволи (приблизно від 320х240 до 1920х1200) і під кожну з цих дозволів часто необхідно адаптувати веб-сторінку. Робиться це за допомогою media queries- Частини специфікації CSS3, що дозволяє задати область дії селектора. Media queries являє собою блок із зазначенням параметрів пристрою виведення, такі як тип, ширина та висота вікна браузера, роздільна здатність, орієнтація у просторі. Починається все з правила @media, за яким записуються типи пристроїв, логічні оператори та медіа-функції. У списку нижче зазначимо всі 3 логічні оператори.

1. and- Логічне «І», застосовується для об'єднання кількох умов;
2. not— логічне «НЕ», застосовується для заперечення будь-якої умови;
3. , — логічне «АБО», якщо хоча б одну з умов дотримується, тоді стиль буде застосовано.

Тепер розглянемо медіафункції. З їхньою допомогою задаються технічні характеристики пристроїв (наприклад розмір вікна браузера). Їх 12 штук зараз.

1. aspect-ratio (min-aspect-ratio, max-aspect-ratio)— Визначає співвідношення ширини до висоти області, що відображається. Позначається 2/3, наприклад, тобто 2 числа, розділені знаком «/»;
2. color (min-color, max-color)- Визначає кількість біт на один канал кольору. Значення min-color:2позначає, що кожен із трьох каналів колірної системи RGB може відображати 2 2 відтінків і всі разом 4*4*4=64 різних кольорів. Якщо значення не зазначено взагалі, перевіряється кольорове воно чи ні;
3. color-index (min-color-index, max-color-index)- Визначає кількість кольорів, яке підтримує пристрій;
4. device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)- Визначає співвідношення сторін екрана пристрою (2 числа через слеш, наприклад 4/3);
5. device-height (min-device-height, max-device-height)- Визначає всю доступну висоту екрана пристрою або друкованої сторінки;
6. device-width (min-device-width, max-device-width)- Визначає всю доступну ширину екрана пристрою або друкованої сторінки;
7. grid- Визначає, що це пристрій з фіксованим розміром символів (термінал або телефон);
8. height (min-height, max-height)— задає висоту області, що відображається;
9. monochrome (min-monochrome, max-monochrome)- Визначає, що пристрій монохромний, у разі присвоєння будь-якого значення, позначається кількість біт на один піксель. Наприклад, значення 8 рівнозначно 2 8 відтінків кольору монохромного дисплея;
10. orientation- Визначає, що пристрій знаходиться в альбомному режимі, значення landscapeабо портретне значення portrait;
11. resolution (min-resolution, max-resolution)- Визначає дозвіл пристрою в dpi (точок на дюйм) або dpcm (точок на сантиметр);
12. scan- Визначає тип розгортки телевізора - чересрядкова (interlace) або прогресивна (progressive). При надстроковій розгортці телевізор спочатку показує непарні рядки кадру, потім парні, в прогресивній розгортці кадр передається і показується повністю;
13. width (min-width, max-width)— задає ширину області, що відображається;

Нині ж приклад.

Розміри блокових елементів у CSS

Створимо веб-сторінку, а стиль для неї поставимо за допомогою media queries.

Це шапка сайту.

Головна | Новини | Про нас | Контакти

Це блок із контентом (основним вмістом сторінки).

Стаття 1 Стаття 2 Стаття 3 Стаття 4 Стаття 5

Це підвал.

Тепер задаємо таблицю стилів:

#main (
font-size:14px;
}
@media screen and (max-width:800px)(
#header(
background: #ff6633;
width:100%;
height:10%;
}
#topmenu(
text-align:center;
background-color: #ffcc66;
width:100%;
height:12%;
}
#topmenu a (
color:blue;
text-decoration: none;
}
#topmenu a:hover(
color:blue;
text-decoration: underline;
}
#content(
background-color: #ffccff;
float:left;
width:80%;
height:68%;
}
#sidebar(
float:left;
background-color: #ff9966;
width:20%;
height:68%;
}
#sidebar a (
display:block;
padding-bottom:3px;
color:blue;
text-decoration: none;
}
#sidebar a:hover(
color:blue;
text-decoration: underline;
}
#footer(
clear:both;
background-color: #ffff33;
width:100%;
height:10%;
}
}
@media screen and (min-width:800px)(
#main (
width:800px;
margin:0 auto;
}
#header(
background: #ff6633;
width:800px;
height:100px;
}
#topmenu(
text-align:center;
background-color: #ffcc66;
width:800px;
height:30px;
}
#topmenu a (
color:blue;
text-decoration: none;
}
#topmenu a:hover(
color:blue;
text-decoration: underline;
}
#content(
background-color: #ffccff;
float:left;
width:650px;
height:400px;
}
#sidebar(
float:left;
background-color: #ff9966;
width:150px;
height:400px;
}
#sidebar a (
display:block;
padding-bottom:3px;
color:blue;
text-decoration: none;
}
#sidebar a:hover(
color:blue;
text-decoration: underline;
}
#footer(
clear:both;
background-color: #ffff33;
width:800px;
height:50px;
}
}

Розглянемо тепер код. З html-документом все зрозуміло, підключаємо до нього стиль mediastyle.css. У таблиці стилів спочатку задаємо розмір шрифту. Далі говоримо, що якщо ширина екрана (вікна браузера) менше, ніж 800 пікселів, тоді для нього будуть виконуватися такі правила і задавати розміри всіх блоків у відсотках від ширини вікна. Якщо ж ширина екрана більше, ніж 800 пікселів, задаємо розміри всіх блоків у пікселях і встановлюємо розташування вмісту по центру сторінки, за допомогою значення властивості margin:0 auto;. Тут використовуємо для позиціонування плаваючі блоки. На цьому закінчимо вивчення CSS. Приклад створеної нами сторінки можна побачити тут. Докладніше вивчити каскадні таблиці стилів можна за допомогою різної літератури та всесвітньої павутини.

<<Предыдущая | В раздел

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

css властивості для визначення висоти та ширини блоку.

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

Розміри блоку можна змінювати використовуючи властивості height і width.

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

Ці властивості задаються не для всього блоку, а для його вмісту. Це потрібно пам'ятати тому що крім вмісту на розмір блоку впливають ще дві властивості – border та padding. За назвою можна зрозуміти, що border визначає кордон. На малюнку кордон позначений червоною лінією. Простір між кордоном та вмістом визначають за допомогою властивості padding. Якщо його не задати то текст на картинці нижче притиснеться до кордону.

Таким чином обчислюючи розмір блоку крім width та height потрібно враховувати padding та border. Для прикладу порахуємо розмір блоку для якого задані наступні значення

1. border:5pxsolidred;
2. padding:10px;
3. width:200px;

Ширина блоку 200px+10px*2+5px*2=230px

Щоб не забивати голову арифметикою і завжди точно знати розмір блоку, є властивість box-sizing. Приймає три значення.

1. content-box — Значення, задані у width і height, стосуються лише вмісту.
2. padding-box — Значення, задані в width і height, визначають розмір вмісту плюс розмір відступу (padding).
3. border-box — Значення, задані в width і height, визначають розмір вмісту плюс відступ (padding) плюс кордон (border)

Якщо в приклад вище додати рядок

розмір блоку буде заявлено 200px, а ширина вмісту зменшиться до 200px-10px*2-5px*2=170px.

margin як правильно встановити відстань між блоками.

Говорити про блоки та не згадати про margin буде неправильно тим більше розповісти є що. Для тих, хто не в курсі margin визначає вільний простір навколо блоку. На відміну від padding, тут не все так очевидно. Розглянемо два блоки один вкладений в інший. Задаємо вкладеному блоку margin: 10%. Відразу постає питання від чого відраховувати ці відсотки. Відсотки беруться від ширини батьківського елемента. При цьому неважливо визначаємо горизонтальні або вертикальні відступи. Відповідь, прямо скажемо, не очевидна, але якщо подивитися пояснення стає ясно чому обраний саме такий варіант.

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

Сірим на зображенні позначений батьківський блок. Всупереч нашим очікуванням margin використаний до дочірнього блоку не розсунув зверху та знизу кордону батьківського. Сталося це тому, що у батьківського блоку немає від чого відштовхуватися. У таких випадках margin виноситься на ружу і відштовхується від сусіднього блоку або меж блоку розташованого вище рівнем. Щоб блок відштовхувався від батьківського потрібно, щоб у батьківського блоку були задані padding або border або властивість overflow з будь-яким значенням крім visible.

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

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

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

,

,

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

Заборонено додавати всередину вбудованих елементів блокові (приклад 1).

Приклад 1. Використання блокових елементів

У цьому прикладі абзац (тег

) вставляється всередину контейнера

, а посилання (тег ) - в заголовок

. До речі, помилкою надійде навпаки — додати

у контейнер (

Ut wisi

), оскільки тег не відноситься до блокових елементів.

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

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

Ширина блокових елементів

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

в коді документа є один, то він займає всю вільну ширину вікна браузера і ширина блоку дорівнюватиме 100%. Варто розмістити один тег

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

Деякі браузери досить вільно трактують поняття ширини, хоча специфікації CSS чітко зазначено, що ширина складається з суми наступних параметрів: ширини самого блоку (width), відступів (margin), полів (padding) і меж (border). У прикладі 2 показано створення шару, в якому є всі ці компоненти.

Приклад 2. Ширина шару

В результаті цього прикладу отримаємо шар шириною 342 пікселі. На рис. 1 показано, із чого складається ширина шару.

Рис 1. Ширина блокового елемента

У тому випадку колиу коді не вказано, браузер Internet Explorer за ширину всього блоку набуває значення властивості width.

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

Для отримання універсального результату є кілька підходів. У прикладі 3 показано створення трьох шарів, ширина яких визначається у відсотках.

Приклад 3. Ширина шару у відсотках

Результат прикладу показано на рис. 2.

Мал. 2. Відображення ширини шарів у браузері

Ширина першого шару в даному прикладі (layer1) встановлена ​​як 100%, що призводить до відображення горизонтальної смуги прокручування. Для другого шару (layer2) ширина також задана 100%, але поля визначаються для внутрішнього абзацу (тег

). За рахунок цього ширина шару у всіх браузерах буде однаковою. До третього шару (layer3) взагалі не застосовується властивість width, тому воно визначається за умовчанням auto. У такому випадку шар займатиме всю ширину вікна браузера без будь-яких горизонтальних смуг.

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

Висота

З висотою блокових елементів справа аналогічна ширині. Браузер за висоту шару приймає значення якості height і додає до нього значення margin, padding і border. Якщо висота шару не встановлено явно, вона обчислюється автоматично виходячи з обсягу вмісту.

Допустимо, для шару встановлена ​​висота в пікселах, а вміст шару однозначно перевищує вказану висоту (приклад 4).

Приклад 4. Висота шару

Результат цього прикладу продемонстровано на рис. 3.

Мал. 3. Висота блоку у різних браузерах

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

Колір фону

Колір фону елемента найпростіше встановлювати через універсальну властивість background. Фоном у своїй заливається область, яка визначається значеннями width, height і padding (рис. 4).

Параметри для блоків у CSS

Область шару, що заповнюється фоновим кольором

Таким чином, margin не бере участі у формуванні кольорової області.

Межі

Через різницю в підходах браузерів при формуванні блокових елементів спостерігається і відмінність при відображенні меж. Браузер Internet Explorer 7 проводить рамку всередині блоку, а Firefox – зовні. Але якщо використовувати фонову заливку, то побачимо протилежну картину (рис. 5). А все тому, що Firefox (Opera) колір фону встановлює по зовнішньому краю кордону, а Internet Explorer - по внутрішньому. Починаючи з версії 8.0 Internet Explorer змінив стиль відображення рамки, вона проводиться всередині блоку, як і Firefox.

а. Internet Explorer 7

б. Firefox, Internet Explorer 8+

Мал. 5. Відображення рамки у браузерах

У прикладі 5 показано, як створити код для одержання такого кордону.

Приклад 5. Пунктирна рамка

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

Резюме

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

Специфікація CSS визначає, що висота та ширина елемента визначається не тільки значеннями height та width, але до них ще плюсується значення полів, відступів та кордонів. Браузери у цьому плані поділяються на дві частини: одні підтримують у цьому питанні специфікацію, інші ж її ігнорують і роблять по-своєму. Це створює проблеми розробникам, які хочуть створювати універсальні веб-сторінки. Можна лише порадити обмежено використовувати властивості width і height, оскільки за замовчуванням браузер застосовує аргумент auto, який змушує автоматично налаштовувати розміри елемента.

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

Навіщо написали таку HTML сторінку:

DIV Left

DIV Right

і до неї відповідний CSS файл стилів:

Div-main ( margin: 0 auto; padding: 20px; background: #eeee33; width: 320px; ) .div-left ( padding: 20px; background: #339933; float: left; width: 100px; ) .-div ( padding: 20px; background: #cc0033; float: right; width: 100px; )

Однак насправді ви отримаєте таку картинку:

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

Два способи як розтягнути розмір батьківського DIV за вмістом блоків, що входять до нього.

Раніше я використовував такий додатковий блок перед тегом батьківського DIV, що закриває:

Після чого зовнішній вигляд сторінки відповідав задуманому:

Другий спосіб, як змусити батьківський div розтягуватися по висоті дочірнього.

Можна зробити контейнер, що «самоочищається», через псевдоклас after:

Clear-fix:before, .clear-fix:after ( content: " "; display: table; ) .clear-fix:after ( clear: both; ) /* Милиці для ослика (Internet Explorer 6 і 7) */ . clear-fix ( *zoom: 1; )

А батьківському блоку додати відповідний клас:

Зовнішній вигляд сторінки так само відповідатиме задуманій верстці:

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

Відомо, що веб-дизайнер малює макет сайту, а верстальник робить верстку, тобто пише 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.

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