Szélesség és magasság: határozza meg az elem méreteit. A css szélesség és magasság paraméterek a html oldal elemeinek méretének beállításához Melyik paraméter határozza meg az elem magasságát

példa

HTML

css

eredmény

Hozzáférhetőségi aggályok

Ügyeljen arra, hogy a magassággal beállított elemek ne legyenek csonkolva és/vagy ne takarjanak el más tartalmat, amikor az oldalt nagyítjuk a szöveg méretének növelése érdekében.

Műszaki adatok

Böngésző kompatibilitás

Az ezen az oldalon található kompatibilitási táblázat strukturált adatokból készült. Ha hozzá szeretne járulni az adatokhoz, kérjük, nézze meg a https://github.com/mdn/browser-compat-data webhelyet, és küldjön lehívási kérelmet.

Frissítse a kompatibilitási adatokat a GitHubon

Legenda

Sziasztok kedves olvasók! Ma megnézzük, hogyan lehet beállítani egy weboldal blokkelemeinek méretét a használatával css tulajdonságaités konfigurálja a tartalom megjelenítését arra az esetre, ha az nem férne el az elemben.

szélesség és magasság - elemek szélessége és magassága a css-ben

A szélesség és magasság stílusattribútumok segítségével beállíthatja a blokkelemek szélességét és magasságát:

szélesség: auto|<ширина>|örökölni
magasság:auto|<ширина>|örökölni

Értékként bármilyen css-ben elérhető mértékegység használható – például pixel (px), hüvelyk (inch), pont (pt) stb.:

p(szélesség:200px; magasság:150px)

Az abszolút mértékegységeken kívül beállíthatja az elemek méretének relatív értékét százalékban. Ebben az esetben az elem szélessége és magassága a szülőelem szélességétől és magasságától függ. Ha a szülő nincs kifejezetten megadva, akkor a méretek a böngészőablaktól függenek.

oszt (szélesség:40%;)

Az automatikus érték megadja az elem méretének szabályozását a webböngészőnek, és ez az alapértelmezett érték. Ebben az esetben az elem méretei olyanok lesznek, hogy teljesen illeszkedjen az összes tartalmához.

Nézzünk néhány példát.

Eredmény:

Ebben a példában létrehoztunk egy div blokkot, és beágyaztunk egy p bekezdést szöveggel. A div esetében szigorúan 300 x 300 pixelre állítottuk be a méreteket. A p elem szélessége és magassága tulajdonság értékei automatikusra vannak állítva, így amint a képernyőképen is látható, a szélessége megegyezik a szülőelem szélességével, magassága pedig úgy van beállítva, hogy a bekezdésben található teljes szöveghez illeszkedjen.

Most változtassuk meg a p bekezdés css beállításait, és állítsunk be rögzített méreteket:

réteg2(
háttér: #eee;
szélesség: 250 képpont;
}

Eredmény:

Amint láthatja, a bekezdés szélessége szűkült és 250 pixel, magassága pedig nőtt, hogy a szöveg elférjen, mivel a magasság paraméter továbbra is egyenlő marad az auto értékkel.

Most állítsuk be a bekezdés magasságát és szélességét százalékban:

réteg2(
háttér: #eee;
szélesség:50%;
magasság:50%;
}

Eredmény:

Amint a képen is látható, a p elem szélessége egyenlő lett a div elem szélességének felével. A magasság pedig a div magasságának 75 százalékára nőtt.

Bármely elem szélességének és magasságának relatív mértékegységben történő megadásakor előfordulhat, hogy meg kell adnia a lehetséges legkisebb és maximális méretet. Hiszen például a böngészőablak átméretezésekor az elem mérete csökkenhet és olyan méretűre nőhet, hogy az oldal olvashatósága nagyon alacsony lesz.

A minimális szélességet és magasságot a min-width és min-height attribútumokkal határozhatja meg:

min-szélesség:<ширина>
min-magasság:<высота>

A hasonló stílusú max-width és max-height attribútumok lehetővé teszik a maximális méretek beállítását:

maximális szélesség:<ширина>
maximum magasság:<высота>

Nyilvánvaló, hogy a magasság és a szélesség maximális és minimális értékének beállításakor az elem méretei nem lehetnek nagyobbak a maximumnál és kisebbek a minimális értékeknél.

Érdemes tisztázni, hogy a feladat a magasság és szélesség paramétereknek csak a blokkcímkék esetében van értelme, mivel a soron belüli elemeknél ezeket a paramétereket nem dolgozza fel a böngésző.

Előfordulhat, hogy ha merev magassági és szélességi paramétereket állít be egy elemhez, akkor előfordulhat, hogy az abban található tartalom nem fér bele a korlátozott területbe.

Például csökkentsük a p bekezdés méretét a fenti példákból 100 pixelre:

réteg2(
háttér: #eee;
szélesség: 100 képpont;
magasság: 100 képpont;
}

Eredmény:

Amint látható, a szöveg túllépett a bekezdés határain, és nem tűnik túl szépnek. Az ilyen helyzetek elkerülése érdekében van egy css-szabály - túlcsordulás.

túlcsordulási paraméter a tartalom elrejtéséhez (rejtett, látható) vagy görgetéséhez (görgetés, automatikus).

Tartalomtúlcsordulás akkor fordulhat elő, ha egy elem szélessége és magassága egyaránt korlátozott. Vegyünk két bekezdést:

Első bekezdés szövege

Második bekezdés szövege

Eredmény:

Mivel sem szélesség, sem magasság nincs megadva a bekezdésekhez, a böngésző saját maga számítja ki azokat az automatikus érték saját értelmezése alapján. Ennek eredményeként a bekezdések szélességben az összes rendelkezésre álló helyet elfoglalták, magasságban pedig a bennük lévő tartalomnak megfelelően.

Most korlátozzuk az első bekezdés szélességét:

Első bekezdés szövege

Második bekezdés szövege

Eredmény:

A bekezdés szélessége várhatóan csökken, a magasság pedig úgy van beállítva, hogy a teljes szöveghez illeszkedjen.

Nos, most korlátozzuk az első bekezdés magasságát:

Első bekezdés szövege

Második bekezdés szövege

Ennek eredményeként kiderült, hogy a szöveg nem fér bele egy ilyen szűkített bekezdésbe, ezért az alsó szomszéd területére futott be. Ennek megfelelően gyakorlatilag lehetetlen elolvasni a szöveget sem az első, sem a második bekezdésben. Ez a tartalom viselkedésének szabályozása ilyen helyzetekben túlcsordulási szabály:

túlcsordulás: látható|rejtett|görgetés|automatikus|öröklés

Alapértelmezés szerint a túlcsordulás láthatóra van állítva, ami arra utasítja a böngészőt, hogy olyan tartalmat jelenítsen meg, amely nem fér el a tárolóban. Az eredmény a fenti példában látható.

A szabály mindent elrejt, ami nem fér bele a tárolóba:

A görgetési érték függőleges és vízszintes görgetősávokat jelenít meg az elemen, még akkor is, ha az összes tartalom belefér:

Első bekezdés szövege

Második bekezdés szövege

A legnépszerűbb és leglogikusabb megoldás, ha görgetősávokat kell készíteni a tárolóhoz, az érték auto. Ebben az esetben a böngésző maga határozza meg, hogy mikor és mely tengelyeken érdemes görgetősávokat megjeleníteni:

Első bekezdés szövege

Második bekezdés szövege

Eredmény:

A görgetősávok testreszabhatók az overflow-x és overflow-y stílusattribútumokkal is, amelyek lehetővé teszik a görgetés megjelenítésének testreszabását az egyes tengelyeken. Így felelős vízszintes tengely, de érte függőleges tengely.

Ezért, ha például arra van szüksége, hogy a vízszintes görgetés soha ne jelenjen meg egy bekezdésben, és a függőleges görgetés csak szükség esetén, akkor elegendő a következő css szabályt megírni:

p(túlcsordulás-x:rejtett;túlcsordulás-y:automatikus;)

És a probléma megoldódik.

Ez minden. Viszlát. Ne felejtsen el feliratkozni a blogfrissítésekre, és hálás leszek, ha használja a közösségi hálózat gombjait.

Tematikus anyagok:

Hogyan kell dolgozni a feketelistával?

Korlátlan internet az mts-től

Milyen típusú kapcsolatot kell megadni az útválasztó konfigurálásakor?

Hogyan működik a Yandex Taxi alkalmazás az utasok számára

Minden módon kapcsolatba léphet a Tele2 szolgáltatójával

Tiltsa le a Megafon fizetős szolgáltatásait egy szolgáltatón keresztül

A tarifa leírása "MTS Tablet

Mi a leggyorsabb internet