Підручник CSS 3. Стаття "Розміри блочних елементів в CSS"
- Зміна моделі обчислення ширини і висоти елементів
- Управління переповненням блокових елементів
- Переповнення за певною осі
- Мінімальні і максимальні значення ширини та висоти блочного елемента
- Які прийоми CSS треба обов'язково усвідомити з цього прикладу:
- Питання і завдання по темі
Ця об'ємна стаття підручника буде присвячена важливим темам, завдання яких полягає в тому, щоб розставити по поличках методи роботи з блочними елементами, об'яніть читачеві для чого застосовується зміна моделі обчислення ширини і висоти елементів, як управляти переповненням блокових елементів, і як працювати з мінімальними і максимальними розмірами елементів.
При вивченні блокової моделі CSS ми розібрали, що властивості width і height встановлюють ширину і висоту внутрішньої області елемента (content area), яка може містити текст, зображення та інші елементи.
У блокової моделі CSS існує різниця між значеннями ширини і висоти, які ви задаєте для елемента і розміром простору, яке браузер резервує для його відображення. Загальна ширина і висота елементів являє собою область вікна браузера, яка складається з ширини і висоти внутрішніх відступів, меж і зазначених для них призначених для користувача значень.
Мал. 99 Схема обчислення загальної ширини і висоти елементів.
Загальна ширина елемента обчислюється за формулою:
width (Ширина) + padding-left (Лівий внутрішній відступ) + padding-right (Правий внутрішній відступ) + border-left (Ліва межа) + border-right (Права межа).
Загальна висота елемента обчислюється за формулою:
height (Висота) + padding-top (Верхній внутрішній відступ) + padding-bottom (Нижній внутрішній відступ) + border-top (Верхня межа) + border-bottom (Нижня межа).
Припустимо, у нас є такі стилі для елемента <Div> :
div{width: 150px; / * Встановлюємо ширину елемента * / height: 150px; / * Встановлюємо висоту елемента * / padding: 10px; / * Встановлюємо внутрішні відступи елемента * / border: 5px; / * Встановлюємо межі елементу * /}
Для розміщення елементу <Div> браузеру необхідно підготувати наступний простір:
Загальна ширина елемента:
150 пікселів (для користувача значення ширини) + 10 пікселів (лівий внутрішній відступ) + 10 пікселів (правий внутрішній відступ) + 5 пікселів (ліва межа) + 5 пікселів (права межа) = 180 пікселів.
Загальна висота елемента:
150 пікселів (для користувача значення висоти) + 10 пікселів (нижній внутрішній відступ) + 10 пікселів (верхній внутрішній відступ) + 5 пікселів (нижня межа) + 5 пікселів (верхня межа) = 180 пікселів.
І так, ми з Вами розглянули, як класично відбувається обчислення загальної ширини і висоти елементів. Мінуси цієї моделі полягають в тому, що вам необхідно проводити математичні обчислення, щоб зрозуміти яку дійсно ширину, або висоту має той, чи інший елемент. Чи зручно це?
Зміна моделі обчислення ширини і висоти елементів
З виходом стандарту CSS 3 додано властивість box-sizing 
, Воно дозволяє змінити, застосовується за умовчанням CSS модель, за допомогою якої обчислюються ширина і висота елементів.
Для того, щоб зрозуміти чи варто нам використовувати альтернативні способи обчислення ширини і висоти елементів, давайте розглянемо приклад, в якому створимо чотири блоки однієї ширини, при цьому ми будемо використовувати процентні значення:
<! DOCTYPE html> <html> <head> <title> Приклад обчислення ширини і висоти елементів </ title> <style> div {display: inline-block; / * Встановлюємо елементи <div> як блочно-рядкові (вибудовуємо в лінійку) * / width: 25%; / * Встановлюємо ширину елемента * / height: 100px; / * Встановлюємо висоту елемента * /} .test {background-color: red; / * Задаємо колір заднього фону * /} .test2 {background-color: green; / * Задаємо колір заднього фону * /} .test3 {background-color: blue; / * Задаємо колір заднього фону * /} .test4 {background-color: yellow; / * Задаємо колір заднього фону * /} </ style> </ head> <body> / * обов'язково прочитайте пояснення нижче * / <div class = "test"> </ div> <div class = "test2"> </ div> <div class = "test3"> </ div> <div class = "test4"> </ div> </ body> </ html>
Зверніть увагу на важливий момент - все чотири блоки розміщені в один рядок.
Це дуже тонкий момент, справа в тому, що коли ви використовуєте display : Inline-block браузер розцінює перенесення рядка як символ пробілу, і як наслідок, додає після кожного блоку 3-4px порожнього простору в залежності від браузера і шрифту користувача. По суті це є междусловних інтервалом, так як блок розцінюється в даному випадку як слово. Може на даному етапі цей момент для вас не до кінця зрозумілий, просто запам'ятайте його, щоб надалі випадково не втратити пару годин, коли у вас буде «з'їжджати» якийсь блок, або список в панелі навігації через раптом з'явилися «Не зрозуміло звідки пікселів ». Я людина проста: бачу незрозумілі пікселі при display : Inline-block - пишу елементи в лінійку без пробілів.
В результаті у нас повинно вийти чотири різнокольорових блоку, розташованих в лінійку:
Ріс.100 Приклад обчислення ширини і висоти елементів.
А тепер технічне завдання змінилося, і Вам необхідно до кожного непарному блоку додати суцільну кордон праворуч розміром 5px. Для цього ми створимо наступний стиль:
div: nth-child (odd){/ * вибираємо кожен непарний блок всередині батьківського елементу * / border-right: 5px solid; / * Додаємо суцільну кордон праворуч розміром 5px * /}
Тепер додамо стиль до нашого коду і подивимося, що у нас з цього вийде.
<! DOCTYPE html> <html> <head> <title> Приклад обчислення ширини і висоти елементів у відсотках </ title> <style> div {display: inline-block; / * Встановлюємо елементи <div> як блочно-рядкові (вибудовуємо в лінійку) * / width: 25%; / * Встановлюємо ширину елемента * / height: 100px; / * Встановлюємо висоту елемента * /} div: nth-child (odd) {/ * вибираємо кожен непарний блок всередині батьківського елементу * / border-right: 5px solid; / * Додаємо суцільну кордон праворуч розміром 5px * /} .test {background-color: red; / * Задаємо колір заднього фону * /} .test2 {background-color: green; / * Задаємо колір заднього фону * /} .test3 {background-color: blue; / * Задаємо колір заднього фону * /} .test4 {background-color: yellow; / * Задаємо колір заднього фону * /} </ style> </ head> <body> <div class = "test"> </ div> <div class = "test2"> </ div> <div class = "test3 "> </ div> <div class =" test4 "> </ div> </ body> </ html>
Як ви можете помітити на зображенні нижче, нас чекає розчарування, так як наш макет «поплив»:
Мал. 101 Приклад обчислення ширини і висоти елементів у відсотках.
Які у нас є варіанти, щоб виправити наш макет?
Варіанта два:
- Перший - брати в руки калькулятор і вираховувати відсотки, які стали займати елементи в нашому документі.
- Другий - використовувати альтернативну модель обчислення ширини і висоти елементів.
У нашому випадку я вважаю, що необхідно вибрати другий варіант:
<! DOCTYPE html> <html> <head> <title> Приклад використання властивості box-sizing </ title> <style> div {display: inline-block; / * Встановлюємо елементи <div> як блочно-рядкові (вибудовуємо в лінійку) * / width: 25%; / * Встановлюємо ширину елемента * / height: 100px; / * Встановлюємо висоту елемента * / box-sizing: border-box; / * Змінюємо модель обчислення ширини і висоти елементів * /} div: nth-child (odd) {border-right: 5px solid; / * До кожного непарному блоку додаємо суцільну кордон справа чорного кольору розміром 5px. * /} .Test {background-color: red; / * Задаємо колір заднього фону * /} .test2 {background-color: green; / * Задаємо колір заднього фону * /} .test3 {background-color: blue; / * Задаємо колір заднього фону * /} .test4 {background-color: yellow; / * Задаємо колір заднього фону * /} </ style> </ head> <body> <div class = "test"> </ div> <div class = "test2"> </ div> <div class = "test3 "> </ div> <div class =" test4 "> </ div> </ body> </ html>
Ми використовували CSS властивість box-sizing зі значенням border-box, що дозволило нам змінити модель обчислення ширини і висоти елементів.
Відмітна особливість даної моделі полягає в тому, що значення властивості ширини ( width ) І висоти ( height ) Включають в себе зміст елемента, кордону ( border ) І внутрішні відступи ( padding ).
У нашому випадку це рятує ситуацію, і нам не доведеться робити якихось обчислень, і в подальшому бояться будь-яких змін, які можуть знадобитися для наших елементів. Залишимо ці непотрібні обчислення на стороні браузера і подивимося на результат нашого прикладу:
Ріс.102 Приклад використання властивості box-sizing.
Для остаточного розуміння цієї моделі обчислення ширини і висоти елементів, закріпимо отримані знання на наступному прикладі:
<! DOCTYPE html> <html> <head> <title> Приклад зміни моделі обчислення ширини і висоти елементів </ title> <style> div {display: inline-block; / * Встановлюємо елементи <div> як блочно-рядкові (вибудовуємо в лінійку) * / width: 150px; / * Встановлюємо ширину блоку * / height: 150px; / * Встановлюємо висоту блоку * / margin: 10px; / * Встановлюємо зовнішній відступ для всіх сторін * / padding: 10px; / * Встановлюємо внутрішній відступ для всіх сторін * / border: 10px solid orange; / * Встановлюємо суцільну кордон 10px оранжевого кольору * / background: khaki; } .Test {box-sizing: content-box; / * Ширина і висота елемента включають в себе тільки зміст елементу (за замовчуванням) * /} .test2 {box-sizing: border-box; / * Ширина і висота елемента включають в себе зміст елемента, кордону (border) і внутрішні відступи (padding) * /} </ style> </ head> <body> <div class = "test"> content-box </ div > <div class = "test2"> border-box </ div> </ body> </ html>
Значення content-box властивості box-sizing є значенням за замовчуванням і проводить розрахунок загальної ширини і висоти елемента за класичною схемою. На прикладі ширини:
150 пікселів (для користувача значення ширини) + 10 пікселів (лівий внутрішній відступ) + 10 пікселів (правий внутрішній відступ) + 10 пікселів (ліва межа) + 10 пікселів (права межа) = 190 пікселів.
Що стосується другого елементу, до якого ми застосували властивість box-sizing зі значенням border-box, то призначене для користувача значення ширини і висоти елемента вже включають в себе зміст елемента, кордону ( border ) І внутрішні відступи ( padding ). У більшості випадків застосування властивості box-sizing зі значенням border-box переважно на сторінках, так як робить очевидним кінцеві розміри елемента і дозволяє уникнути деяких непередбачених ситуацій розглянутих вище.
Результат нашого прикладу:
Мал. 103 Приклад зміни моделі обчислення ширини і висоти елементів (властивість box-sizing).
Управління переповненням блокових елементів
У процесі верстки у вас будуть виникати такі ситуації, коли вміст елемента буде відображатися за межами кордонів елемента. За замовчуванням браузер відображає такий вміст (переповнення елемента відображається), що в деяких випадках призводить до візуальних помилок. За таку поведінку браузера відповідає CSS властивість overflow . Розглянемо його можливі значення:
Значення Опис visible Переповнення не обрезается, вміст виходить за межі розмірів елемента. Це значення за замовчуванням. hidden Переповнення обрізається (контент, який виходить за розміри буде невидимим). scroll Переповнення обрізається, але додається смуга прокрутки, що дозволяє побачити вміст, який виходить із заданих розмірів. auto Якщо переповнення обрізається, то смуга прокрутки буде додана автоматично, щоб побачити вміст, який виходить із заданих розмірів.
Давайте розглянемо наступний приклад:
<! DOCTYPE html> <html> <head> <title> Приклад управління переповненням елемента </ title> <style> div {display: inline-block; / * Встановлюємо елементи <div> як блочно-рядкові (вибудовуємо в лінійку) * / width: 125px; / * Встановлюємо ширину блоку * / height: 100px; / * Встановлюємо висоту блоку * / padding: 5px; / * Встановлюємо внутрішній відступ для всіх сторін * / border: 1px solid orange; / * Встановлюємо суцільну кордон 1px оранжевого кольору * / vertical-align: top; / * Верх елемента вирівнюється по верху найвищого елемента в рядку (вертикальне позиціонування) * /} .test {overflow: visible; / * Переповнення не обрезается * /} .test2 {overflow: hidden; / * Переповнення обрізається * /} .test3 {overflow: scroll; / * Переповнення обрізається, але додається смуга прокрутки * /} .test4 {overflow: auto; / * Якщо переповнення обрізається, то смуга прокрутки буде додана автоматично * /} </ style> </ head> <body> <div class = "test"> <p> overflow: visible </ p> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> <div class = "test2"> <p> overflow: hidden </ p> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> <div class = "test3"> <p> overflow: scroll </ p> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> <div class = "test4"> <p> overflow: auto </ p> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> </ body> </ html>
В даному прикладі ми розмістили чотири блоки фіксованої ширини і висоти, для яких вказали різні значення CSS властивості overflow :
- Перший блок (значення visible) - вміст виходить за межі елементу (значення за замовчуванням).
- Другий блок (значення hidden) - вміст, яке переповнює елемент обрізається.
- Третій блок (значення scroll) - переповнення обрізається, але додається смуга прокрутки.
- Четвертий блок (значення auto) - як і при значенні scroll, тільки смуга прокрутки буде додана автоматично, якщо відбудеться переповнення блоку за певною осі (x - горизонтальної, або y - вертикальної), а не відображається на сторінці постійно.
Результат нашого прикладу:
Мал. 104 Приклад управління переповненням елемента.
Переповнення за певною осі
З виходом стандарту CSS 3 були додані властивості, які здатні управляти окремо горизонтальним переповненням (вісь x) - overflow-x і вертикальним переповненням (вісь y) - overflow-y . На відміну від властивості overflow , Дані властивості відповідають тільки за одну вісь (x, або y) при цьому значення і синтаксис аналогічний властивості overflow (Таблиця вище).
Давайте розглянемо приклад, в якому нам необхідно додати смугу прокрутки для блоку тексту, якщо вміст переповнить елемент по горизонталі:
<! DOCTYPE html> <html> <head> <title> Приклад управління переповненням елемента по горизонтальній осі </ title> <style> pre {width: 300px; / * Встановлюємо ширину елемента * / overflow-x: scroll; / * Переповнення обрізається, але додається смуга прокрутки * / background-color: orange; / * Задаємо колір заднього фону * /} </ style> </ head> <body> <pre> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Pre> </ body> </ html>
В даному прикладі ми використовували елемент <Pre> , Який зберігає всі прогалини і переноси рядків (текст може виходити з відведеною області), що нам і допомогло продемонструвати можливості властивості overflow-x . У нашому випадку текст вийшов за межі ширини розміру елемента <Pre> і браузер додав горизонтальний бігунок прокрутки, що нам і потрібно.
Результат нашого прикладу:
Мал. 105 Приклад управління переповненням елемента по горизонтальній осі.
Мінімальні і максимальні значення ширини та висоти блочного елемента
Заключна тема цієї статті, яку необхідно освоїти цю вказівку мінімальних і максимальних розмірів для блокових елементів.
CSS, крім явної вказівки значень ширини і висоти елементів (властивості width і height ) Пропонує такі властивості, які дозволяють вказати для блокових елементів їх мінімальні, або максимальні значення:
- min-width (Встановлює мінімальну ширину елемента).
- max-width (Встановлює максимальну ширину елемента).
- min-height (Встановлює мінімальну висоту елемента).
- max-height (Встановлює максимальну висоту елемента).
На просторах інтернет не рідко можна зустріти таке оформлення сайтів, де основний вміст знаходиться по центру, а на задньому фоні знаходяться якісь рекламні, або графічні матеріали. Зробимо для цього схожу початкову розмітку:
<! DOCTYPE html> <html> <head> <title> Мінімальна висота і максимальна ширина для блокових елементів </ title> <style>: root {/ * псевдоклас: root визначає кореневий елемент документа * / background-color: black; / * Задаємо колір заднього фону * /} html {height: 100%; / * Задаємо висоту елемента у відсотках * / background-color: white; / * Задаємо колір заднього фону * /} body {margin: 0 auto; / * Задаємо зовнішні відступи елемента (0 для верхньої та нижньої частини, автоматично зліва і справа) * / max-width: 800px; / * Задаємо максимальну ширину елемента в пікселях * / height: 100%; / * Задаємо висоту елемента у відсотках * /} div {min-height: 100%; / * Задаємо мінімальну висоту елемента у відсотках * /} </ style> </ head> <body> <div> </ div> </ body> </ html>
Які прийоми CSS треба обов'язково усвідомити з цього прикладу:
Як встановити висоту елемента 100% при будь-якому дозволі?
Для початку ми повинні встановити для батьків елемента розмір висоти 100%. У нашому випадку необхідно встановити 100% для елементів <Html> і <Body> , І тільки після цього ми встановлюємо для нашого блоку розмір мінімальної висоти 100% ( min-height ). У підсумку це призводить до того, що у нас навіть порожній блок розтягується на весь екран.
Як горизонтально центрировать сторінку?
Для цього необхідно встановити зовнішні відступи елемента зверху і знизу рівними 0 (нулю), а зліва і справа встановити як auto (автоматично): margin: 0 auto; У нашому випадку ми центруємо сторінку, використовуючи такий стиль для елемента <Body> .
Крім того, ми вказуємо для елемента <Body> максимальне значення ширина дорівнює 800px (якщо дозвіл екрану не буде вміщати 800px, то значення дорівнюватиме розміру екрана браузера (менше цього числа), але елемент в якому встановлений максимальний розмір не може розтягнутися більше цього числа).
Наприклад, якби ми вказали min-width : 100px, то це б означало, що елемент не може бути менше ніж 100px (якщо екран буде менше, то браузер додасть смугу прокрутки).Як встановити стиль, який буде пріоритетною елемента <html> ?
псевдоклас : root
, Як і селектор типу html роблять одне і теж (вибирають одні й ті ж елементи), але псевдоклас : root має більш високу специфічність (болеее значимий при визначенні стилю). Ви можете використовувати такий прийом в майбутньому для установки зображень в якості заднього фону. Докладне вивчення роботи з заднім фоном ми розглянемо далі в підручнику в статті " Робота з фоном елемента в CSS ".
Результат нашого прикладу наведено на зображенні нижче:
Мал. 106 Приклад установки мінімальної висоти і максимальної ширини для блокових елементів.
Питання і завдання по темі
Перед тим як перейти до вивчення наступної теми пройдіть практичне завдання:
- Використовуючи отримані знання складіть наступний документ, присвячений білому тигру (уважно вивчіть сторінку перед виконанням):
Практичне завдання № 26.
Зверніть увагу, що при зменшенні розміру вікна браузера сторінка приймає наступний вигляд:
Практичне завдання № 26 (при зменшенні Розмірів вікна). Звертаю Вашу увагу, що для виконання цього завдання Вам необхідні знання з минулих статей підручника.
Якщо у Вас виникають труднощі при виконанні практичного завдання, Ви завжди можете відкрити приклад в окремому вікні і проінспектувати сторінку, щоб зрозуміти який код CSS був використаний.
Які у нас є варіанти, щоб виправити наш макет?
Як горизонтально центрировать сторінку?