Gjerësia dhe lartësia: përcaktoni madhësinë e elementit. Gjerësia dhe parametrat e lartësisë CSS për madhësinë e elementeve të faqes html Gjerësia mbizotëruese e bllokut

Shembull

Html

CSS

Rezultati

Shqetësimet e aksesit

Sigurohuni që elementët e vendosur me një lartësi të mos cungohen dhe / ose mos errësojnë përmbajtjen tjetër kur faqja zmadhohet për të rritur madhësinë e tekstit.

Specifikimet

Përputhshmëria e shfletuesit

Tabela e pajtueshmërisë në këtë faqe gjenerohet nga të dhëna të strukturuara. Nëse dëshironi të kontribuoni në të dhëna, shikoni https://github.com/mdn/browser-compat-data dhe na dërgoni një kërkesë tërheqjeje.

Përditësoni të dhënat e përputhshmërisë në GitHub

Legjenda

Si parazgjedhje, autowidth përdoret për elementët e bllokut. Kjo do të thotë që elementi do të shtrihet horizontalisht me saktësisht aq sa ka hapësirë \u200b\u200btë lirë. Lartësia e paracaktuar e elementeve të bllokut vendoset automatikisht, d.m.th. shfletuesi shtrin zonën e përmbajtjes vertikalisht për të shfaqur të gjithë përmbajtjen. Për të vendosur dimensione të personalizuara për zonën e përmbajtjes së një elementi, mund të përdorni vetitë e gjerësisë dhe lartësisë.

Veçoria CSS e gjerësisë ju lejon të vendosni gjerësinë e zonës së përmbajtjes së elementit dhe pronën e lartësisë lartësinë e zonës së përmbajtjes:

Vini re se vetitë e gjerësisë dhe lartësisë përcaktojnë vetëm madhësinë e zonës së përmbajtjes; për të llogaritur gjerësinë totale të një elementi blloku, shtoni gjerësinë e zonës së përmbajtjes, mbushjen majtas dhe djathtas dhe gjerësinë e kufirit të majtë dhe të djathtë. E njëjta gjë vlen për lartësinë totale të elementit, vetëm të gjitha vlerat llogariten vertikalisht:

Për këtë paragraf, ne do të vendosim vetëm gjerësinë dhe lartësinë.

Ky paragraf përmban, përveç gjerësisë dhe lartësisë, mbushjen, kufirin dhe mbushjen.

Shembulli tregon qartë se elementi i dytë zë më shumë hapësirë \u200b\u200bsesa i pari. Nëse llogarisim sipas formulës sonë, atëherë dimensionet e paragrafit të parë janë 150x100 piksel, dhe dimensionet e paragrafit të dytë janë:

dmth 180x130 piksel.

Mbingarkesa e elementeve

Pasi të keni përcaktuar gjerësinë dhe lartësinë për elementin, ia vlen t'i kushtohet vëmendje një pike të rëndësishme - përmbajtja e vendosur brenda elementit mund të tejkalojë madhësinë e specifikuar të bllokut. Në këtë rast, një pjesë e përmbajtjes do të shkojë përtej kufijve të elementit, për të shmangur këtë moment të pakëndshëm, mund të përdorni vetinë e tejmbushjes së CSS. Prona e tejmbushjes i tregon shfletuesit se çfarë të bëjë nëse përmbajtja e bllokut tejkalon madhësinë e tij. Kjo pronë mund të marrë një nga katër vlerat:

• e dukshme është vlera e paracaktuar e përdorur nga shfletuesi. Vendosja e kësaj vlere do të ketë të njëjtin efekt si mosvendosja e pronës së tejmbushjes.
• lëviz - shton shiritat lëvizës vertikalë dhe horizontalë në element.
• automatik - shton shiritat lëvizës sipas nevojës.
• fshehur - fsheh disa nga përmbajtjet që tejkalojnë kufijtë e elementit bllok.

Karakteristikat e gjerësisë css janë përgjegjëse për vlerën e gjerësisë së zonës së përmbajtjes së elementit.

Gjerësia: vlera | interesi | automatike | trashëgoj

Prona e lartësisë css është përgjegjëse për vlerën e lartësisë së zonës së përmbajtjes së elementit.

Lartësia: vlera | interesi | automatike | trashëgoj

Vlerat negative për lartësinë dhe gjerësinë nuk lejohen.

Duket se gjithçka është e thjeshtë dhe e qartë me këto veti të CSS, por, në fakt, gjithçka rezulton të mos jetë aq e thjeshtë.

Vendosja e një gjerësie në një element në një faqe në internet duke përdorur vetinë e gjerësisë prej 500px nuk do të thotë që gjerësia totale e këtij elementi do të jetë 500 piksel ose më pak.

Gjëja më e rëndësishme për të kuptuar është se gjerësia dhe vetitë e lartësisë përcaktojnë gjerësinë dhe lartësinë për zonën e përmbajtjes.

Karakteristikat e gjerësisë dhe lartësisë janë vetëm një nga përbërësit nga të cilët do të llogaritet gjerësia dhe lartësia totale e elementit. Ato tregojnë gjerësinë dhe lartësinë e zonës së përmbajtjes, të cilat mund të shihen në imazhin vijues. Gjithashtu, prona të tilla si mbushja, kufiri dhe kufiri janë të përfshirë në formimin e gjerësisë dhe lartësisë së përgjithshme.

Kjo mund të shihet lehtësisht tani.

Le të marrim, për shembull, dy blloqe me të njëjtën gjerësi, por njëri prej tyre do të vendosë veçorinë e mbushjes.

Si parazgjedhje, faqet e internetit kanë sjelljen që vlera e mbushjes për anën përkatëse u shtohet vlerave të lartësisë dhe gjerësisë.

Ata. gjerësia totale e elementit do të përbëhet nga vlera e vetisë së gjerësisë së elementit, dhe vlerat e mbushjes majtas dhe djathtas mbushjes do t'i shtohen asaj.

Për lloje të ndryshme të elementeve që mund të gjenden në faqe, gjerësia dhe lartësia totale e elementeve llogaritet duke përdorur formula të veçanta.

Për lloje të ndryshme të elementeve që mund të gjenden në faqet e internetit, vlerat e gjerësisë dhe lartësisë mund të kenë sjellje dhe vlera të ndryshme.

Një situatë e ngjashme do të jetë me lartësinë e pronës.

CSS ka një algoritëm të veçantë që llogarit vlerat e gjerësisë dhe lartësisë për elementë të ndryshëm në një faqe në internet. Unë nuk do të merrem me këtë algoritëm tani, sepse është disi e komplikuar.

Tani gjëja kryesore që ne duhet të kuptojmë është se gjerësia dhe vetitë e lartësisë na lejojnë të punojmë me gjerësinë dhe lartësinë e zonës me përmbajtjen e elementit, dhe jo me gjerësinë dhe lartësinë totale të elementit.