Новости

блокова модель

  1. властивості блоків
  2. Активне навчання: ігри з блоками
  3. Playable code
  4. Просунуті маніпуляції з блоком
  5. Overflow
  6. Background clip
  7. Outline
  8. Типи блоків CSS
  9. висновок
  10. Дивіться також

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

властивості блоків

Кожен елемент всередині документа структурований як прямокутник, даний прямокутник має розмір і так звані "шари цибулі", які можуть бути змінені з використанням певних властивостей CSS. Характерні риси такі:

width

and height

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

Примітка: Існують і інші властивості, які дозволяють задати більш тонкі способи обробки розміру вмісту - можна встановити обмеження розміру, замість установки абсолютного розміру. Це можна зробити за допомогою властивостей min-width , max-width , min-height , і max-height .

padding Padding

відноситься до внутрішнього відступу блоку - між зовнішнім краєм вікна вмісту і внутрішнім краєм кордону. Розмір цього шару можна встановити з усіх чотирьох сторін відразу за допомогою padding властивості, або окремо по одній стороні padding-top , padding-right , padding-bottom і padding-left . border Шар border (межа) розташовується між зовнішнім краєм padding і внутрішнім краєм margin. За замовчуванням розмір кордону (border) дорівнює 0, що робить її невидимою, але щоб вона з'явилася ви можете встановити ширину, стиль і колір кордону. Коротка запис властивості border дозволяє вам встановити всі основні параметри для всіх сторін, наприклад, border: 1px solid black. Цей запис можна розділити на кілька різних властивостей, якщо потрібні більш специфічні стилі:

  • border-top , border-right , border-bottom , border-left : Встановлює ширину, стиль і колір для одного боку кордону.
  • border-width , border-style , border-color : Встановлює тільки ширину, стиль або колір окремо, для всіх сторін кордону.
  • Ви також можете встановити одне з трьох властивостей для одного боку окремо, використовуйте для цього border-top-width , border-top-style , border-top-color , і т.д.
margin

Margin оточує блок і відштовхує інші блоки всередині розмітки сторінки. Це схоже на поведінку padding; є коротка запис властивості margin , А також спеціальні властивості для різних сторін margin-top , margin-right , margin-bottom і margin-left .

Примітка: Зовнішні відступи мають специфічну поведінку яке називається схлопування зовнішніх відступів : Коли два блоки стикаються один з одним відстань між ними дорівнюватиме більшого зовнішньому відступу (margin), а не їх сумі.

Активне навчання: ігри з блоками

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

Якщо у вас виникла помилка, ви завжди можете скинути її використовуючи кнопку Reset. Якщо ви застрягли, натисніть кнопку Show solution (Показати рішення), щоб побачити можливу відповідь.

У редагованому прикладі нижче у нас є три блоки, всі вони містять текст і займають всю ширину. Вони являють собою елементи розмітки <Header> , <Main> і <Footer> . Ми б хотіли, щоб ви зосередилися на трьох селекторах CSS нижче, які призначені для кожного блоку окремо і спробували наступне:

  • Щоб побачити блокову модель кожного елемента окремо, відкрийте в браузері панель інструментів розробника, включіть режим DOM інспектора і клікайте по цікавлять вас елементам. Для отримання більш детальної інформації дивіться Огляд іструментів розробки в браузерах . Кожен браузер має інтерфейс для показу блокової моделі елементів, який точно показує які зовнішні відступи (margin), кордону (border) і внутрішні відступи (padding) застосовується для кожного блоку, а також наскільки велика область контенту і загальні розміри блоку.
  • встановіть margin-bottom для елемента <Main> , Наприклад, 20px. далі margin-top для елемента <Footer> , Наприклад, 15px. Зауважте що друга дія не привело ні до якої зміни в розмітці, це сталося зарахунок схлопування зовнішніх відступів; ефект від меншого зовнішнього відступу виявився дорівнює 0, залишився тільки найбільший зовнішній відступ.
  • встановіть margin 30px та padding 30px для всіх сторін елемента <Main> - зауважте як змінилося простір навколо елемента (зовнішні відступи) і простір між кордоном елемента і контентом (внутрішні відступи), це призвело до того що фактичний контент став займати менший простір. Знову ж можете перевірити це в інструментах розробника.
  • Скористайтеся довгим значенням кордон для всіх сторін елемента <Main> 40px, зверніть увагу що для цього треба було простір контенту, а не внутрішнього або зовнішнього відступу. Ви можете встановити повний набір значень для ширини, стилю і кольору використовуючи властивість border , Наприклад так - 60px dashed red, але після того як ці значення були встановлені у властивості раніше, ви можете їх перевизначити використовуючи наприклад властивість ширини кордону border-width .
  • За замовчуванням контент займає все ширину - width 100% від доступного простору (після того як поділиться ним з межами, внутрішніми і зовнішніми відступами). Якщо ви будете міняти ширину вікна браузера, блок буде збільшуватися або скорочуватися, щоб залишатися всередині вікна виведення прикладу. значення height за замовчуванням дорівнює висоті контенту міститься всередині блоку.
  • Спробуйте змінити нові ширину і висоту для елемента <Main> - почнемо з значень 400px для ширини (width) та 200px для висоти (height), і подивіться, що вийде. Ви побачите, що ширина більше не змінюється при зміні розмірів вікна браузера.
  • Спробуйте змінити значення ширини в процентах для елемента <Main> , Наприклад 60%, і подивитися, що вийшло. Ви повинні побачити, що ширина зараз змінюється при зміні розмірів вікна. видаліть параметр height для елемента <Main> .
  • Спробуйте встановити елементу <Main> внутрішні і зовнішні відступи з усіх сторін рівні 5% і подивіться на результат. Якщо ви скористаєтеся інструментами розробника в браузері, щоб подивитися на ширину вікна виведення і порівняти її з відступами margin / padding, ви побачите що значення 5% означає "5% від ширини містить елемента". Тому при збільшенні розміру вікна з прикладом, будуть збільшуватися відступи padding / margin відповідно.
  • Зовнішні відступи можуть приймати негативні значення, які можна використовувати для накладення блоків один на одного. Спробуйте змінити властивості margin-top: -50px для елемента <Main> і подивіться на результат.
  • Продовжуйте експериментувати!
Playable code

<Div class = "body-wrapper" style = "font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;"> <h2> HTML Input </ h2> <textarea id = "code" class = "html-input" style = "width: 90%; height: 10em; padding: 10px; border: 1px solid # 0095dd;"> <div id = "wrapper"> <header> Header </ header> <main> Main content </ main> <footer> Footer </ footer> </ div> </ textarea> <h2> CSS Input </ h2> <textarea id = "code" class = "css-input" style = "width: 90 %; height: 12em; padding: 10px; border: 1px solid # 0095dd; "> / * General styles * / body {margin: 0; } #Wrapper * {padding: 20px; font-size: 20px; border: 20px solid rgba (0,0,0,0.5); } / * Specific boxes * / #wrapper header, #wrapper footer {background-color: blue; color: white; } #Wrapper main {background-color: yellow; } #Wrapper header {} #wrapper footer {} </ textarea> <h2> Output </ h2> <div class = "output" style = "width: 90%; height: 20em; padding: 10px; border: 1px solid # 0095dd; overflow: auto; "> </ div> <div class =" controls "> <input id =" reset "type =" button "value =" Reset "style =" margin: 10px 10px 0 0; "> <input id = "solution" type = "button" value = "Show solution" style = "margin: 10px 0 0 10px;"> </ div> </ div> var htmlInput = document.querySelector ( ". html-input "); var cssInput = document.querySelector ( ". css-input"); var reset = document.getElementById ( "reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector ( ". output"); var solution = document.getElementById ( "solution"); var styleElem = document.createElement ( 'style'); var headElem = document.querySelector ( 'head'); headElem.appendChild (styleElem); function drawOutput () {output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; } Reset.addEventListener ( "click", function () {htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput ();}); solution.addEventListener ( "click", function () {htmlInput.value = htmlCode; cssInput.value = '/ * General styles * / \ n \ nbody {\ n margin: 0; \ n} \ n \ n # wrapper> * {\ n padding: 20px; \ n font-size: 20px; \ n border: 20px solid rgba (0,0,0,0.5); \ n} \ n \ n / * specific boxes * / \ n \ n #wrapper header, #wrapper footer {\ n background-color: blue; \ n color: white; \ n} \ n \ n # wrapper main {\ n background-color: yellow; \ n margin: 2%; \ n padding: 2%; \ n border: 60px solid rgba (0,0,0,0.5); \ n width: 60%; \ n} \ n \ n # wrapper header {\ n \ n} \ n \ n # wrapper footer {\ n margin-top: 20px; \ n} '; drawOutput ();}); htmlInput.addEventListener ( "input", drawOutput); cssInput.addEventListener ( "input", drawOutput); window.addEventListener ( "load", drawOutput);

Деякі поради та ідеї:

  • За замовчуванням background-color / background-image поширюються до краю включаючи кордону блоку. Це поведінка може бути перевизначити з використанням властивості background-clip , Яке ви можете вивчити в розділі Background_clip .
  • Якщо розміри контенту стають більше вікна виведення, це означає переповнення контентом і з'являються смуги прокрутки, які дозволяють пермещаться у вікні, щоб побачити всі содержщіх в блоці. Ви можете управляти переповненням за допомогою властивості overflow , Докладніше дивіться нижче в розділі Overflow .
  • Висота блоку не може бути задана за допомогою відсотків; висота блоку завжди приймає значення висоти контенту, якщо тільки не задана абсолютна висота, наприклад, в пікселях або em. Це дуже зручно так як висота кожного блоку за замовчуванням не дорівнює 100% висоти вікна, а відповідає контенту.
  • Межі також не можуть бути задані у відсотках.
  • Ви повинні зазначити, що повна ширина блоку включет в себе суму властивостей width , padding-right , padding-left , border-right і border-left . У деяких випадках це може бути незручно (для прикладу коли потрібно щоб вся ширина блоку дорівнювала строго 50% включаючи кордону і внутрішні відступи задані в пікселях). Для того щоб уникнути таких проблем, необхідно налаштувати блокову модель використовуючи властивість box-sizing . Значення border-box змінює блокову модель наступним чином:

Значення border-box змінює блокову модель наступним чином:

Просунуті маніпуляції з блоком

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

Overflow

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

  • auto: з'являються смуги прокрутки, які дозволяють користувачеві переглядати весь вміст.
  • hidden: контент який не поміщається буде приховано.
  • visible: контент який не поміщається буде показаний виходять за межі блоку (це значення використовується за умовчанням).

Далі простий приклад показує як працюють ці настройки.

Спочатку HTML:

<P class = "autoscroll"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula. </ P> <p class = "clipped"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula. </ P> <p class = "default"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula. </ P>

І стилі для нашого HTML:

p {width: 400px; height: 2.5em; padding: 1em 1em 1em 1em; border: 1px solid black; } .Autoscroll {overflow: auto; } .Clipped {overflow: hidden; } .Default {overflow: visible; }

Код вище дає наступний результат:

Background clip

Фони блоків складають кольору і зображення накладені один на одного ( background-color , background-image ). Вони застосовуються до блоку і промальовується під ним. За замовчуванням фон розширюється до зовнішнього краю рамки блоку. Найчастіше це те що потрібно, але іноді потрібно щось інше, але що якщо вам необхідно, щоб фон був замощений фоновим зображенням тільки в межах контенту блоку? Цього поведінки можна домогтися налаштувавши відповідним чином властивість background-clip .

Давайте розглянемо приклад як це працює. Спочатку HTML:

<Div class = "default"> </ div> <div class = "padding-box"> </ div> <div class = "content-box"> </ div>

Наш CSS:

div {width: 60px; height: 60px; border: 20px solid rgba (0, 0, 0, 0.5); padding: 20px; margin: 20px 0; background-size: 140px; background-position: center; background-image: url ( 'https://mdn.mozillademos.org/files/11947/ff-logo.png'); background-color: gold; } .Default {background-clip: border-box; } .Padding-box {background-clip: padding-box; } .Content-box {background-clip: content-box; }

Код вище дає наступний результат:

Outline

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

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

Типи блоків CSS

Все про що ми говорили досі можна застосувати до блокам, які є блоковими елементами. Однак CSS має і інші типи блоків, які ведуть себе по-іншому. Тип блоку визначається у елемента спеціальним властивістю display . Існує багато різних значень які можна задати для display , Але в цій статті ми розглянемо тільки найосновніші: block, inline і inline-block.

  • Блок певний як block укладається в інші блоки (вміст до і після даного блоку розташований з нового рядка). При цьому він може мати ширину і висоту заданих розмірів. Вся блокова модель описана вище відноситься якраз до таких блоковим елементам.
  • Значення inline протилежно block: вони ведуть себе як потік тексту документа (тобто вони будуть відображатися на одному рядку з навколишнім їх текстом і іншими малими елементами, а вміст буде переноситися на новий рядок також як потік тексту в абзаці). Завдання ширини і висоти не впливає на inline елементи. Завдання кордонів, внутрішніх і зовнішніх відступів для inline елементів буде змінювати положення навколишнього тексту, але не буде жодним чином впливати на стан оточуючих block елементів.
  • Значення inline-block є чимось середнім між inline і block: він знаходиться в потоці з навколишнім текстом, не створюючи розриву рядків до і після, на відміну від block, але для inline-block можна задавати розміри ширину і висоту точно також як у block . У inline-block немає переносів рядків як у inline. У наведеному нижче прикладі inline-box елемент переходить у 2-й рядок у вигляді єдиного блоку, тому що для нього не вистачає місця на першому рядку, тоді як inline елемент розбивається на кілька рядків якщо недостатньо місця і втрачає форму блоку.

Примітка: За замовчуванням для блокових і малих елементів властивість display має значення block і inline відповідно.

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

Спочатку HTML:

<P> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Span class = "inline"> Mauris tempus turpis id ante mollis dignissim. </ Span> Nam sed dolor non tortor lacinia lobortis id dapibus nunc. </ P> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Span class = "block"> Mauris tempus turpis id ante mollis dignissim. </ Span> Nam sed dolor non tortor lacinia lobortis id dapibus nunc. </ P> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Span class = "inline-block"> Mauris tempus turpis id ante mollis dignissim. </ Span> Nam sed dolor non tortor lacinia lobortis id dapibus nunc. </ P>

Додамо трохи CSS:

p {padding: 1em; border: 1px solid black; } Span {border: 1px solid green; / * That makes the box visible, regardless of its type * / background-color: yellow; } .Inline {display: inline; } .Block {display: block; } .Inline-block {display: inline-block; }

Код вище дає наступний результат, який ілюструє відмінність в поведінці елементів з різними типами блоків:

висновок

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

Дивіться також

У цьому модулі

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

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

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: