Az elem magassága és szélessége számított értékek. A weblap minden eleme egy téglalap alakú területet képez, amely viszont több területből áll - tartalomterület (tartalom), párnázott területek, keretterületekés mezei területek elem.
Az elem tartalma és határa között vannak behúzás párnázás, az elem határán kívül - mezőketárrés. Minden elemnek van egy tartalmi területe, más területek nem kötelezőek.
Rizs. 1. Egy elem blokkmodellje 1. Elem magassága
A magasság tulajdonság a blokk elem tartalmának magasságát állítja be, és nincs hatással az inline elemek megjelenítésére: inline; ... A soros elemek magassága megegyezik tartalmuk magasságával. Negatív értékek nem megengedettek. Az ingatlan nem öröklődik.
Szintaxis
P (magasság: 100 képpont;)
2. Elem szélessége
A szélesség tulajdonság a blokk elem tartalmának szélességét állítja be, és nincs hatással az inline elemek megjelenítésére: inline; ... A soron belüli elemek szélessége megegyezik a tartalmukéval. Negatív értékek nem megengedettek. Az ingatlan nem öröklődik.
Szintaxis
P (szélesség: 100 képpont;)
3. Abszolút elhelyezett elem magassága és szélessége
Állítsa be az abszolút elhelyezett elempozíció szélességét és magasságát: abszolút; nem mindig szükséges, mivel ebben az esetben a magasságot és a szélességet implicit módon az elem eltolása határozza meg. Ha szegélyek és margók vannak megadva egy elemhez, azok a megfelelő értékekkel csökkentik a tartalomterület méretét.
Div (háttér: # 6A7690; pozíció: abszolút; felül: 0; alsó: 0; bal: 50%; jobb: 0;) / * ebben az esetben az elem magassága 100%, szélessége a szülőblokk 50%-a * / 
Rizs. 2. Abszolút elhelyezett elem magassága és szélessége
4. Elem behúzások
A párnázás tulajdonság használatával párnázást állíthat be egy elem több oldalára egyszerre a következő sorrendben :. Ha az elemnek van háttere, akkor kitöltésre is kiterjed. Negatív értékek nem megengedettek. Az ingatlan nem öröklődik.
Ha három érték van megadva, például div (kitöltés: 10 képpont 20 képpont 30 képpont;), akkor a következő sorrendben kerülnek elosztásra: az első érték a felső párnázás, a második a jobb és bal oldali párnázás, és a a harmadik az alsó párnázás.
Ha két érték van megadva, például div (padding: 10px 20px;), akkor az első a felső és alsó párnázást, a második a jobb és a bal oldalt állítja be.
Egyetlen érték, például div (padding: 10px;), ugyanazt a párnázást fogja beállítani az elem minden oldalán.
Szintaxis
P (párnázás: 5px 10px 15px 10px;)
4.1. Az elem egyik oldalának behúzása
Ha a párnázatot csak az egyik oldalra szeretné beállítani, akkor használnia kell a párnázás felső, párnázás jobb, párnázás alsó, párnázás bal oldali tulajdonságait, például:
P (bal oldali párnázás: 10 képpont;)
5. Elemmezők
A legtöbb elemet margó választja el egymástól. A margin tulajdonság egy rövidített űrlap egy elem margóinak írásához a következő sorrendben: fent, jobbra, alul, balra... Akkor használják, ha több oldalról kell margókat megadni, de nem feltétlenül négy oldalról. A blokk elemek függőlegesen szomszédos szegélyei összeomlanak, a felső és az alsó margó pedig nincs hatással az inline elemekre. A negatív értékek megengedettek. Az ingatlan nem öröklődik.
Ha három érték van megadva, például div (margin: 10px 20px 30px;), akkor a következő sorrendben kerülnek elosztásra: az első érték a felső margó, a második a jobb és bal margó, és a a harmadik az alsó margó.
Ha két érték van megadva, például div (margó: 10px 20px;), akkor az első a felső és az alsó margót, a második a jobb és bal oldalt határozza meg.
Egyetlen olyan érték, mint a div (margó: 10 képpont;), ugyanazokat a margókat állítja be az elem minden oldalán.
(margó: 0 auto;) csak akkor működik, ha az elem szélessége kifejezetten be van állítva.
Rizs. 3. margin: auto; abszolút pozicionált elemhez Szintaxis
Div (margó: 5px 10px 2px 5px;)
5.1. Margó az elem egyik oldalán
A margó felső, margó-jobb, margó-alsó, margó-bal tulajdonságok vezérlik a megfelelő margókat az elem mindkét oldalán, például:
P (bal margó: 10 képpont;)
6. Szélesség és magasság korlátozása
A CSS néhány egyéb tulajdonságot is támogat, amelyek a weblap elemeinek magasságának és szélességének beállításához kapcsolódnak: min-height, min-width, max-height és max-width. Ezek a tulajdonságok lehetővé teszik az elem szélességének vagy magasságának minimális és maximális értékének beállítását, lehetővé téve az elem számára, hogy kitöltse a rendelkezésre álló helyet. A tulajdonságokat gyakran használják a reszponzív weboldal -tervezéshez. Minden elemre vonatkozik, kivéve a soros és a tábla elemeket. Mindig a fő szabályt követik, azaz miután magasságot vagy szélességet adott az elemnek. Nem örökölt.
Szabályos méreteket állíthat be egyes mértékegységek használatával, és méretkorlátozásokat más egységek használatával, például:
Div (szélesség: 400 képpont; maximális szélesség: 50%;)
Az elem csak akkor lesz 400 képpont széles, ha ez az érték nem haladja meg a konténerblokk szélességének 50% -át, különben szélessége csökken.
Ebben a cikkben megvizsgáljuk, hogyan állíthatja be a blokk magasságát a szélességének százalékában a CSS -ben. Nézzük meg ennek a technológiának az alkalmazását a Bootstrap körhinta (csúszka) létrehozásának példájával, különböző méretű képekből.
Olyan blokk létrehozása, amelynek magassága a szélességének egy bizonyos százaléka
- Hozzon létre HTML -struktúrát 2 blokkból:
Az első blokk 2 osztályból áll. Az elemre reagáló osztály használatával beállítjuk a blokk relatív pozicionálását. Ezt úgy kell megtenni, hogy a 2 blokk (amely abszolút pozicionálással rendelkezik) hozzá képest helyezkedjen el. Ezenkívül ez az osztály arra is használható, hogy hozzáadja a: előtt pszeudo-elemet a megfelelő elemek tartalma előtt (elemre reagáló). Ez az elem a padding-top CSS tulajdonság segítségével beállítja a doboz kívánt magasságát a szélességéhez képest. Ennek a módszernek az a trükkje, hogy ha a kitöltési tulajdonság beállítása nem pixelben, hanem százalékban, akkor a böngésző kiszámítja a szélességéhez képest... Így lehetséges a szükséges magasságú blokk beszerzése. A következő lépés a 2. blokk abszolút pozicionálása, és az első mondathoz igazítása.
- Adja hozzá a következő CSS-t az oldalhoz: .item-reszponzív (pozíció: relatív; / * relatív pozicionálás * /) .item-reszponzív: előtt (display: block; / * az elemet blokkként jeleníti meg * / content: ""; / * tartalom pszeudo-elem * / szélesség: 100%; / * elem szélessége * /) .item-16by9 (padding-top: 56,25%; / * (9:16) * 100% * /) .tem-reszponzív> .content (pozíció: abszolút; / * az elem abszolút helyzete * / / * az elem pozíciója * / felül: 0; bal: 0; jobb: 0; alsó: 0;) / * Ha szükséges (az ilyen blokkokhoz osztályok) * / .item -4by3 (padding-top: 75%; / * (3: 4) * 100% * /) .item-2by1 (padding-top: 50%; / * (1: 2) * 100 % * /) .tétel -1by1 (padding -top: 100%; / * (1: 1) * 100% * /)
A fenti technológia alkalmazása a Bootstrap körhinta létrehozásához
Ha nem ismeri a Bootstrap szolgáltatást, és szeretné tudni, mi az, akkor tekintse meg a Bootstrap bevezetőjét.
Nézzünk egy példát, ahol a fenti HTML szerkezetet és CSS kódot fogják használni a Bootstrap körhinta diák megjelenítéséhez.
Képként a következő fájlokat fogjuk használni:
- körhinta_1.jpg (szélesség = 736 képpont, magasság = 552 képpont, oldalarány (magasság és szélesség) = 1,33);
- körhinta_2.jpg (szélesség = 1155 képpont, magasság = 1280 képpont, oldalarány (magasság és szélesség) = 0,9);
- körhinta_3.jpg (szélesség = 1846 képpont, magasság = 1028 képpont, oldalarány (magasság és szélesség) = 1,8);
- körhinta_4.jpg (szélesség = 1140 képpont, magasság = 550 képpont, oldalarány (magasság és szélesség) = 2,07);
- körhinta_5.jpg (szélesség = 800 képpont, magasság = 600 képpont, oldalarány (magasság és szélesség) = 1,33);
A képeket háttérként állítjuk be. Ez lehetővé teszi a különböző képarányú képek használatát a Bootstrap 3 körhintán.
A körhinta HTML -jelölése:
Körhinta CSS -kód:
Tételre reagáló (pozíció: relatív; / * relatív pozicionálás * /). Tételre reagáló: előtt (kijelző: blokk; / * renderelem blokkként * / tartalom: ""; / * pszeudo-elem tartalom * / szélesség: 100 %; / * elemszélesség * /) .item-16by9 (padding-top: 56,25%; / * (9:16) * 100% * /) .temre reagáló> .content (pozíció: abszolút; / * abszolút pozíció az elem * / / * elem pozíciója * / felül: 0; bal: 0; jobb: 0; alsó: 0; háttérméret: borító! fontos;)
Alapértelmezés szerint az automatikus szélességet használják a blokk elemekhez. Ez azt jelenti, hogy az elem vízszintesen pontosan annyival nyújtódik, amennyi szabad hely van. A blokk elemek alapértelmezett magassága automatikusan kerül beállításra, azaz a böngésző függőlegesen nyújtja a tartalomterületet, hogy megjelenítse az összes tartalmat. Az egyéni tartalomterület egyéni méreteinek beállításához használja a szélesség és magasság tulajdonságokat.
A szélesség CSS tulajdonság lehetővé teszi az elem tartalomterületének szélességének beállítását, a magasság tulajdonság pedig a tartalomterület magasságának beállítását:
Ne feledje, hogy a szélesség és magasság tulajdonságok csak a tartalomterület méretét határozzák meg; a blokk elem teljes szélességének kiszámításához adja hozzá a tartalomterület szélességét, a bal és jobb oldali kitöltést, valamint a bal és jobb szegély szélességét. Ugyanez vonatkozik az elem teljes magasságára is, csak az összes értéket függőlegesen kell kiszámítani:
Ehhez a bekezdéshez csak a szélességet és a magasságot állítjuk be.
Ez a bekezdés a szélességen és magasságon kívül kitöltést, szegélyt és párnázást tartalmaz.
Próbáld ki "A példa jól mutatja, hogy a második elem több helyet foglal el, mint az első. Ha a képletünk szerint számol, akkor az első bekezdés mérete 150x100 képpont, a második bekezdés mérete pedig:
| Teljes magasság: | 5 képpont | + | 10 képpont | + | 100 képpont | + | 10 képpont | + | 5 képpont | = 130 képpont |
| felső keret | felső behúzás | magasság | Alsó behúzás | alsó keret |
azaz 180x130 képpont.
Az elemek túlcsordulása
Miután meghatározta az elem szélességét és magasságát, érdemes figyelni egy fontos pontra - az elemen belül található tartalom meghaladhatja a megadott blokkméretet. Ebben az esetben a tartalom egy része túlmutat az elem határain, hogy elkerülje ezt a kellemetlen pillanatot, használhatja a CSS túlcsordulás tulajdonságát. A túlcsordulás tulajdonság megmondja a böngészőnek, hogy mit kell tennie, ha a blokk tartalma meghaladja a méretét. Ez a tulajdonság a négy érték egyikét veheti fel:
- látható a böngésző által használt alapértelmezett érték. Ennek az értéknek a beállítása ugyanolyan hatással lesz, mint a túlcsordulás tulajdonság beállítása.
- görgetés - függőleges és vízszintes görgetősávokat ad hozzá az elemhez.
- auto - szükség szerint görgetősávokat ad hozzá.
- rejtett - elrejti a blokk elem határain túlmutató tartalom egy részét.
Leírás
Beállítja a blokk vagy cserélhető elemek magasságát (például a címkét) ). A magasság nem tartalmazza az elem körüli szegélyek vastagságát, a párnázás értékét és a margókat.
Ha a blokk tartalma meghaladja a megadott magasságot, akkor az elem magassága változatlan marad, és a tartalom megjelenik rajta. Ez a szolgáltatás az elemek tartalmának átfedését okozhatja, ha a HTML -kód elemei egymás után vannak. Ennek elkerülése érdekében adja hozzá az overflow: auto elemet az elem stílusához.
Szintaxis
magasság: érték | kamat | auto | örököl
Az értékek
A CSS-ben elfogadott bármely hosszegység értékként elfogadott- például képpontok (px), hüvelyk (in), pontok (pt) stb. Százalékos jelölés használatakor az elem magassága a magasság függvényében kerül kiszámításra a szülő elem. Ha a szülő nincs kifejezetten megadva, akkor a böngészőablak kerül felhasználásra szülőként. auto beállítja a magasságot az elem tartalma alapján
HTML5 CSS2.1 IE Cr Op Sa Fx
Ennek a példának az eredményét az ábra mutatja. 1.
Rizs. 1. A magasság tulajdonság alkalmazása
Objektum modell
document.getElementById ("elementID") .style.height
Böngészők
Az Internet Explorer 6 helytelenül határozza meg a magasságot minimális magasságként.
Furcsa módban az Internet Explorer a 8.0 -ig bezárólag helytelenül kiszámítja az elem magasságát anélkül, hogy hozzá kellene adni kitöltést, margót és szegélyértékeket.
Az Internet Explorer a 7.0 -ig bezárólag nem támogatja az öröklési értéket.
Az magasság A CSS tulajdonság megadja az elem magasságát. Alapértelmezés szerint a tulajdonság határozza meg a tartalomterület magasságát. Ha azonban a doboz méretezése border-box értékre van állítva, akkor ez határozza meg a szegélyterület magasságát.
Ennek az interaktív példának a forrása egy GitHub lerakatban van tárolva. Ha szeretne hozzájárulni az interaktív példák projekthez, kérjük, klónozza a https://github.com/mdn/interactive-examples címet, és küldjön nekünk egy lekérési kérelmet.
A min-height és max-height tulajdonságok felülírják a magasságot.
Szintaxis
/ * Kulcsszó értéke * / height: auto; / *Értékek
A CSS adattípus egy távolságértéket képvisel. A hosszúságok számos CSS-tulajdonságban használhatók, például szélesség, magasság, margó, kitöltés, szegélyszélesség, betűméret és szövegárnyék. ">Formai szintaxis
Példa
Html
CSS
div (szélesség: 250 képpont; margó-alsó: 5 képpont; szegély: 2 képpont kék;) #magasabb (magasság: 50 képpont;) ; szélesség: 75%;)Eredmény
Kisegítő lehetőségek
Győződjön meg arról, hogy a magassággal beállított elemek nincsenek csonkolva és / vagy nem takarják el a többi tartalmat, amikor az oldalt nagyítják a szöveg méretének növelése érdekében.
Specifikációk
| Leírás | Állapot | Megjegyzés |
|---|---|---|
| CSS belső és külső méretezési modul, 4. szint |
A szerkesztő tervezete | |
| CSS belső és külső méretezési modul, 3. szint A "magasság" definíciója a specifikációban. |
Működési vázlat | Hozzáadta a max-content, min-content, fit-content kulcsszavakat. |
| CSS átmenetek A "magasság" definíciója a specifikációban. |
Működési vázlat | Anatábilisként sorolja fel a magasságot. |
| CSS 2. szint (1. felülvizsgálat) A "magasság" definíciója a specifikációban. |
Ajánlást | Támogatást ad a CSS adattípushoz, amely távolságértéket képvisel. A hosszúságok számos CSS-tulajdonságban használhatók, például szélesség, magasság, margó, kitöltés, szegélyszélesség, betűméret és szövegárnyék. "> |
| CSS 1. szint A "magasság" definíciója a specifikációban. |
Ajánlást | Kezdeti meghatározás. |
| Kezdő érték | auto |
|---|---|
| Vonatkozik | minden elem, kivéve a nem helyettesített soros elemeket, táblázat oszlopokat és oszlopcsoportokat |
| Örökölt | nem |
| Százalékok | A százalékos arányt a generált doboz blokkjának magasságához kell kiszámítani. Ha a tartalom blokk magassága nincs kifejezetten megadva (azaz a tartalom magasságától függ), és ez az elem nincs teljesen elhelyezve, az érték kiszámítja A gyökér elem százalékos magassága a kezdeti blokkot tartalmazza. |
| Média | vizuális |
| Számított érték | százalék vagy automatikus vagy az abszolút hossz |
| Animáció típusa | egy CSS adattípust valós, lebegőpontos számokkal interpolálnak. "> hossz, CSS adattípus valós, lebegőpontos számként."> százalék vagy számítás (); |
| Kanonikus rend | a formális nyelvtan által meghatározott egyedi, nem egyértelmű sorrend |
Böngésző kompatibilitás
Az ezen az oldalon található kompatibilitási táblázat strukturált adatokból készül. Ha szeretne hozzájárulni az adatokhoz, nézze meg a https://github.com/mdn/browser-compat-data webhelyet, és küldjön nekünk lekérési kérelmet.
Frissítse a GitHub kompatibilitási adatait
| Asztal | Mobil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Króm | Él | Firefox | internet böngésző | Opera | Szafari | Android webnézet | Chrome Androidra | Firefox Androidra | Opera Androidra | Safari iOS rendszeren | Samsung Internet | |
| magasság | A Chrome teljes támogatása 1 | Edge Teljes támogatás 12 | A Firefox teljes támogatása 1 | IE Teljes támogatás 4 | Opera Teljes támogatás 7 | Teljes Safari támogatás 1 | WebView Android Teljes támogatás 1 | A Chrome Android teljes támogatása 18 | Firefox Android teljes támogatás 4 | Opera Android Teljes támogatás 10.1 | Safari iOS Teljes támogatás 1 | Samsung Internet Android Teljes támogatás 1.0 |
| illeszkedő tartalom | A Chrome teljes támogatása 46 | Edge Nincs támogatás Nem | Firefox Nincs támogatás Nem | IE Nincs támogatás Nem | Opera teljes támogatás 33 | Safari Teljes támogatás 11 Teljes támogatás 11 Teljes támogatás 9 Előtag Előtag | Opera Android? | Safari iOS Teljes támogatás 11 Teljes támogatás 11 Teljes támogatás 9 Előtag Előtag A szállítói előtaggal megvalósítva: -webkit- | ||||
| max-tartalom | A Chrome teljes támogatása 46 | Edge Nincs támogatás Nem | Előtag Előtag | IE Nincs támogatás Nem | Opera Teljes támogatás 44 | Safari Teljes támogatás 11 | WebView Android Teljes körű támogatás 46 | A Chrome Android teljes támogatása 46 | Előtag Előtag A szállítói előtaggal megvalósítva: -moz- | Samsung Internet Android Teljes támogatás 5.0 | ||
| min-tartalom | A Chrome teljes támogatása 46 | Edge Nincs támogatás Nem | Firefox Teljes támogatás 66 Teljes támogatás 66 Teljes támogatás 3 Előtag Előtag A szállítói előtaggal megvalósítva: -moz- | IE Nincs támogatás Nem | Opera Teljes támogatás 44 | Safari Teljes támogatás 11 | WebView Android Teljes körű támogatás 46 | A Chrome Android teljes támogatása 46 | Firefox Android Teljes támogatás 66 Teljes támogatás 66 Teljes támogatás 4 Előtag Előtag A szállítói előtaggal megvalósítva: -moz- | Opera Android Teljes támogatás 43 | Safari iOS Teljes támogatás 11 | Samsung Internet Android Teljes támogatás 5.0 |
| nyújtani | A Chrome teljes támogatása 28 Webkit-fill-available"> Alternatív név Teljes támogatás 28Webkit-fill-available"> Alternatív név Webkit-fill-available"> Alternatív név | Edge Nincs támogatás Nem | Firefox Nincs támogatás Nem | IE Nincs támogatás Nem | Opera Teljes támogatás 15 Webkit-fill-available"> Alternatív név Teljes támogatás 15Webkit-fill-available"> Alternatív név Webkit-fill-available"> Alternatív név Nem szabványos nevet használ: -webkit-fill-available | Teljes Safari támogatás 9 Webkit-fill-available"> Alternatív név Teljes támogatás 9Webkit-fill-available"> Alternatív név Webkit-fill-available"> Alternatív név Nem szabványos nevet használ: -webkit-fill-available | WebView Android Teljes támogatás 4.4 Webkit-fill-available"> Alternatív név Teljes támogatás 4.4Webkit-fill-available"> Alternatív név Webkit-fill-available"> Alternatív név Nem szabványos nevet használ: -webkit-fill-available | A Chrome Android teljes támogatása 28 Webkit-fill-available"> Alternatív név Teljes támogatás 28Webkit-fill-available"> Alternatív név Webkit-fill-available"> Alternatív név Nem szabványos nevet használ: -webkit-fill-available | Firefox Android Nincs támogatás Nem | Opera Android? | Safari iOS Teljes támogatás 9 Webkit-fill-available"> Alternatív név Teljes támogatás 9Webkit-fill-available"> Alternatív név Webkit-fill-available"> Alternatív név Nem szabványos nevet használ: -webkit-fill-available | Samsung Internet Android Teljes támogatás 5.0 Webkit-fill-available"> Alternatív név Teljes támogatás 5.0Webkit-fill-available"> Alternatív név Webkit-fill-available"> Alternatív név Nem szabványos nevet használ: -webkit-fill-available |
