CSS Display Property | Forklart

Anders Fjeld Moe
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
  1. element.
    		2.
    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.

    Oracle Database
    Hvordan cache Oracle Sequence for å forbedre dataordboksressursene?
    Alternativene Cache, Noorder og Keep kan brukes til å cache Oracle Sequence for å forbedre datagboks...
    Martin Berge
    Python
    Hva er B -streng i Python?
    I Python brukes B -notasjonen ved siden av vanlig streng og encode () -metoden for å konvertere stre...
    Mathias Halvorsen
    C ++
    Forskjell mellom privat og beskyttet i C ++
    Privat tilgangsspesifikator begrenser synligheten til klassemedlemmer til bare klassen selv. Mens be...
    Daniel Berntsen