Курс CSS. Урок 40. Максимальна і мінімальна ширина сайту.
Курс CSS. Урок 40. Максимальна і мінімальна ширина сайту. Максі і міні ширина. Раніше ми вивчили властивість вирівнювання блоку по ширині (наприклад, width: 200px; і т.п.). Крім властивості width на практиці також широко використовуються гнучкіші властивості max-width (максимальна ширина елемента) і min-width (мінімальна ширина елемента). Часто ці властивості використовуються спільно, коли дизайнер хоче забезпечити задовільний вигляд сторінки при будь-якому дозволі екрану користувача і при будь-яких його діях щодо зменшення ширини вікна.
Курс CSS. Урок 40.
Максимальна і мінімальна ширина сайту.
Коротке нагадування:
На уроці 19 ми вивчили властивість вирівнювання блоку по ширині (наприклад, width: 200px; і т.п.).
Крім властивості width на практиці також широко використовуються гнучкіші властивості max-width (максимальна ширина елемента) і min-width (мінімальна ширина елемента).
Часто ці властивості використовуються спільно, коли дизайнер хоче забезпечити задовільний вигляд сторінки при будь-якому дозволі екрану користувача і при будь-яких його діях щодо зменшення ширини вікна.
Розглянемо роботу властивостей max-width і min-width на прикладі.
У цьому блоці відсутні властивості визначення ширини width, max-width, min-width.
Ширина блоку визначається автоматично і повністю залежить від дозволу екрану і ширини батьківського елементу.
У цьому блоці задані властивості визначення ширини:
max-width: 650px;
min-width: 600px;
Величина ширини блоку не може виходити за межі зазначених значень.
Тепер спробуйте міняти вручну ширину вікна браузера. Перший блок буде змінювати свою ширину в залежності від ширини батьківського блоку, а другий блок в рамках діапазону 600-650 пікселів.
Зверніть увагу, що властивості max-width і min-width не включають в себе значення паддінгов (padding), кордонів (borders) і Маржине (margins).
Тепер перейдемо до теорії.
Властивість max-width: може мати наступні значення:- max-width: none; - Максимальна ширина не задана взагалі. Це значення за замовчуванням. (No maximum width. This is default.)
- max-width: length; - Визначає максимальну ширину в пікселях (px), в cm, і т.д. Приклад: max-width: 650px; (Defines the maximum width in px, cm, etc.)
- max-width:% - Визначає максимальну ширину у відсотках до містить блоку. Приклад: max-width: 50%; (Defines the maximum width in percent of the containing block)
- max-width: inherit - Визначає, що значення властивості max-width має бути успадковані від батьківського елемента. (Specifies that the value of the max-width property should be inherited from the parent element)
Властивість min-width: може мати наступні значення:
- min-width: length; - Визначає мінімальну ширину в пікселях (px), в cm, і т.д. Значення за замовчуванням: 0. Приклад: min-width: 600px; (Defines the minimum width in px, cm, etc. Default value: 0.)
- min-width:% - Визначає мінімальну ширину у відсотках до містить блоку. Приклад: min-width: 50%; (Defines the minimum width in percent of the containing block)
- min-width: inherit - Визначає, що значення властивості min-width має бути успадковані від батьківського елемента. (Specifies that the value of the min-width property should be inherited from the parent element)
У прикладі використовували такі правила для стилів:
У прикладі використовували наступний код HTML (ключові моменти):
Створені нові класи в файлі стилів CSS і код HTML будемо також використовувати в нашому черговому навчальному тестовому прикладі.
css_040_001.html ← клікніть, щоб подивитися, як виглядає приклад на даному сайті.
css_040_001.zip ← скачайте приклад, щоб встановити на свій сайт.
***** Машина-Функціонал для пересування по сторінках курсу CSS *****
Пошук. Перший Попередній Випадок Наступний Останній. № /