Elementų išdėstymas tinklalapyje, kuriame naudojama CSS pozicijos ypatybė

Balandis 28, 2024

Prieš naudodamiesi kaskadiniais stiliaus lapais, jūs buvote apribotas valdydamas objektus savo tinklalapyje. Galite naudoti HTML lentelę, norėdami šiek tiek kontroliuoti padėties nustatymą, tačiau tai nebuvo labai tikslu. Dabar naudodamiesi CSS, galite tiksliai valdyti, kaip kiekvienas elementas yra jūsų tinklalapyje.

Prieš naudodamiesi CSS padėties ypatybe savo tinklalapio elementams išdėstyti, turime aptarti terminus, naudojamus bendraujant su interneto naršykle. CSS atsižvelgia ne tik į jūsų tinklalapio plotį ir aukštį, bet ir į interneto naršyklės matmenis.

Naršyklės plotis ir aukštis
Iš pradžių galite pamanyti, kad tai reiškia atidarytą naršyklės langą. Bet tai iš tikrųjų reiškia visą naršyklę, įskaitant valdiklius ir mygtukus.
Tiesioginis plotis ir aukštis
Tai yra naršyklės ekrano srities terminas. Tai neapima valdiklių.
Dokumento plotis ir aukštis
Tai yra visas jūsų tinklalapio plotis ir aukštis. Jei šie matmenys yra didesni už tiesioginį plotį ir aukštį, tada naršyklė rodys slinkties juostas pagal poreikį.

Dabar, kai žinote ribų, kuriomis galite išdėstyti savo tinklalapio dalis naudodamiesi CSS, sąlygas, pažvelkime į keturias pozicijos reikšmes.

Statinis
Tai yra numatytasis. Jei elementui nenurodysite kitaip, naršyklėje bus naudojamas statinis padėties nustatymas. Kaip skamba, esant statiniam padėties nustatymui, negalima pakeisti elementų tinklalapyje. Taigi, kaip naršyklė nustato, kur dėti kiekvieną objektą savo tinklalapyje? Kiekvienas elementas išdėstomas tokia tvarka, kokia jie yra jūsų HTML kode. Jei turite logotipo atvaizdą, tada sveikinimas ir tada autorių teisių pranešimas jūsų HTML, naršyklė juos tinklalapyje pateiks tokia tvarka. Jūs negalite perkelti pasveikinimo virš logotipo paveikslėlio.
Giminaitis
Santykinis padėties nustatymas veikia taip pat, kaip ir statinis, nes HTML kodo elementų tvarka kontroliuoja elementų srautą puslapyje. Tačiau galite naudoti santykinį padėties nustatymą, norėdami valdyti elemento padėtį, palyginti su kitais tinklalapio elementais.
Absoliutus
Kai naudosite absoliučią vietos nustatymą su elementu, tai padarys tą elementą nepriklausomą nuo likusio tinklalapio. Kadangi jo išdėstymas nebėra nustatomas pagal HTML tvarką, elementui išdėstyti turėsite naudoti X ir Y koordinates.
Fiksuotas
Tai veikia taip pat, kaip ir absoliutus padėties nustatymas. Tačiau elementas, turintis fiksuotą padėties nustatymą, neslinks su svetaine. Tai puiki funkcija, naudojama logotipui ar meniu, kurį norite palikti matomą, kai puslapis slenka aukštyn.

Vaizdo Instrukcijos: Web Development - Computer Science for Business Leaders 2016 (Balandis 2024).

Elementų vietos nustatymas tinklalapyje naudojant CSS padėties ypatybes, HTML, CSS, CSS padėties ypatybes, statinis padėties nustatymas, santykinis padėties nustatymas, absoliutus padėties nustatymas, fiksuotas padėties nustatymas, kaip išdėstyti elementus tinklalapyje, naudojant CSS elementams išdėstyti tinklalapyje

Ankstesnis Straipsnis

Kitas Straipsnis

Susiję Straipsniai

kompiuteriai

„Megaman 4“ - NES

Balandis 2024

„Megaman 4“ serija prideda dar daugiau robotų ir vėl pagerina grafiką. Pramoniniai robotai siautėja, kurstomi daktaro Wily. Dr Light sukūrė savo bičiulį Rocką kovos robotu. Šiame naujinime...

kompiuteriai

Drop Caps „Adobe PageMaker“

Balandis 2024

Dangteliai yra puikus būdas pridėti įdomų dizaino elementą prie savo leidinio, nesvarbu, ar tai yra pirmoji knygos skyrių pastraipa, kuriai pritaikote nuleidžiamąjį dangtelį, ar naudojate jį...