блокові елементи
Давайте почнемо розгляд видів елементів CSS з блокових елементів. Блокові елементи - це елементи з яких будуватися каркас всієї сторінки. Свого роду це цеглини, з яких буде складатися вся веб-сторінка.
До блоковим елементам ставляться елементи зі значенням властивості display:
Хоча всі ці елементи в різних ситуаціях можуть відображатися по різному, але загальні характеристики у них одні.
Отже, що ж це за характеристики:
+ Виходячи з назви, можна здогадатися, що блокові елементи являють собою прямокутну область, в якій знаходиться будь-яке вміст.
Що собою являють і як формуються розміри цієї прямокутної області, я розповідав тут.
+ Блокові елементи можуть містити в собі інші малі або блокові елементи. Рівень вкладеності ніяк не обмежений.
Виняток з цього правила елемент
, він не може містити в собі інші блокові елементи.
+ Для блокових елементів діє ефект схлопованія властивості margin (про це трохи пізніше)
+ Блокові елементи ніколи не вставляйте в рядкові.
Наступна форма запису не пройде валідацію:
Необхідно написати так:
+ Властивість width для блокових елементів приймає значення за замовчуванням auto і блок займає весь доступний по ширині простір:
Винятком з цього правила є елемент table, ширина якого буде залежати від його вмісту.
+ Якщо до блокових елементів не застосовується особливі форми позиціонування, то блоки розташовуються один під іншим. Це правило діє навіть в тому випадку, якщо простору збоку від блоку досить, щоб вмістити блок, який знаходиться нижче.
+ Для блокових елементів діє правило.
Ширина блочного елемента = значення властивості width для елемента + padding-left + margin-left + padding-right + margin-right + border-left + border-right
Хоча ширина в обох блоків задана однаковою, але явно видно, що нижній блок більше по ширині ніж верхній.
+ Висота блочного елемента, за замовчуванням, приймає значення auto і приймає таке значення, яке необхідно для того, щоб повністю вмістився весь контент.
+ Висота блочного елемента = значення властивості height для елемента + padding-top + margin-top + padding-bottom + margin-bottom + border-top + border-bottom
+ Якщо висота блоку задана якимось конкретним значенням і вміст не вміщається в задані межі, то воно буде відображатися поверх блоку.
+ Для блокових елементів не працює властивість vertical-align і ін. Властивості, які призначені для роботи з малими елементами.
Це основні характеристики блокових елементів. Їх розуміння дозволяє вирішити безліч проблем, які виникають при верстці сайтів. Тому подивіться їх уважно ще раз, це може заощадити вам багато часу в майбутньому.