Į puslapio viršų CSS: turinio pozicionavimas

CSS išdėstymas visada buvo stačiakampis. Bet kokios sklandžios linijos - kūrėjo kompetencija. Stilius taisyklės suteikia pakankamai galimybių, kad ekrano skiriamoji geba padėtų puslapiui tapti sklandi. Tačiau bet koks išdėstymo elementas visada yra stačiakampis, kuriame informacijos tvarkymą reglamentuoja CSS taisyklės.

Kiekvieno puslapio elemento reikšmė nuo visų pusių yra svarbi, kai ji yra visiškai išdėstyta, o CSS viršuje esanti paraštė yra konkrečiai apibrėžta, nes ji svarbi įvairiems elementams, ypač mažosioms raidėms.

Pagrindinės pozicionavimo taisyklės

Bloko elementas turi įstrižo taisyklę iš elemento, kuriame yra paraštė, šonų, įtraukimo į jį elementų (užpildas) ir pasienio pločio (sienos), kurios taip pat gali būti naudojamos, pusės.

Ypač svarbus yra išdėstymas iš viršaus. CSS viduje blokas susieja vidinio atkūrimo taisykles su visiško ir santykinai pastatytų elementų taisyklėmis šiame bloke.

Įprasta CSS taisyklių taisyklė: galite nustatyti taškų iš visų krypčių vienodai, poromis aukštyn / apačia, dešinėn / kairėn arba kiekvienai atskirai. Pavyzdžiui,

• Marža: 10 px;
• Užsegimas: 10px20px;
• Užsegimas: 10px20px30px40px.

Pirmuoju atveju elementas yra išdėstytas iš išorinės talpyklos, kurioje jis yra, šonuose. Antruoju atveju viršutiniame ir apaćioje padanga yra 10 pikselių, o kairieji ir dešinieji kraštai yra 20 pikselių. Trečiame atveju taško dydis rodomas iš visų pusių: viršaus, dešinė, apačia ir kairė.

Visais šiais atvejais CSS viršuje esanti marža yra 10 pikselių.

Taisyklės, pakeičiančios elementų padėtį

Jei išdėstymo elementas nėra visiškai išdėstytas, jis yra bendrame puslapio sudarymo tvarka.

Jei scCurrInfo elemento CSS viršuje nustatysite įtrauką, tikslas bus pasiektas, o jei lygiu liukso nr.

Šiame pavyzdyje naudojama įklijavimo taisyklė: 40 px; Reikia tinkamai sumažinti pločio ir aukščio taisykles 80 pikselių. Priešingu atveju, scCurrInfo bloko dydis nepatenka į išorinį bloką.

Jei pašalinsite paddingą taisyklę iš scCurrInfo aprašymo, bet pridėsite ją su 20 pikselių reikšme sąrašo elemento stiliaus apibūdinimui, iš viršaus atsidarysime tik įtrauką. CSS netaikys šios vertės kitoms šalims.

Natūralu, kad šis įtraukimo taisyklės naudojimas taikomas kiekvienam li elementui.

Įprasta turinio formatavimo praktika

Kai kurie kūrėjai pasiekia tobulumą, įvesdami puslapius su bloko elementais. Matyt, tai yra klasikinė praktika, kurią reikia pradėti nuo lentelių ir užbaigti savo mokymo procesą blokuose.

Laisvė, būdinga blokų išdėstymui, yra įspūdinga, o kūrėjo vaizduotė gali būti ne tik griežta lentelės tvarka: tik eilutės, tik langeliai, sujungiamos tik horizontaliai ir vertikaliai. Nieko, kas būdinga santykinėms idėjoms.

Tuo tarpu lentelėse, be akivaizdžių trūkumų, yra daug kokybinių pranašumų. Sukūrus įtraukas iš viršaus, CSS atsižvelgiama į įtraukas kairėje, dešinėje (apačioje - tai yra ypatinga akimirka). Stalo langelių taisyklės leidžia valdyti vertikaliai ir horizontaliai derinimą. Naudojant eilučių stilius, derinant juos su ląstelių stiliais, galite sukurti sudėtingus turinio peržiūras.

Paprastas stačiakampių formos puslapio vaizdas (bloko išdėstymas) neleidžia jam pateikti lentelės pavidalo. Tai yra ir stačiakampiai, tačiau jie taip pat yra lentelių ląstelės, tai yra, jos turi savo taisykles, kurios papildo blokų taisykles.

Absoliutus pozicionavimas

; Blokuoti pagal POSITION taisyklę: absoliutus ; Bus nustatyta vieta, nustatyta jos koordinatėmis, palyginti su bloku, kuriame jis yra.

Dažniausiai būdingas CSS taisyklių ypatumas yra "praktika yra geriausias tiesos kriterijus", ypač kai reikalingas tarpusavyje suderinamasis suderinimas ir išdėstymas atliekamas rankiniu būdu, geriau išnagrinėti visišką vadovėlių pakopų stiliaus lapus.

Naudojant stalus dažnai kyla problemų dėl ląstelių turinio perkėlimo. Panašus perkėlimas į bloką ne visuomet turi įtakos visiems elementams. Eksperimentuodami galite pasiekti norimą rezultatą. Trivialus uždavinys: kaip pašalinti įtrauką iš viršaus, CSS ne visada išsprendžia trivialiai.

Kai kuriais atvejais, kai būtina įdėti puslapio elementus bet kokios svetainės populiarios turinio valdymo sistemos gilumose, vis dėlto būtina atkreipti dėmesį ne tik į eksperimentinę praktiką, bet ir pažvelgti į kolegų patirtį.