CSS -bunn

I denne artikkelen vil vi diskutere egenskapen til et element som kalles "bunnen". Denne egenskapen brukes til å definere posisjonsattributtet til ethvert element som er til stede i en HTML -fil. Egenskapen "bunn" er en del av posisjonsegenskapenes delmengde som har en topp, venstre og høyre egenskaper i den. I denne artikkelen vil vi diskutere flere forskjellige metoder som vi kan tildele bunnegenskapen til et element.

Bunnegenskap

Den nederste egenskapen brukes til å definere plasseringen av et element fra basen på siden, og den definerer gapet mellom slutten av siden og elementet. For å definere den nederste egenskapen bruker vi følgende syntaks:

Som vi kan se, er den nederste egenskapen spesifisert ved å kalle nøkkelordet etterfulgt av en verdi som kan variere i fem forskjellige typer som er: Auto, Length, Prosents, Initial og Arve. Den nederste egenskapen vil bare påvirke elementet når posisjonsegenskapen er satt til å fikse, ellers vil det ikke gjelde for elementet.

Metode 01: Bruke automatisk nøkkelord for å tilordne bunnegenskapen i en HTML -fil ved hjelp av inline CSS

I denne metoden vil vi bruke automatisk nøkkelord for å tilordne den nederste egenskapen til et element i en HTML -fil. Dette vil justere elementet med basen på nettleserens side. Vi vil bruke Inline CSS -stylingsformatet i denne metoden for å tilordne bunnegenskapen til et element.

I forrige skript ga vi en overskrift til kroppen ved å bruke H1 -taggen og noen inline CSS også. Så åpnet vi et avsnittskode, og i denne taggen la vi til posisjonen og bunnegenskapen og satte dem til "faste" og "auto". Den faste eiendommen gjør det mulig for bunnen å skape en effekt på avsnitts taggen og justere den i henhold til nettleseren vår. Nå lagrer vi denne filen og kjører den i nettleseren vår for å observere effekten av denne egenskapen.

Som vi kan se i forrige skjermbilde, er avsnittet i Body -taggen til stede mellom siden etter overskriften. Dette skjedde på grunn av posisjonen og bunnegenskapene.

Metode 02: Bruk pikslene til å tilordne bunnegenskapen i en HTML -fil ved hjelp av inline CSS

I denne tilnærmingen vil vi tilordne bunnattributtet til et element i en HTML -fil ved å bruke lengdeformatet (verdi i piksler). Dette vil få elementet til å justere seg med bunnen av nettleserens side ved hjelp av den gitte lengden.

Vi brukte “H1” -merket og noen inline CSS for å gi kroppen en overskrift i forrige skript. Så åpnet vi et avsnittskode og brukte posisjonen og bunnegenskapene på den. Posisjonseiendommen ble deretter satt til “Fikset”, og den nederste eiendommen fikk en pikselverdi på “25px.”Posisjons faste attributt gjør at bunnen får innvirkning på avsnitts -taggen og tilpasse den basert på den angitte lengden og siden i nettleseren vår. Nå lagrer vi denne filen og kjører den i nettleseren vår for å se hvordan denne egenskapen fungerer.

Som vi ser i forrige skjermbilde, er avsnittet i kroppskoden til stede nederst på siden etter overskriften. Vi kan se at det er et gap mellom avsnittet og basen på siden fordi posisjonen og bunnegenskapene er satt til å gi den en lengde på "25px".

Metode 03: Bruke den nederste egenskapen med en "prosentandel" for et element som bruker inline CSS

I denne metoden vil vi bruke prosentformatet for å angi den nederste egenskapen til et element i en HTML -fil. Dette får elementet til å justere seg til bunnen av nettleserens side ved å bruke en prosentvis verdi. I denne metoden vil vi legge til bunnattributtet til et element ved hjelp av inline CSS -stil.

I forrige skript benyttet vi “H1” -merket og noen inline CSS for å gi kroppen en overskrift. Så åpnet vi et avsnittskode og satte sin posisjon og nederste eiendom. Posisjonseiendommen ble deretter satt til "fikset", og den nederste eiendommen fikk en prosentvis verdi som er "30 prosent.”Den faste eiendommen gjør at bunnen kan påvirke avsnitts -taggen og endre den basert på det gitte prosentbeløpet og nettleserens side. Vi lagrer nå denne filen og åpner den i nettleseren vår for å sjekke hvordan denne egenskapen fungerer.

Som det fremgår av forrige eksempel, vises avsnittet i Body -taggen nederst på siden etter overskriften. Posisjonen og bunnattributtene er satt til en prosentvis verdi på "30 prosent", så det er et gap mellom avsnittet og bunnen av siden.

Metode 04: Bruke arve -nøkkelordet for å tilordne den nederste egenskapen i en HTML -fil ved hjelp av inline CSS

I denne tilnærmingen vil vi angi den nederste attributtet til et element i en HTML -fil ved hjelp av arve -nøkkelordet. Dette vil tvinge elementet til å justere seg til bunnen av nettleserens side ved å bruke eiendomsverdien til den nærmeste overordnede funksjonen. Ved å bruke den inline CSS -stilen, vil vi legge den nederste egenskapen til et element i denne tilnærmingen.

I forrige skript åpnet vi et avsnittsmerke og satte sin posisjon og nederste eiendom. Etter det ble posisjonseiendommen satt til "fikset", og den nederste eiendommen fikk nøkkelordet "arve.”Den faste eiendommen gjør at bunnen kan påvirke avsnitts -taggen og endre den basert på nærmeste overordnede funksjons eiendomsverdi og nettleserens side. Denne filen vil nå bli lagret og åpnet i nettleseren vår for å se hvordan denne egenskapen fungerer.

Avsnittet i kroppskoden vises i nærheten av overskriften, som sett i forrige utdrag. Det er et gap mellom avsnittet og overskriften fordi den nederste egenskapen er spesifisert for å gi avsnittet eiendomsfunksjonen til den nærmeste overordnede funksjonen.

Metode 05: Bruke det første nøkkelordet for å tilordne bunnegenskapen i en HTML -fil ved hjelp av inline CSS

Vi bruker det "innledende" nøkkelordet for å angi den nederste egenskapen til et element i en HTML -fil. Dette vil tvinge elementet til å justere seg til bunnen av nettleserens side ved hjelp av nettleserens standardinnstillinger. I denne metoden vil vi legge til bunnattributtet til et element ved hjelp av Inline CSS -stil.

Vi åpnet et avsnittskode og satte sin posisjon og bunnegenskap som vist i skriptet ovenfor. Posisjonseiendommen ble deretter satt til "fikset", og den nederste egenskapen mottok nøkkelordet "initial.”Posisjons faste attributt gjør at bunnen kan påvirke avsnitts -taggen og endre den basert på nettleserens standardinnstillinger. Denne filen er nå lagret og sett i nettleseren vår for å demonstrere bruken av denne funksjonen.

Som observert i forrige utdrag. Siden den nederste egenskapen er spesifisert for å endre avsnittet til nettleserens standardinnstillinger, er det et gap mellom avsnittet og overskriften.

Konklusjon

Den nederste egenskapen til CSS har blitt adressert i denne artikkelen. Den nederste egenskapen er inkludert i en undergruppe av posisjonsegenskaper som venstre, høyre og topp, og den er avhengig av posisjonseiendommen som vi forklarte. Vi implementerte dette konseptet med variasjoner i verdens format ved å bruke Notisblokk ++ for å redigere HTML -filen.