,

,

,

,

.

,

---

,

,

,

, , 
. Повний список блокових елементів можна подивитися тут.

Подивитися їх характеристики і властивості Ви можете в HTML довіднику. Просто скопіюйте назву тега в рядок пошуку в лівій частині сторінки.
Для блокових елементів характерні наступні особливості.


Блоки розташовуються по вертикалі один під одним. Для розміщення блоків поруч потрібно використовувати css властивість float.
На прилеглих сторонах елементів діє ефект схлопування відступів. Тобто, якщо два блокових елемента розташовані поруч і мають відступи з боку дотику, то відступи не сумуються, а діє лише один (більший з них).
Заборонено вставляти блоковий елемент всередину сатиричного. Наприклад, запис:



Ця запис неправильна, правильно вкласти теги навпаки:

По ширині блокові елементи займають все допустиме простір.
Якщо задана ширина контенту (властивість width), то ширина блоку складається з значень width, полів, кордонів, відступів зліва і справа.
Висота блочного елемента обчислюється браузером автоматично, виходячи з вмісту блоку.
Якщо задана висота контенту (властивість height), то висота блоку складається з значення height, полів, кордонів, відступів зверху і знизу. При перевищенні зазначеної висоти контент відображається поверх блоку.
На блокові елементи не діють властивості, призначені для малих елементів, на зразок vertical-align.
Текст за умовчанням вирівнюється по лівому краю.
Зараз при створенні HTML структури веб-сторінок активно використовується блокова верстка. Це дуже зручно, тому що блоки можна вкладати один в одного.
Однак не всі блокові теги можна вкласти один в інший, тому при створенні структури HTML коду найчастіше використовується тег 
 - універсальний блок. тег 
 допустимо вкладати один в інший, а також в нього можна вкладати будь-які інші блокові і рядкові елементи сторінки. Це можна порівняти з цегляною кладкою. Блоки - це цеглинки і з них ми будуємо свій сайт.


2. Основні css властивості блокових елементів.
До блоковим елементам найбільш часто застосовуються такі CSS властивості:

width - ширина вмісту.
height - висота вмісту.
margin - зовнішні відступи.
padding - внутрішні відступи (поля).
border - кордону.
background - фон.
float - обтікання текстом.

Як їх використовувати, Ви можете подивитися в CSS довіднику. Cкопіруйте назву властивості в рядок пошуку в лівій частині сторінки.
3. Надання блочному елементу властивостей сатиричного елемента.
Іноді виникають випадки, коли характеристик того чи іншого типу елементів недостатньо. Наприклад галереї фотографій, в які входить зображення з підписом до нього.

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

Найбільш популярне рішення в подібних випадках - це використання css властивості float, яке ми розглянемо трохи пізніше, коли будемо вивчати блочну верстку.
Поки ж зупинимося на рядково-блокових елементах. які поєднують переваги і малих, і блокових елементів.
В HTML немає тега, який відноситься до рядково-блоковим елементам, але його можна визначити, задавши елементу css властивість display із значенням inline-block.
Характеристики таких елементів наступні:

Всередину рядково-блокових елементів можна поміщати текст, рядкові або блокові елементи.
Висота елемента обчислюється залежно від вмісту блоку.
Ширина елемента дорівнює вмісту плюс значення відступів, полів і кордонів.
Кілька елементів йдуть підряд розташовуються на одному рядку і переносяться на інший рядок при необхідності. Якраз те, що нам потрібно.
Можна вирівнювати по вертикалі за допомогою властивості vertical-align.
Можна задавати ширину і висоту.
Відсутній ефект схлопування відступів.

На цьому буду закінчувати. Сподіваюся інформація, яку Ви сьогодні отримали, принесе Вам багато користі в подальшому. У наступній статті Ви познайомитеся з малими елементами.
Оновлення блогу:
Ви ще не Новомосковскете нашу.


Схожі статті


Види html елементів блокові html елементи і малі html елементи, блог про створення сайтів,


Блокові і рядкові елементи html


блокові елементи


								
								

									
Попередня ◈ Наступна