CSS Display Property | Forklart

HTML -elementer er vanligvis delt inn i to klasser som er; inline elementer og elementer på blokknivå. Inline-elementer bruker bare det nødvendige rommet på en webside. Imidlertid konsumerer blokknivåelementer hele det horisontale rommet. Dette blir sett på som deres visningsatferd som kan endres ved hjelp av CSS Display -egenskapen. Denne oppskrivningen er ment å opplyse leserne om detaljene i visningsegenskapen.

Vis eiendom

Som navnet antyder, definerer CSS Display -egenskapen hvordan HTML -elementer vises på en webside. Denne egenskapen kan være til stor nytte når du vil endre den vanlige oppførselen til et HTML -element. Anta at du av en eller annen grunn vil bytte tilstanden til et inline-element til et blokknivåelement, så kan du bruke denne egenskapen til å gjøre denne endringen.

Syntaks

skjerm: verdi;

Her har vi demonstrert noen verdier av visningsegenskaper for din bedre forståelse.

Inline elementer

Elementer som bare bruker den nødvendige mengden plass, kalles inline elementer. De kan også omtales som elementer som vises i en linje.Disse elementene starter ikke fra en ny linje, dessuten kan du plassere flere inline -elementer på samme linje. Noen eksempler er ,, osv.

Hvordan konvertere elementer på blokknivå til inline elementer ved hjelp av displayegenskaper

I dette eksemplet lager vi tre elementer og setter verdien av visningsegenskapen som "inline", derfor vil alle elementene vises i en enkelt linje og bare konsumere mengden nødvendig plass.

Produksjon

Selv om element som standard er et blokknivåelement, men når du setter visningsegenskapsverdien til "inline", vil det oppføre seg som et inline element.

Elementer på blokknivå

Elementer som bruker all tilgjengelig plass (fra venstre til høyre), og starter fra en ny linje blir sett på som blokknivåelementer. Blokkernivåelementer er i stand til å holde inline elementer sammen med andre blokknivåelementer. Flertallet av elementene i HTML er blokknivåelementer. Noen eksempler er ,

, etc.

Hvordan konvertere inline elementer til elementer på blokknivå ved hjelp av displayegenskaper

Av hensyn til dette eksemplet vil vi vurdere to elementer og sette visningsegenskapsverdien til "blokkere". Som et resultat vil begge elementene konsumere hele det horisontale rommet, og fungere som elementer på blokknivå. Selv om element som standard er et inline element.

Produksjon

Flex Display

Denne verdien justerer elementer i en beholder effektivt. Det distribuerer også plassen blant elementer som er til stede i en beholder.

Hvordan fungerer flexverdien til visningseiendommer

I dette eksemplet har vi illustrert flexverdien til displayegenskapen. Vi har opprettet fem

elementer i et element som har klasse Flex-Container, og vi har tildelt "flex" -verdien til displayegenskapen til

elementer.

Produksjon

Rutenett

Nettverdien til displayegenskapen er nyttig når du legger ut elementer i form av et rutenett, dessuten, når du bruker rutenett, er det ikke nødvendig å bruke flyter og posisjonering.

Hvordan fungerer nettverdien til Display Property

I dette eksemplet har vi opprettet seks elementer i et større element som har klassenett-container, og vi har tildelt "rutenett" -verdien til displayegenskapen til

elementer

Produksjon

Det er en rekke andre verdier som kan tilordnes visningsegenskapen som er som følger.

Verdi

Beskrivelse

på linje

Denne verdien viser elementer som inline elementer.

blokkere

Denne verdien viser elementer som elementer på blokknivå.

innhold

Denne verdien får en beholder til å forsvinne.

Flex

Denne verdien viser elementer som flex-containere på blokknivå.

Nett

Denne verdien viser elementer som blokknivånettbeholdere.

Inline-block

Denne verdien viser elementer som blokkbeholdere på nettet nivå.

inline-flex

Denne verdien viser elementer som flex-containere på nettet nivå.

Inline-nett

Denne verdien viser elementer som nettnivå nettbeholdere.

inline-table

Denne verdien viser tabeller på inline-nivå.

Liste-element

Denne verdien viser alle elementene i en

element.

Run-in

Denne verdien på grunnlag av konteksten viser elementer som enten inline- eller blokknivåelementer.

bord

Denne verdien gjengir elementer til å oppføre seg som elementer. element.

Tabell-klemmede	Denne verdien gjengir elementer for å oppføre seg som elementer.
Bord-kolonne-gruppe	Denne verdien gjengir elementer for å oppføre seg som element.
Tabell-header-gruppe	Denne verdien gjengir elementer for å oppføre seg som element.
Bordfoter-gruppe	Denne verdien gjengir elementer for å oppføre seg som element.
Tabell-rad-gruppe	Denne verdien gjengir elementer for å oppføre seg som element.
Bordcelle	Denne verdien gjengir elementer til å oppføre seg som	element.
bordkolonne	Denne verdien gjengir elementer for å oppføre seg som element.
Tabell-rad	Denne verdien gjengir elementer til å oppføre seg som
ingen	Denne verdien fjerner hele elementet.
første	Denne verdien viser standardverdien til elementet.
arve	Denne verdien lar et element arve egenskaper fra overordnet element.

For bedre forståelse kan du prøve noen andre verdier av displayegenskaper for å se hvordan de fungerer.

Konklusjon

CSS Display-egenskapen definerer hvordan HTML-elementer vises på en webside, dessuten, ved å bruke denne egenskapen, kan du endre standardoppførselen til et HTML-element, for eksempel kan du gjøre et inline-element som oppfører seg som blokknivåelement og omvendt. Det er et stort utvalg av verdier du kan bruke på visningsegenskapen, hver med et annet formål. I denne oppskrivningen diskuteres visningsegenskapen i dybden sammen med passende eksempler.

C ++

Hvordan erklære variabler i C++?

For å erklære en variabel i C ++, må du spesifisere datatypen og navnet. Les videre denne guiden for...

Simen Stensrud

Golang

Hva er konstanter i Golang?

På GO -språket er konstanter variabler med faste verdier som ikke kan endres under utførelse av prog...

Oskar Fossum

PHP

Hvorfor PHP skal brukes i nettutvikling

PHP er et godt valg for webutvikling på grunn av sin enkelhet, fleksibilitet, hastighet, gjenbrukbar...

Daniel Johnsen