Използване на CSS за поставяне на HTML елементи

• Може 3, 2024

CSS правилата ви дават възможност да поставите HTML елементи точно там, където искате. Можете да настроите как реагират на други елементи, седнали около тях, или дори да ги скриете изцяло. Ето разбивка на свойствата за разположение на CSS.

Дисплей: Това свойство определя начина на показване на елемент. Задаването на дисплей на "none" крие елемента напълно, докато други стойности могат да променят начина, по който елемент реагира на други свойства и елементи. Например, divs са зададени да се показват като "блок" по подразбиране, което означава, че действа като правоъгълен обект, но можете да използвате "display: inline", за да принудите div да действа като абзац. Или можете да направите обратното и да използвате "display: block", за да принудите абзац да действа като div.

Позиция: Определя как елементът реагира на елементите около него. Елементите използват "позиция: статично" по подразбиране, което означава, че се показват в ред, както се появяват в HTML кода. „Позиция: относително“ означава, че статичното местоположение на елемента се изчислява и след това се компенсира с каквото посочите в свойствата „отгоре“ и „наляво“. Останалите елементи на страницата действат така, сякаш относителният елемент все още е бил в статичното си местоположение. Елементите „позиция: абсолютни“ игнорират статичното си местоположение, като се базират на позицията си единствено върху стойностите в горните, левите, десните и долните свойства. В допълнение, други елементи ще игнорират този елемент (така че ако не сте внимателни, можете да се окажете с някои разхвърлени припокривания). „Позиция: фиксирана“ е подобна на „позиция: абсолютна“, само че елементът ще заеме мястото си, дори ако посетителят ви превърта страницата.

Видимост: Решава дали даден елемент се показва на страницата или не. Разликата между "display: none" и "visibility: hidden" е, че в първия случай другите елементи на страницата се държат така, сякаш невидимият обект не съществува; в последния, други елементи ще заемат място за скрития елемент. Очевидно настройката по подразбиране е „видима“.

Float: Задава дали елементът да се каскади отляво или отдясно на други елементи (или изобщо не каскади, което е по подразбиране). Това свойство е изключително полезно за правилното поставяне на относителни елементи. Трябва да зададете ширина за всеки плаващ елемент или той няма да се показва правилно. Освен това, ако използвате float за един елемент, вероятно ще искате да зададете свойството и за всички елементи около него.

Изчисти: Този имот работи съвместно със свойството "float". Той решава как елементът ще позволи на други елементи да плават около него - „ясно: наляво“ означава, че никой друг елемент не може да плава от лявата му страна; „ясно: дясно“ блокира от дясната страна и „ясно: и двете“ означава, че никакви елементи не могат да плават към двете страни. Настройката по подразбиране е "ясно: няма" (което означава, че други елементи могат да плават от двете страни).

Инструкции Видео: CSS Efecto - 02 PseudoElementos @JoseCodFacilito (Може 2024).