- Height і width - розміри області з контентом в CSS
- Overflow - приховування (hidden, visible) або прокрутка (scroll, auto)
- Height і width у відсотках - навіщо потрібен doctype
Привіт, шановні читачі блогу KtoNaNovenkogo.ru. Сьогодні ми поговоримо про те, як можна ставити розміри для області контенту за допомогою height і width і як налаштувати відображення цього контенту в разі, якщо його буде більше, ніж зможе поміститися в відведений для нього місце (css правило overflow зі значеннями hidden, scroll, auto).
У передостанній статті довідника ми розглянули з вами кілька основних правил, які використовуються в блокової верстці : margin (взаємодія з межами сусідніх елементів), border (рамка) і padding (Відстань від рамки до області з контентом). В тій статті ми не розглянули тільки те, якими правилами описується вміст, що зараз і спробуємо виправити.
Height і width - розміри області з контентом в CSS
Для цього в мовою стильової розмітки CSS передбачені правила описують ширину (width) і висоту (height) цієї самої області. Ширина буде визначатися розміром контейнера, тобто того простору, в якому стоять Html елементи. Як тільки ми її змінюємо, то вміст підлаштовується під цю ширину. А ось її висота залежить від його змісту.
Тобто, додавши трохи вмісту, ви тим самим збільшите висоту контейнера з ним, а якщо зменшите розмір контенту, то, відповідно, зменшиться висота. Ширина ж області з вмістом буде цілком і повністю залежати від широти контейнера, в якому контент укладено. Звідси робимо висновок, що ширина вмісту є зовнішнім фактором, а ось його висота - внутрішнім.
Правила, які регулюють дані розміри, називаються width і height. Нагадаю, що вони не обрізають зображення фізично, тому попередньо потрібно буде зменшити розмір фотографій (стиснути їх) і вже тільки потім завантажувати на сайт. У цих правил за замовчуванням використовується значення Auto (самостійний розрахунок - віддається на розсуд браузера).
Т.ч. абсолютно для всіх тегів, якщо значення width і height не задані в явному вигляді, вони будуть розраховуватися браузером автоматично, починаючи з самого зовнішнього елемента.
Ну, а крім Auto значеннями для них можуть служити величини в розмірах використовуваних в CSS або ж відсотки (про особливості використання відсотків читайте трохи нижче):
Самим зовнішнім елементом є тег Html, для якого допустима ширина контенту дорівнює області перегляду (розміром видимої частини екрану). Далі браузер буде розраховувати width для тега body і так далі, аж до потрібного нам елементу. У підсумку виходить, що ширина елемента буде підлаштовуватися під доступну йому (не зайняту іншими елементами) область і займати її цілком.
З цієї самої причини всі блокові елементи (читайте про них докладніше в статті про CSS правило display block ), Для яких не задано в явному вигляді значення width, будуть намагатися зайняти весь доступний їм місце по ширині, а при зміні області перегляду (наприклад, зменшення вікна браузера) горизонтальні розміри блокових елементів теж буде змінюватися відповідним чином.
До речі кажучи, має сенс ставити height і width тільки для блокових тегів, бо для рядків їх завдання ніякого сенсу не має і браузером цей код відпрацьовуватися не буде.
Але в той же час, якщо ми жорстко поставимо width для блочного елемента (наприклад, абзацу укладеного в контейнер DIV), а широту зовнішнього контейнери не будемо явно вказувати (браузер тоді буде для нього використовувати умолчательную значення Auto), то при зменшенні області перегляду ( вікна оглядача) може вийти так, що абзац вилізе за розміри контейнера Div, в якому він був укладений:
Це зайвий раз підтверджує, що широта області контенту є зовнішньої величиною, ніяк не пов'язаної з розміром контейнера, в якому це саме вміст укладено (запросто може вилазити за його межі). А ось з висотою, яка задається через height, такий фокус вже не пройде. Якщо ми збільшимо висоту параграфа, то автоматично збільшиться і висота контейнера Div, в якому він укладений.
Але крім всього вищеописаного можливий такий варіант, що ви задасте жорстко область з вмістом (наприклад, width і height для параграфа), але вміст при цьому в ці розміри не впишеться (тексту в параграфі, припустимо, виявиться більше). От саме для розрулювання схожих ситуацій і було придумано CSS правило overflow.
Overflow - приховування (hidden, visible) або прокрутка (scroll, auto)
Давайте для наочності розглянемо два абзаци йдуть один за одним в Html коді. Для наочності підсвітити області, відведені під низ, різним кольором за допомогою background :
<P style = "background: # FFC0C0;"> Текст першого абзацу </ p> <p style = "background: # C0FFC0;"> Текст другого </ p>
Оскільки width і height для цих параграфів не задані, то за замовчуванням браузер сам розраховує їх виходячи зі свого власного розуміння значення Auto. В результаті абзаци займають по ширині весь доступний їм місце, а по висоті відповідають висоті укладеного в них контенту.
Давайте тепер внесемо перша зміна і поставимо жорстко широту першого абзацу (width: 50px):
<P style = "background: # FFC0C0; width: 50px;"> Текст першого </ p> <p style = "background: # C0FFC0;"> Текст другого </ p>
В общем-то відбулося очікуване - розмір по горизонталі зменшився до заданої в width: 50px величини, ну, а висота параграфа як і раніше формується завдяки height: auto (умолчательную значенням). В результаті вона стала такою, щоб вмістити в себе весь текст.
Але давайте тепер обмежимо і висоту контейнера за допомогою height: 15px.
В результаті ми отримали, що текст в наш маленький контейнер абзацу вже не влазить і тому він благополучно наїхав на область свого сусіда. Ось саме для управління поведінкою контенту в подібних ситуаціях і служить правило overflow.
Overflow означає «сверхпоток» або, іншими словами, «переповнення контенту». Воно говорить про те, що має статися з вмістом, якщо він не вмістився у межі тієї області (контейнера), яка йому була відведена.
У Overflow є кілька допустимих значень, але за замовчуванням використовується visible (показувати):
Саме тому в нашому останньому прикладі текст верхнього абзацу наїхав на нижній (за замовчуванням використовувалося overflow: visible - показувати вміст не вмістилося в контейнер). Ми могли б використовувати іншу крайність - overflow: hidden. Тоді б усі, що не влізло всередині контейнера, не показувалася б на вебсторінці:
Інші два значення цього CSS властивості дозволяють скролить недоречний в контейнер вміст (щось схоже ми вже спостерігали, коли вивчали атрибути Html тега Frame ). Отже, scroll відобразить смуги прокрутки по вертикалі і горизонталі навіть в тому випадку, якщо вміст благополучно уміщається в відведеному для нього контейнері:
Але набагато більш логічним буде використання значення Auto для Overflow, якщо вам необхідно зробити смуги прокрутки. В цьому випадку браузер сам буде розраховувати, коли потрібно їх відображати і за якими саме осях.
Наприклад, в разі використання overflow: auto ми отримаємо можливість прокрутки тільки з тієї осі, де вміст не вміщується в межах контейнера:
<P style = "background: # FFC0C0; width: 100px; height: 30px; overflow: auto;"> Текст першого </ p> <p style = "background: # C0FFC0;"> Текст другого </ p>
Резюмуючи можна сказати, що Overflow дозволяє досить гнучко налаштувати варіанти показу контенту в тому випадку, коли він вилазить за межі свого контейнера. У вас буде можливість виїхав контент показувати (visible), не показувати (обрізати - hidden), або робити обов'язкову прокрутку (scroll) або ж прокрутку за потребою (auto).
Є ще варіанти написання цього правила відносяться до CSS3, але які підтримуються всіма браузерами, а значить їх можна буде сміливо використовувати. Я говорю про варіанти overflow-x і overflow-y, які дозволяють задавати або не ставити прокрутку по окремим осях (x - горизонтальна, y - вертикальна).
Якщо вам, наприклад, потрібно зробити так, щоб по горизонталі прокрутка не з'являлася ніколи, а по вертикалі з'являлася б тільки по необхідності (якщо контент не вміщується), то для Html елемента потрібно буде прописати overflow-x: hidden і overflow-y: auto . Все, задача буде вирішена, бо даний фінт вухами підтримується всіма браузерами.
Height і width у відсотках - навіщо потрібен doctype
Тепер давайте поговоримо про те, від чого вважається ширина задана в процентах. Пам'ятаєте, на початку статті я обіцяв на цьому ще загострити нашу увагу. Ну, власне, CSS правило width тут не є винятком і точно так же, як і padding і margin, вважається у відсотках від горизонтального розміру контейнера з контентом.
Кілька заплутаніше ситуація з висотою області контенту заданої в процентах. Було б логічно припустити, що аналогічно - від висоти контейнера. Але тут ми з вами починаємо стикатися з дуалізмом (двома моделями поведінки) - як робили раніше і як роблять зараз за прийнятими стандартами. У зв'язку з цим слід ще раз торкнутися теми режимів відображення і розглянуту нами раніше декларацію doctype .
Історично так склалося, що після прийняття стандартів залишалося все одно велика кількість документів, сформованих за старими правилами чистого мови Html і з ними потрібно було щось робити. В той же час стандарт мови Html теж розвивався (виділився мову стильової розмітки і застаріли деякі теги і атрибути), тому знадобилося якимось чином показати браузеру, за якими саме стандартам потрібно буде йому розбирати даний код.
Для того, щоб відокремити документи нові (які враховували всі з'явилися стандарти) і старі (які не враховують найчастіше нічого, крім чистого Html), компанією мелкософта було запропоновано використовувати невелику фішечки з тільки що з'явився тоді мови XML. Фішечка ця була службової і називається зараз декларація doctype.
Виглядати вона може по-різному (читайте про це докладніше в згаданій трохи вище статті), але завжди буде працювати такий варіант:
<! DOCTYPE HTML>
Таким чином браузер отримав маркер того, за якими стандартами йому розбирати документ. Якщо декларація doctype проставлена, тоді він переходить в режим відповідності стандартам (standarts mode). Якщо ж в коді документа на його першому рядку doctype оглядач не виявить (чи вона буде написана не правильно, що ідентично її відсутності), то тоді він переходить в так званий режим вивертів (quirks mode).
Документ, в якому відсутній doctype, в браузері буде відображатися таким чином, як ніби-то він дуже старий (старовинний). Якщо в цей же документ додати декларацію, то оглядач вже скине свій наліт старовини і почне працювати з кодом документа по всіх прийнятих зараз стандартам.
Ось тільки поняття старовини дуже різний. Яка, наприклад, старина може бути у популярного зараз оглядача Google Chrome, який з'явився-то тільки в 2008 році? У IE, природно, історія є і досить багата. Тому всі браузери будь-якої версії будуть відображати документ без декларації (в режимі quirks mode або вивертів) точно так же, як це б робив старовинний IE 5.5 , Бо саме ця версія вважається базовою.
Чому я так довго говорив про режими відображення браузерів? А тому, що для цих двох режимів завдання висоти (height) області контенту в процентах дуже сильно відрізняється по відношенню до розрахунку цієї самої висоти.
Завдання висоти (у відсотках) області з контентом в режимі проходження стандартів (standarts mode - коли прописаний правильний doctype на початку документа) буде взагалі неможливо, якщо не буде де-небудь задана висота для контейнера, в який укладено це вміст (задана вами в відсотках висота буде ігноруватися).
<! DOCTYPE HTML> <body> <div style = "background: # FFC0C0; height: 100%"> Зміст </ div> </ body>
Якщо декларацію doctype з коду документа прибрати, то ми побачимо наступну картину:
Для режиму проходження стандартам (на початку документа прописана декларація) необхідно попередньо задати висоту контейнера (в нашому випадку для Div контейнером буде служити тег Body) і тільки тоді браузер правильно відпрацює height: 100%:
<! DOCTYPE HTML> <body style = "height: 70px;"> <div style = "background: # FFC0C0; height: 100%"> Зміст </ div> </ body>
В результаті вийшли два абсолютно різних підходи при завданні висоти області контенту в процентах, тому в уникненні проблем раджу вам в обов'язковому порядку вказувати правильну декларацію doctype на початку всіх ваших документів (веб-сторінок). Є і ще один приклад, коли різниця між режимом проходження стандартам і режимом вивертів буде колосальною.
Якщо ви задасте для будь-якого Html елемента height і width для області контенту, а також вкажіть для цього тега внутрішні відступи (padding) і ширину рамки (border), то в режимі вивертів (quirks mode - без прописаної декларації) в різних браузерах це все може бути витлумачено по-різному.
У старому браузері IE 5.5 внутрішні відступи і ширина рамки будуть відраховувати всередину від заданих через height і width розмірів. Тобто загальний розмір елемента буде відповідати тому, що задано в цих CSS властивості (це застаріла схема, яка зараз не використовується).
В інших же сучасних браузерах відступи padding і ширина рамки border будуть додаватися до тих розмірів, що були задані в height і width. Тобто в цьому випадку (режим вивертів без doctype) спочатку задані розміри області контенту будуть розширені на величину внутрішніх відступів і рамки.
Ну, а якщо в документі прописати директиву, то абсолютно у всіх сучасних і старих браузерах цих проблем з подвійністю підходу вже можна буде запросто уникнути. В цьому випадку і в IE 5.5 величина внутрішніх відступів і ширина рамки буде підсумовуватися з розмірами області контенту, як цього і вимагають сучасні стандарти CSS. Тому в уникненні завжди прописуйте doctype.
<! DOCTYPE HTML>
Удачі вам! До швидких зустрічей на сторінках блогу KtoNaNovenkogo.ru
Збірки по темі
Використовую для заробітку
Яка, наприклад, старина може бути у популярного зараз оглядача Google Chrome, який з'явився-то тільки в 2008 році?Чому я так довго говорив про режими відображення браузерів?
