Зміст

  • Тег DIV і властивість float
  • Властивість clear
  • Відступи в блокової верстки

Будь-яка веб-сторінка складається з розташованих на ній елементів, і практично завжди за їх розміщення відповідає блокова верстка div. Звичайно, існує ще і таблична верстка з використанням тегів <table>, <tr>, <td>, і існують навіть суперечки про те, яку краще використовувати систему — блокову або табличну. Однак у дійсності в даний час ви не зустрінете жодного з сучасних, популярних і зручних сайтів, що використовують тільки табличну верстку. У кращому випадку вона використовується тільки для того, для чого вона призначена — тобто для створення таблиць, але ніяк не для формування самої структури сайту.

Справа в тому, що div верстка сайту дозволяє задавати безліч css-властивостей, недоступних для таблиць. Крім того, самий головний недолік табличній системи полягає в тому, що таблиця не буде показано на екрані до тих пір, поки вона не буде повністю завантажена браузером. Якщо весь сайт зроблено в таблиці, то він з’явиться на дисплеї лише після того, як буде повністю завантажений весь html-код сторінки.

Блокова верстка div — основи

Тег DIV і властивість float

Основа блокової системи — це тег <div></div>, який є контейнером для контенту. Всередині нього також можуть міститися інші контейнери <div></div>.

Використовувати тег DIV — не складніше, ніж редагувати теги MP3. Як правило, стандартна структура сайту формується наступним чином: існує основний контейнер <div> (часто йому присвоюється клас з назвою wrapper, container, main тощо). Усередині цього контейнера розташовуються блоки меню, тематичної частини, сайдбара.

За замовчуванням, кожен новий блок розташовується з нового рядка. Для того, щоб розташувати блок ліворуч або праворуч від іншого (наприклад, щоб розташувати сайдбар праворуч), використовується властивість float. За замовчуванням воно має значення «none», але можна також виставляти значення «left» і «right».

Розглянемо цю властивість на прикладі з двома блоками.

<div style=”float:left;background:#FF00DC; width:300px;”>Блок для вмісту</div>
<div style=”float:left;background:#C0C0C0; width:100px;”>Блок для сайдбара</div>

Цей код дасть наступний результат:

Блокова верстка div — основи

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

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

Для того, щоб уникнути цього, блокова верстка div використовує властивість clear, яке повинно бути задано для того блоку, який ми хочемо розташувати з нового рядка. Найчастіше для цього йому задається значення «both», але також можна встановити значення «left» або «right», якщо ми хочемо не просто розташувати блок на новому рядку, але і задати йому вирівнювання.

Доповнимо вищезгаданий приклад новим елементом:

<div style=”float:left;background:#FF00DC; width:300px;”>Блок для вмісту</div>
<div style=”float:left;background:#C0C0C0; width:100px;”>Блок для сайдбара</div>
<div style=”clear:both;background:#FFD800; width:400px;”>Новий блок, розташований знизу</div>

Результат:

Блокова верстка div — основи

Відступи в блокової верстки

Крім розташування блоків, важливим є завдання відступів як між блоками, так і всередині них. Для цього, відповідно, використовуються властивості margin і padding.

Відступи задаються окремо для верхньої, правій, нижній і лівої частин елемента. Їх можна задати одним рядком шляхом перерахування чотирьох значень:

margin: 20px 10px 0 40px

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

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

Можна також задавати окремі властивості для окремих граней з допомогою margin-top margin-bottom, margin-left, margin-right (і аналогічно для padding). В такому випадку, якщо якась із сторін не буде вказана, то відступ з її боку буде дорівнює нулю або буде визначений загальними властивостями css, заданими для блоків на сторінці.

Схожі:
Соц закладки