Строкові і блочні елементи

Майже всі теги поділяються на строкові і блочні.

Строкові елементи є частиною текстової строки. До строкових елементів відносяться <span>, <b>, <i>, <a>, <img>, <strong>, <em>, та інші, які будуть розглянуті на наступних заняттях.

Строкові елементи як правило змінюють представлення частини текста.

Розмір строкового елемента визначається його контентом:


				<p>Lorem <span>ipsum dolor</span> sit amet, consectetur adipisicing elit.

				Consectetur nobis pariatur tempora? Consequatur cum deleniti, <em>ex iure

				labore nesciunt praesentium</em> reiciendis repellendus. Aspernatur

				consequuntur dicta facere, laborum quaerat soluta voluptatem!</p>

Lorem ipsum... - текст-риба, текст-заглушка для заповнення абстрактним текстом контентної частини сайта. Якщо в IDE налаштовано плагін Emmet - текст-риба створюється так: наберіть слово lorem і натисніть клавішу Tab.

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

Блочні елементи можна уявляти у вигляді коробки, в яку можна класти інші коробки або строкові елементи - яблука, фотографії, кошенята.


				<div>Lorem ipsum dolor sit amet,<br>

				consectetur adipisicing elit. Aliquam animi,<br>

				commodi dolore expedita labore</div>


				<div style="width: 360px">
				
				<div>
				Lorem ipsum dolor sit amet,<br>

				consectetur adipisicing elit. Aliquam animi,<br>

				commodi dolore expedita labore
				</div>
				
				</div>

До блочних елементів належать <div>, <h1>, <h2>..., <p>, та інші, які будуть розглянуті нижче і на наступних заняттях.

div like a box — Коробка з різними предметами як аналогія блочного елемента

Увага! В строкові елементи не можна вставляти блочні елементи! Так само, як в кота не можна запхати коробку, тільки навпаки.

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

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

Приклад:


				<div>

				  <p>Lorem ipsum <span>dolor sit amet</span>, consectetur sed</p>

				  <ul>

				    <li>test</li>

				    <li><a href="#">test</a></li>

				    <li>test</li>

				    <li>test</li>

				  </ul>

				</div>

Тег <div> має два беспосередніх дочірніх елемента: <p> та <ul>, а в цілому - у нього 8 дітей: включаючи span, 4 елемента списка і посилання.

Тег <span> має безпосереднього батька - тег <p>, а також його батьками є div, body і html.