Kõrgus - CSS-trikid

Anonim

heightVara CSS määratleb täpsustab sisu kõrgus kastid ja aktsepteerib tahes pikkusega väärtusi.

Sisupiirkond on määratletud kui polsterdus ja ääris lisaks kõrgusele / laiusele või suurusele, mille sisu ise võtab.

Selliseid negatiivseid väärtusi nagu height: -100pxei aktsepteerita. heightOmadus ei kehti mitte-asendatud inline elemente, sealhulgas tabeli veergude ja tulpade rühmad.

.wrap ( height: auto; /* auto keyword */ height: 120px; /* length values */ height: 10em; height: 0; /* unit-less length is OK for zero */ height: 75%; /* percentage value */ height: inherit; /* inherited value from parent element */ )
Vaadake seda pliiatsit!

Kui sisaldava ploki kõrgus pole selgesõnaliselt määratletud ja element pole absoluutselt paigutatud, arvutatakse selle kõrguse väärtus automaatselt (see on sama kõrge kui selle sees olev sisu või null, kui sisu pole). Kui elementide sisu osa nõuab rohkem vertikaalset ruumi kui määratud väärtusest saadaval on, määratleb elementide käitumise overflowomadus.

Kui kasutate märksõna auto, heightarvutatakse elemendid sisu ala kui ei ole selgesõnaliselt määratletud. See tähendab, et protsendil põhinev väärtus on endiselt elementide sisupiirkonna väärtus. Samamoodi, kui konteineri kõrguseks määratakse protsentuaalne väärtus, põhineb lapse elementide protsendi kõrgus ikkagi selle algelementi sisualal.

Kõrgust saab kasutada ka animeeritava omadusena.

Brauseri tugi

IE Edge Firefox Chrome Safari Ooper
Kõik Kõik Kõik Kõik Kõik Kõik
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mobile
Kõik Kõik Kõik Kõik Kõik
Allikas: caniuse

Seotud omadused

Almanahh 15. jaanuaril 2021

max-kõrgus

.element ( max-height: 3rem; ) Sara Cope