Урок 3.

Властивість display

Розглянемо три значення, які можна задити цій властивості: none, inline і block.

1.Значення None.

Елемент не показується, взагалі. Наче його і немає.

Ось тут я

Завдання 1 Створіть сторінку dis.html. Випробуйте такий варіант підключення:

<Html>
<Body style = "background-color:black;">
<div style="border:1px solid black">
Його не видно 
<div style="display: none">Я - невидимка!>
</Body>
</Html>

2.Значення block

Блокові елементи розташовуються один над іншим, вертикально (якщо немає особливих властивостей позиціонування, наприклад float). Блок прагне розширитися на всю доступну ширину. Можна вказати ширину і висоту явно. Це значення display багато елементів мають за замовчуванням: <div>, заголовок <h1>, параграф <p>.
Приклад.

Перший

Другий

Завдання 2 Вставте до сторінки dis2.html та випробуйте цей блок .

<Div style = "border: 1px solid black" >
           <Div style = "border: 1px solid blue; width: 50%" >Перший </Div>
           <Div style = "border: 1px solid red">Другий </Div>
</Div>

3.Значення inline буває таких видів: inline та inline-block

3.1.Значення inline
Елементи розташовуються в одному рядку,послідовно. Ширина і висота елементу визначаються за вмістом. Поміняти їх не можна.
Наприклад інлайновие елементи за замовчуванням: <span>, <a>.
Завдання 3. Створіть сторінку dis3.html. Випробуйте такий варіант підключення:

<Span style = "border: 1px solid black">
<Span style = "border: 1px solid blue; width: 50%">Ширина</span>
<a style="border:1px solid red">Ігнорується</span>
</Span>

Ширина Ігнорується

- Якщо ви придивитеся уважно на приклад вище, то побачите, що між внутрішніми <span> і <a> введено пропуск в коді.Якщо розташувати елементи впритул - його не буде:

<Span style = "border: 1px solid black">
<Span style = "border: 1px solid blue; width: 50%">Ширина</span><a style="border:1px solid red">Ігнорується  </span>
</Span>

ШиринаІгнорується

Вміст інлайн-елемента може переноситися на інший рядок. При цьому кожен рядок є окремим прямокутником. Тобто це інлайн-елемент, який складається з об'єднання прямокутників зі спільними властивостями.
Наприклад, при призначенні фону він задається всім прямокутника поспіль:
Завдання 4 Створіть сторінку dis4.html. Випробуйте такий варіант підключення:

<Div style = "width:400px">
...<span style = "background: lightgreen">
Ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля
  Ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля
</Span>...
</Div>

... Ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля Ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ...

Якщо інлайн-елемент межує з блоком, то між ними обов'язково буде перенесення рядка:
Завдання 5 Створіть сторінку dis5.html. Випробуйте такий варіант підключення:

<Div style = "border: 1px solid black">
<Span style = "border: 1px solid red"> Інлайн<>
<Div style = "border: 1px solid blue; width: 50%">Блок</Divd>
<Span style = "border: 1px solid red">Інлайн<span>

</Div>

Інлайн

Блок

Інлайн