Svarbiausias dalykas kuriant tinklalapius yra tinkamas elementų išdėstymas. Tai galima lengvai padaryti naudojant Tailwind „pozicijos“ klases. Padėtis gali būti įvairių tipų, vienas iš jų yra statinis.
Šis tinklaraštis parodys, kaip statiškai nustatyti elemento padėtį.
Kaip statiškai nustatyti elemento padėtį DOM – Tailwind?
Elementas gali būti statiškai išdėstytas naudojant ' statinis “ pozicijos klasė. Statinė padėtis yra numatytoji HTML elementų padėtis. Elementai su ' padėtis: statinė “ yra išdėstyti pagal įprastą puslapio srautą, be jokio CSS stiliaus.
Sintaksė
Taikymo sintaksė statinis “ klasė yra:
Čia elementas gali būti bet kokia žyma, kuriai gali būti pritaikytas pozicijos atributas.
Apsilankykite praktinio statinio padėties nustatymo kodekse:
< kūnas klasė = 'teksto centras' >< centras >
< h1 klasė = 'text-green-600 text-5xl font-bold' >
Statinės padėties pavyzdys
< / h1 >
< b >Tailwind CSS padėties klasė< / b >
< div klasė = 'statinis tekstas kairėje p-2 m-2 bg-green-200 h-48' >
< p klasė = 'paryškintas šriftas' >Statiškai padėtas< / p >
< div >Absoliučiai pozicionuotas elementas< / p >
< / div >
< / div >
< / centras >
< / kūnas >
Šiame kode:
- “ teksto centras “ koreguoja žymų turinį ekrano centre.
- Nustatyti ' “ žymą į žalią, naudodami “ tekstas-žalia-600 “, teksto dydis nustatomas į penkis kartus „ tekstas-5×1 “, o šriftas pabrėžiamas naudojant „ šriftas paryškintas “.
- Du“ “ elementai taip pat sukuriami ir nustato statinę kairiosios pusės poziciją pirmajam “ div ' naudojant ' statinis tekstas kairėje “.
- Priskirkite „klases“ p-2 ', ' m-2 ', ' bg-green-200 ', ' h-48 “ antrajam div ir taip pat nustatykite jo padėtį absoliučiai apačioje kairėje naudodami „ santykinis apačia-0 kairė-0 ' klasė.
Išvestis
Išsaugokite aukščiau pateiktą kodą faile ir peržiūrėkite jo sukurtą tinklalapį, kuris bus rodomas kaip:
Statiškai išdėstytas elementas juda įprastu puslapio srautu, o kitas elementas išlaiko absoliučią padėtį.
Išvada
Norėdami statiškai išdėstyti elementą DOM įprastu dokumento srautu, naudokite „ statinis „Vėjo vėjo klasė“ padėtis ' naudingumas. Šis tinklaraštis parodė, kaip išdėstyti bet kurį elementą ' statiškai “ su paprastu praktiniu demonstravimu.