Elementide positsioneerimine veebilehel CSS-i positsiooniatribuutiga

Mai 3, 2024

Enne kaskaadlaadsete stiililehtede kasutamist oli teil piiratud kontroll oma veebilehel olevate objektide positsiooni üle. Positsioneerimise kontrollimiseks võiksite kasutada HTML-tabelit, kuid see polnud eriti täpne. CSS-i abil saate täpse kontrolli selle üle, kuidas iga element teie veebilehel paikneb.

Enne kui saate CSS-i positsiooni atribuute oma veebisaidil elementide positsioneerimiseks kasutada, peame arutama veebibrauseriga suhtlemiseks kasutatavat terminoloogiat. CSS ei arvesta mitte ainult teie veebilehe laiust ja kõrgust, vaid ka veebibrauseri mõõtmeid.

Brauseri laius ja kõrgus
Alguses võiksite arvata, et see viitab avatud brauseriaknale. Kuid see viitab tegelikult kogu brauserile, sealhulgas juhtnuppudele ja nuppudele.
Live laius ja kõrgus
See on brauseri kuvamisala mõiste. See ei hõlma juhtelemente.
Dokumendi laius ja kõrgus
See on teie veebilehe kogu laius ja kõrgus. Kui need mõõtmed on suuremad kui reaalaius ja -kõrgus, kuvab brauser kerimisriba vastavalt vajadusele.

Nüüd, kui teate piiride tingimusi, milles saate oma veebilehe osi CSS-i abil positsioneerida, vaatleme nelja positsiooni väärtust.

Staatiline
See on vaikimisi. Kui elemendi jaoks pole teisiti määratud, kasutab brauser staatilist positsioneerimist. Nii nagu see kõlab, ei saa staatilise positsioneerimise abil elemente veebilehel ümber paigutada. Niisiis, kuidas brauser otsustab, kuhu iga objekti oma veebilehele panna? See positsioneerib iga elementi teie HTML-koodis esinevas järjekorras. Kui teil on logo pilt, siis tervitus ja seejärel teie HTML-is autoriõiguse märge, paigutab brauser need veebilehele sellises järjekorras. Tervitust ei saa teisaldada logopildi kohal.
Suhteline
Suhteline positsioneerimine toimib samamoodi kui staatiline, kuna HTML-koodi elementide järjekord reguleerib elementide voogu lehel. Kuid saate kasutada suhtelist positsioneerimist, et kontrollida elemendi positsiooni muude veebilehe elementide suhtes.
Absoluutne
Kui kasutate elemendi suhtes absoluutset positsioneerimist, muudab see element ülejäänud veebisaidist sõltumatuks. Kuna selle paigutust ei määra enam HTML-i järjekord, peate elemendi positsioneerimiseks kasutama X- ja Y-koordinaate.
Fikseeritud
See toimib samamoodi nagu absoluutne positsioneerimine. Fikseeritud positsioneerimisega element aga veebilehega ei keri. See on kena funktsioon logo või menüü jaoks, mida soovite lehe üles kerimisel nähtavaks teha.

Video Juhiseid: Web Development - Computer Science for Business Leaders 2016 (Mai 2024).

Elementide positsioneerimine veebilehel koos CSS-i positsiooniomadustega, HTML, CSS, CSS-i positsiooni atribuut, staatiline positsioneerimine, suhteline positsioneerimine, absoluutne positsioneerimine, fikseeritud positsioneerimine, kuidas positsioneerida veebilehti, kasutada CSS-i elementide paigutamiseks veebilehel

Eelmine Artikkel

Järgmine Artikkel

Seotud Artiklid

arvutid

Kihi täitmine mustriga - Photoshop CS-2

Mai 2024

Teine meetodSamm 1. Võite kogu kihi täita, klõpsates sellel kihil kihtide paletis. Kui eelistate täita ainult osa kihist, valige piirkond, kasutades ühte tööriistakasti Marquee tööriistadest. 2....

arvutid

Facebooki ajatelg

Mai 2024

Nüüd pole enam tagasipööramist. Paljud kasutajad on sisse lülitanud oma Facebooki ajajoone või lasksid selle nende jaoks sisse lülitada. Isegi kui oleksite üks vähestest, kes seitsmepäevase eelvaate...