Eksempel

HTML

CSS

Resultat

Bekymringer om tilgjengelighet

Sørg for at elementer satt med en høyde ikke avkortes og/eller ikke skjuler annet innhold når siden zoomes inn for å øke tekststørrelsen.

Spesifikasjoner

Nettleserkompatibilitet

Kompatibilitetstabellen på denne siden er generert fra strukturerte data. Hvis du ønsker å bidra til dataene, vennligst sjekk ut https://github.com/mdn/browser-compat-data og send oss ​​en pull-forespørsel.

Oppdater kompatibilitetsdata på GitHub

Legende

Hei kjære lesere! I dag skal vi se på hvordan du setter størrelsen på blokkelementer på en nettside ved hjelp av CSS-egenskaper og konfigurerer visning av innhold hvis det ikke passer inn i elementet.

bredde og høyde - bredde og høyde på elementer i css

Ved å bruke bredde- og høydestilattributtene kan du angi henholdsvis bredden og høyden på blokkelementer:

bredde: auto|<ширина>|arve
høyde: auto|<ширина>|arve

Som verdier kan du bruke alle tilgjengelige måleenheter i css - for eksempel piksler (px), tommer (in), poeng (pt) osv.:

p (bredde:200px; høyde:150px)

I tillegg til absolutte enheter, kan du angi den relative størrelsen på elementer som en prosentandel. I dette tilfellet vil bredden og høyden på elementet avhenge av bredden og høyden på det overordnede elementet. Hvis overordnet ikke er eksplisitt spesifisert, vil dimensjonene avhenge av nettleservinduet.

div (bredde:40%;)

Auto overlater kontrollen over elementstørrelsen til nettleseren og er standardverdien. I dette tilfellet vil dimensjonene til elementet være slik at det passer helt til alt innholdet.

La oss se på noen få eksempler.

Resultat:

I dette eksemplet laget vi en div og nestet et avsnitt p med tekst inni den. For div setter vi strengt dimensjonene til 300 x 300 piksler. p-elementet har verdier for bredde- og høydeegenskapene lik auto, så som du kan se på skjermbildet, er bredden satt lik bredden på det overordnede elementet, og høyden er slik at den passer til all teksten i avsnittet.

La oss nå endre css-innstillingene for avsnitt p og angi faste dimensjoner:

Layer2 (
bakgrunn: #eee;
bredde:250px;
}

Resultat:

Som du kan se, har bredden på avsnittet blitt smalere og lik 250 piksler, og høyden har økt slik at teksten passer, siden høydeparameteren forble lik auto.

La oss nå angi høyden og bredden på avsnittet i prosenter:

Layer2 (
bakgrunn: #eee;
bredde:50%;
høyde:50%;
}

Resultat:

Som du kan se på bildet er bredden på p-elementet blitt lik halvparten av bredden på div-elementet. Og høyden økte og ble lik 75 prosent av høyden på div.

Når du spesifiserer bredden og høyden på elementer i relative enheter, må du kanskje spesifisere minimums- og maksimumsstørrelser. Når alt kommer til alt, for eksempel, når du endrer størrelse på nettleservinduet, kan dimensjonene til elementet reduseres og øke til en slik størrelse at lesbarheten til nettstedet blir veldig lav.

Du kan definere minimumsbredden og -høyden ved å bruke attributtene min-bredde og min-høyde:

min bredde:<ширина>
min-høyde:<высота>

Lignende stilattributter maks-bredde og maks-høyde lar deg angi maksimale størrelser:

maks-bredde:<ширина>
maks-høyde:<высота>

Det er klart at når du angir maksimums- og minimumsverdier for høyde og bredde, kan ikke dimensjonene til elementet bli større enn maksimum og mindre enn minimumsverdiene.

Det er verdt å presisere at oppgaven høyde- og breddeparametere gir bare mening for blokketiketter, siden for innebygde elementer blir disse parameterne ikke behandlet av nettleseren.

Det kan skje at når du angir stive parametere for høyden og bredden til et element, kan det hende at innholdet det inneholder ikke passer inn i det begrensede området.

La oss for eksempel redusere størrelsen på avsnitt p fra eksemplene diskutert ovenfor til 100 piksler:

Layer2 (
bakgrunn: #eee;
bredde:100px;
høyde:100px;
}

Resultat:

Som du kan se, har teksten gått utover grensene til avsnittet, og det ser ikke veldig pent ut. For å unngå slike situasjoner finnes det en CSS-regel – overløp.

Overløpsparameter for å skjule (skjult, synlig) eller rulle (rulling, auto) innhold

Innholdsoverflyt kan oppstå når både bredden og høyden til et element er begrenset. La oss se på to avsnitt:

Tekst i første ledd

Andre ledd tekst

Resultat:

Siden verken bredden eller høyden for avsnitt er spesifisert, beregner nettleseren dem uavhengig basert på sin egen forståelse av verdien av auto. Som et resultat tok avsnittene opp all tilgjengelig plass i bredden og i høyden i samsvar med innholdet de inneholdt.

La oss nå begrense bredden på det første avsnittet:

Tekst i første ledd

Andre ledd tekst

Resultat:

Bredden på avsnittet ble forventet redusert, og høyden ble satt til å romme hele teksten.

Vel, la oss nå begrense høyden på første avsnitt:

Tekst i første ledd

Andre ledd tekst

Som et resultat viste det seg at teksten ikke passet inn i et så begrenset avsnitt, og derfor løp den inn i området til den nedre naboen. Følgelig er det praktisk talt umulig å lese teksten i verken første eller andre ledd. Det er å kontrollere atferden til innhold i slike situasjoner som det er overløpsregel:

overflyt: synlig|skjult|scroll|auto|arv

Som standard er overflyt satt til synlig, noe som forteller nettleseren å vise innhold som ikke passer i beholderen. Resultatet kan sees i eksempelet ovenfor.

Regelen skjuler alt som ikke får plass i beholderen:

Rulleverdien vil vise vertikale og horisontale rullefelt på elementet selv om alt innholdet passer:

Tekst i første ledd

Andre ledd tekst

Den mest populære og logiske løsningen hvis du trenger å lage rullefelt for en beholder er verdien auto. I dette tilfellet vil nettleseren selv bestemme når og på hvilke akser den skal vise rullefelt:

Tekst i første ledd

Andre ledd tekst

Resultat:

For å tilpasse rullefelt kan du også bruke stilattributtene overflow-x og overflow-y, som lar deg tilpasse visningen av rulling på individuelle akser. Dermed er ansvarlig for horisontal akse, og for vertikal akse.

Derfor, hvis du for eksempel trenger horisontal rulling for å aldri vises i et avsnitt, og vertikal rulling for å vises bare når det er nødvendig, er det bare å skrive følgende css-regel:

p(overflyt-x:skjult;overløp-y:auto;)

Og problemet vil bli løst.

Det er alt. Til neste gang. Ikke glem å abonnere på bloggoppdateringer, og jeg vil være takknemlig hvis du bruker knappene for sosiale nettverk.

Element høyde og bredde er beregnede mengder. Hvert element på en nettside danner et rektangulært område, som igjen består av flere områder - innholdsområder, polstringsområder, rammeområder Og feltområder element.

Mellom elementets innhold og dets grense er innrykk polstring, utenfor elementets grense - Enger margin . Et innholdsområde finnes for hvert element; andre områder er valgfrie.

1. Elementhøyde

Height-egenskapen spesifiserer høyden på blokkelementets innhold og har ingen effekt på visning av inline-elementer: inline; . Høyden på inline-elementer er lik høyden på innholdet. Negative verdier er ikke tillatt. Eiendommen går ikke i arv.

Syntaks

P (høyde: 100px;)

2. Elementbredde

Width-egenskapen spesifiserer bredden på blokkelementets innhold og har ingen effekt på visning av inline-elementer: inline; . Bredden på inline-elementer er lik bredden på innholdet. Negative verdier er ikke tillatt. Eiendommen går ikke i arv.

Syntaks

P (bredde: 100px;)

3. Høyde og bredde på et absolutt plassert element

Still inn bredden og høyden til en absolutt plassert elementposisjon: absolutt; ikke alltid nødvendig, siden i dette tilfellet er høyden og bredden implisitt bestemt av elementets forskyvning. Hvis et element har kantlinjer og marger spesifisert, reduserer de størrelsen på innholdsområdet med de riktige verdiene.

Div ( bakgrunn: #6A7690; posisjon: absolutt; topp: 0; bunn: 0; venstre: 50%; høyre: 0; ) /*i dette tilfellet er høyden på elementet 100 %, bredden er 50 % av den overordnede blokken*/
Ris. 2. Høyde og bredde på et absolutt plassert element

4. Elementpolstring

Ved å bruke padding-egenskapen kan du angi padding samtidig for flere sider av et element i følgende rekkefølge: . Hvis elementet har en bakgrunn, vil det også gjelde for polstringen. Negative verdier er ikke tillatt. Eiendommen går ikke i arv.

Hvis tre verdier er gitt, for eksempel div (utfylling: 10px 20px 30px;), vil de bli fordelt i følgende rekkefølge: den første verdien er topputfyllingen, den andre er høyre og venstre utfylling, den tredje er bunnpolstringen.
Hvis to verdier er gitt, for eksempel div (utfylling: 10px 20px;), vil den første sette topp- og bunnpolstringen, den andre vil sette høyre og venstre.
En enkelt verdi, for eksempel div (utfylling: 10px;) , vil sette den samme utfyllingen på alle sider av elementet.

Syntaks

P (polstring: 5px 10px 15px 10px;)

4.1. Polstring på den ene siden av et element

For å angi polstring på bare én side av et element, må du bruke en av egenskapene padding-top , padding-right , padding-bottom , padding-left , for eksempel:

P (polstring-venstre: 10px;)

5. Elementmarger

De fleste elementene er adskilt fra hverandre med marginer. Margin-egenskapen er en kort form for å registrere feltene til et element i følgende rekkefølge: topp, høyre, bunn, venstre. Brukes når du skal sette marger på flere sider, men ikke nødvendigvis på fire. Vertikalt tilstøtende marger på blokkelementer er slått sammen, og topp- og bunnmarger har ingen effekt på innebygde elementer. Negative verdier er tillatt. Eiendommen går ikke i arv.

Hvis tre verdier er gitt, for eksempel div (margin: 10px 20px 30px;), vil de bli fordelt i følgende rekkefølge: den første verdien er toppmargen, den andre er høyre og venstre marg, den tredje er bunnmargen.
Hvis to verdier er gitt, for eksempel div (margin: 10px 20px;), vil den første angi topp- og bunnmargen, den andre vil sette høyre og venstre.
En enkelt verdi, for eksempel div (margin: 10px;) , vil sette like marginer på alle sider av elementet.

(margin: 0 auto;) vil bare fungere hvis elementets bredde er spesifisert eksplisitt.

Syntaks

Div (margin: 5px 10px 2px 5px;)

5.1. Marger på den ene siden av elementet

Egenskapene margin-top , margin-right , margin-bottom , margin-venstre styrer de tilsvarende margene på hver side av elementet, for eksempel:

P (margin-venstre: 10px;)

6. Bredde- og høydebegrensning

CSS støtter også flere andre egenskaper relatert til innstilling av høyde og bredde på nettsideelementer: min-høyde, min-bredde, maks-høyde og maks-bredde. Disse egenskapene lar deg angi minimums- og maksimumsverdier for et elements bredde eller høyde, noe som gir elementet muligheten til å fylle den tilgjengelige plassen. Egenskaper brukes ofte til responsiv nettsidedesign. Gjelder alle elementer unntatt inline- og tabellelementer. De kommer alltid etter hovedregelen, dvs. etter å ha gitt elementet høyde eller bredde . Ikke arvet.

Du kan spesifisere vanlige dimensjoner ved å bruke noen måleenheter, og størrelsesbegrensninger ved å bruke andre enheter, for eksempel:

Div ( bredde: 400 px; maks bredde: 50 %; )

Elementet vil kun ha en bredde på 400px hvis denne verdien ikke overstiger 50 % av bredden på beholderblokken, ellers vil bredden reduseres.

I denne artikkelen skal vi se på hvordan du i CSS kan angi høyden på en blokk som en prosentandel av dens bredde. La oss vurdere bruken av denne teknologien ved å bruke eksemplet med å lage en Bootstrap-karusell (glidebryter) fra bilder i forskjellige størrelser.

Å lage en blokk med en høyde som er en viss prosentandel av dens bredde

1. Lag en HTML-struktur med 2 blokker:
   Den første blokken har 2 klasser. Ved å bruke den element-responsive klassen vil vi angi blokkens relative plassering. Dette må gjøres slik at blokk 2 (som vil ha absolutt posisjonering) er plassert i forhold til den. I tillegg brukes denne klassen også til å legge til et pseudo-element:before før innholdet i de tilsvarende elementene (item-responsive). Dette elementet vil angi den nødvendige blokkhøyden i forhold til bredden ved hjelp av CSS-egenskapen for polstring. Trikset med denne metoden er at hvis padding-egenskapen er satt til ikke i piksler, men i prosent, så vil den beregnes av nettleseren i forhold til bredden. På denne måten kan du få en blokk med ønsket høyde. Det neste trinnet er å gi blokk 2 en absolutt posisjon og justere den med den første blokken.
2. Legg til følgende CSS-kode på siden: .item-responsive ( posisjon: relativ; /* relativ posisjonering */ ) .item-responsive:before ( display: block; /* vis elementet som en blokk */ content: "" ; /* innhold pseudo-element */ width: 100%; /* element width */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive >.content ( posisjon: absolutt; /* absolutt posisjon til elementet */ /* posisjon til elementet */ topp: 0; venstre: 0; høyre: 0; bunn: 0; ) /* Om nødvendig (for blokker som har disse klassene) */ .item -4by3 ( padding-top: 75%; /* (3:4)*100% */ ) .item-2by1 ( padding-top: 50%; /* (1:2) *100 % */ ) .item -1by1 ( padding-top: 100 %; /* (1:1)*100 % */ )

Bruk av teknologien ovenfor for å lage en Bootstrap-karusell

Hvis du ikke er kjent med Bootstrap og ønsker å vite hva det er, kan du bruke artikkelen Introduction to Bootstrap.

La oss se på et eksempel der vi vil bruke HTML-strukturen og CSS-koden ovenfor for å vise Bootstrap-karusellbilder.

Vi vil bruke følgende filer som bilder:

• carousel_1.jpg (bredde = 736px, høyde = 552px, sideforhold (høyde til bredde) = 1,33);
• carousel_2.jpg (bredde = 1155px, høyde = 1280px, sideforhold (høyde til bredde) = 0,9);
• carousel_3.jpg (bredde = 1846px, høyde = 1028px, sideforhold (høyde til bredde) = 1,8);
• carousel_4.jpg (bredde = 1140px, høyde = 550px, sideforhold (høyde til bredde) = 2,07);
• carousel_5.jpg (bredde = 800px, høyde = 600px, sideforhold (høyde til bredde) = 1,33);

Vi vil sette bildene som bakgrunn. Dette vil tillate deg å bruke 3 bilder med ulik sideforhold i Bootstrap-karusellen.

HTML-oppmerking av karusellen:

Karusell CSS-kode:

Item-responsive ( posisjon: relativ; /* relativ posisjonering */ ) .item-responsive:before ( display: block; /* vis elementet som en blokk */ innhold: ""; /* pseudo-element innhold */ width : 100%; /* elementbredde */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive>.content (posisjon: absolutt; /* absolutt plassering av elementet * / /* elementposisjon */ topp: 0; venstre: 0; høyre: 0; bunn: 0; bakgrunnsstørrelse: omslag !viktig; )

For at et objekt skal få en bestemt bredde og høyde er det to egenskaper i CSS – henholdsvis bredde og høyde. Med deres hjelp kan du angi faste størrelser for elementer, enten det er sidefelt, bilde, tabell eller hvilken som helst blokk.

Funksjoner for å beregne bredde og høyde

Du kan bruke hvilken som helst lengdeenhet i CSS for å definere bredden eller høyden til et objekt. Piksler er de enkleste å forstå. Hvis du bruker prosentnotasjon, husk at bredden på objektet vil avhenge av bredden på det overordnede. Hvis det ikke er noen, beregnes bredden på elementet basert på bredden på nettleservinduet (hvis brukeren endrer vindusbredden, vil breddeverdien bli beregnet på nytt).

Du kan også bruke em-enheten som breddeverdien, som er omtrent den samme som tekstens skriftstørrelse, men bare i konvensjonelle enheter. Du setter for eksempel skriftstørrelsen til 24px. Da vil 1em for dette elementet være lik 24px, og hvis du setter bredden: 2em, blir bredden 2x24px = 48 piksler. Hvis skriftstørrelsen ikke er angitt, vil den bli arvet.

Høyde, spesifisert i prosent, beregnes på samme måte som bredde, men beregningen er basert på høyden på det overordnede elementet i stedet for dets bredde. Hvis det ikke er noen forelder, vil høyden avhenge av høyden på nettleservinduet.

Den prosentvise bredden og høyden til det underordnede elementet beregnes basert på dimensjonene til overordnet

Hva er inkludert i bredde og høyde

Det er verdt å huske med en gang at bredde- og høydeegenskapene har en særegenhet - de inkluderer ikke verdiene for margin, polstring og kant. Verdien du angir for bredde/høyde vil kun indikere bredden/høyden på elementets innholdsområde.

Så for å beregne, for eksempel, den faktiske bredden til et element (plassen det faktisk vil oppta på skjermen), kreves det litt aritmetikk. Den faktiske bredden er summen av verdier som bredde, polstring, kantlinje og margin. Husk at vi tidligere har sett på hvordan CSS-boksmodellen ser ut.

For å konsolidere kunnskap, vil vi vise et eksempel. La oss si at du har et element med denne stilen:

Bredde: 200px; marg-venstre: 15px; marg-høyre: 15px; polstring-venstre: 10px; kantlinje-venstre: 3px solid #333;

For å beregne den faktiske bredden på elementet, utfør tillegget:

bredde + marg-venstre + marg-høyre + polstring-venstre + kantlinje-venstre = 200px + 15px + 15px + 10px + 3px = 243px (faktisk bredde)

Høydeegenskapen kan være nyttig hvis du trenger å kontrollere nøyaktig, for eksempel høyden på et bilde. Men hvis beholderen vil inneholde tekst eller annet innhold som kan variere i høyde, anbefales det sterkt ikke å sette en fast høyde for beholderen, siden en slik layout kan føre til et uventet resultat - innholdet vil vises på toppen av annet innhold.

I stedet for en fast høyde, bruk høyde: auto - denne oppføringen betyr at høyden på objektet beregnes automatisk, avhengig av innholdet det inneholder.

En annen måte å unngå layoutkollaps på er å bruke overflow: auto notation. I dette tilfellet, hvis høyden på innholdet overstiger høyden på beholderen, vil nettleseren legge til en rullefelt i beholderen.

I neste leksjon vil du lære hvordan du kan overstyre bredden til et element ved å bruke en interessant og veldig nyttig egenskap