Polohovacie prvky na webovej stránke s vlastnosťou CSS

Smieť 9, 2024

Pred kaskádovými šablónami štýlov ste mali obmedzenú kontrolu nad umiestnením objektov na svojej webovej stránke. Môžete použiť tabuľku HTML na mierne riadenie polohy, ale nebolo to príliš presné. Teraz s CSS môžete mať presnú kontrolu nad tým, ako je každý prvok umiestnený na vašej webovej stránke.

Predtým, ako použijete vlastnosť CSS position na umiestnenie prvkov na svojej webovej stránke, je potrebné diskutovať o terminológii použitej pri komunikácii s webovým prehliadačom. CSS nezohľadňuje iba šírku a výšku vašej webovej stránky, ale aj rozmery webového prehľadávača.

Šírka a výška prehliadača
Najprv si môžete myslieť, že ide o otvorené okno prehliadača. Ale naozaj sa týka celého prehliadača vrátane ovládacích prvkov a tlačidiel.
Živá šírka a výška
Toto je termín pre oblasť displeja prehliadača. Nezahŕňa kontroly.
Šírka a výška dokumentu
Toto je celá šírka a výška vašej webovej stránky. Ak sú tieto rozmery väčšie ako šírka a výška naživo, prehliadač podľa potreby zobrazí posuvníky.

Teraz, keď viete podmienky hraníc, v ktorých môžete umiestniť časti svojej webovej stránky pomocou CSS, pozrime sa na štyri hodnoty pozícií.

statický
Toto je predvolené nastavenie. Pokiaľ pre prvok neurčíte inak, prehliadač použije statické určovanie polohy. Rovnako ako to znie, so statickým umiestnením nemôžete premiestniť prvky na webovej stránke. Ako teda prehliadač určí, kam umiestniť každý objekt na svoju webovú stránku? Každý prvok umiestni v poradí, v akom sa vyskytuje vo vašom kóde HTML. Ak máte obrázok loga, potom pozdrav a oznámenie o autorských právach vo vašom HTML, prehliadač ich umiestni na webovú stránku v tomto poradí. Pozdrav nemôžete presunúť nad obrázok loga.
relatívna
Relatívne umiestnenie funguje rovnako ako statické v tom, že poradie prvkov v kóde HTML riadi tok prvkov na stránke. Môžete však použiť relatívne umiestnenie na ovládanie polohy prvku vo vzťahu k ostatným prvkom na webovej stránke.
absolútny
Ak použijete absolútne umiestnenie s určitým prvkom, bude tento prvok nezávislý od zvyšku webovej stránky. Pretože umiestnenie už nie je určené poradím HTML, budete musieť na umiestnenie prvku použiť súradnice X a Y.
fixné
Funguje to rovnako ako absolútne umiestnenie. Prvok, ktorý má pevné umiestnenie, sa však webovou stránkou nebude posúvať. Je to pekná funkcia, ktorú môžete použiť pre logo alebo menu, ktoré chcete zostať viditeľné pri posúvaní stránky nahor.

Video Návody: Web Development - Computer Science for Business Leaders 2016 (Smieť 2024).

Polohovanie prvkov na webovej stránke s vlastnosťou polohy CSS, HTML, CSS, vlastnosťou polohy CSS, statickým polohovaním, relatívnym polohovaním, absolútnym polohovaním, pevným polohovaním, polohovaním prvkov na webovej stránke, pomocou CSS na polohovanie prvkov na webovej stránke.

Predchádzajúci Článok

Nasledujúci Článok

Súvisiace Články

počítače

Photoshop Elements 7 Vytvára projekty

Smieť 2024

Jedna z mojich obľúbených vecí, ktoré sa dajú robiť v AdobeR photoshopR Prvky 7 majú vytvárať fotografické projekty, ako sú pohľadnice alebo fotografické knihy. Photoshop Elements má niekoľko...

počítače

Aký typ bulletinu publikujete?

Smieť 2024

Aký typ bulletinu alebo ezinu publikujete? Na aké odvetvie alebo medzeru ide? Aké sú základné komponenty alebo bežný obsah? Existuje mnoho typov spravodajcov, ktoré je možné vytvárať, vytvárať a...