Використання CSS для розміщення елементів HTML

• Може 5, 2024

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

Дисплей: ця властивість визначає спосіб відображення елемента. Встановлення відображення на "none" повністю приховує елемент, тоді як інші значення можуть змінювати, як елемент реагує на інші властивості та елементи. Наприклад, divs встановлюються як "блок" за замовчуванням, це означає, що він діє як прямокутний об'єкт, але ви можете використовувати "display: inline", щоб змусити div діяти як абзац. Або ви можете зробити навпаки і використовувати "display: block", щоб змусити абзац діяти як діл.

Позиція: визначає, як елемент реагує на елементи навколо нього. Елементи за замовчуванням використовують "позиція: статична", тобто вони відображаються в порядку, як вони відображаються в HTML-коді. "Позиція: відносна" означає, що статичне розташування елемента обчислюється, а потім компенсується тим, що ви вказали у властивостях "верхній" та "лівий". Інші елементи сторінки діють так, ніби відносний елемент все ще знаходився у своєму статичному розташуванні. Елементи "Позиція: абсолютний" ігнорують своє статичне розташування, спираючись на своє положення виключно на значення у верхній, лівій, правій та нижній властивостях. Крім того, інші елементи проігнорують цей елемент (тому, якщо ви не будете обережні, ви можете зіткнутися з безладним перекриттям). "Позиція: виправлена" схожа на "позиція: абсолютна", за винятком того, що елемент займе своє місце, навіть якщо ваш відвідувач прокручує сторінку.

Видимість: Визначає, чи відображається елемент на сторінці чи ні. Різниця між "display: none" та "видимістю: приховано" полягає в тому, що в першому випадку інші елементи сторінки поводяться так, ніби невидимий об'єкт не існує; в останньому інші елементи займатимуть місце для прихованого елемента. Очевидно, що за замовчуванням налаштування є "видимим".

Float: Встановлює, чи елемент каскадує ліворуч або праворуч від інших елементів (чи зовсім не каскадує, що є типовим). Ця властивість надзвичайно корисна для правильного розміщення відносних елементів. Ви повинні встановити ширину для будь-якого плаваючого елемента, інакше він не відображатиметься правильно. Крім того, якщо ви використовуєте float для одного елемента, ви, ймовірно, захочете встановити властивість і для всіх елементів навколо нього.

Очистити: ця властивість працює в поєднанні з властивістю "float". Він вирішує, як елемент дозволить іншим елементам плавати навколо нього - "ясно: зліва" означає, що жоден інший елемент не може плисти ліворуч; "clear: right" блокує з правого боку та "clear: obo" означає, що жоден елемент не може перепливати в будь-яку сторону. За замовчуванням встановлено "ясно: немає" (тобто інші елементи можуть плисти в будь-яку сторону).

Відео Інструкція: Уроки по CSS/CSS3. Часть 4. Позиционирование элементов (Може 2024).