Mit nem tudsz a CSS százalékos margóinak kiszámításáról?
A legtöbb webes tervező úgy gondolja, hogy nagyon jól ismerik a CSS-t. Végtére is, nincs ennyire sokat - néhány választó típus, néhány tucat tulajdonság, és néhány lépcsőzetes szabály, amit alig kell emlékezni, mert a józan észre fordulnak. De amikor eljutsz a csúnya szintre, rengeteg homályos részlet van, amit néhány tervező valóban megért.
Amikor megvizsgáltam egy ingyenes CSS teszt eredményét, amelyet online szolgáltam az elmúlt hat hónapban, felfedeztem az egyik kérdés szinte senki igaza van. A több ezer embert, akik a tesztet vették, kevesebb, mint 14% -uk van.
Ez a kérdés felvetődik: Hogyan számolja ki a százalékos margókat?
A kérdés
Mondja el, hogy webhelye rendelkezik egy tárolóval div, és benne egy tartalom div:
Most adjuk meg ezt a tartalmat div felső margó:
.tartalom margin-top: 10%;
Oké, így 10%… de 10% -a mit? Ez az a kérdés csak 13,8% -a válaszol helyesen. Ne feledje: ezek az emberek hozzáférhetnek a Google-hoz!
Amit ebben a kérdésben szeretem, az az úgy tűnik, a válasznak nyilvánvalónak kell lennie. Olyannyira, hogy gyanítom, hogy a legtöbb ember csak kitalál (és találgat rosszul). De talán nem nyilvánvalónak tűnik. Úgy értem, ha valóban használod a képzeletedet, akkor a böngésző sokféleképpen kiszámíthat egy ilyen árrést.
Tehát hogyan szólnék, ha szűkítem az Ön számára, mivel a tesztben szereplő kérdés valójában több választás. Íme a következő lehetőségek:
- A tartalom div. Magassága 10%
- 10% -aa konténer div magasságának
- 10% -a div divszélességnek
- A konténer div szélessége 10%
Ne feledje, hogy csak 13,8% -a választhatja ki a megfelelő választ a listából. Ez rosszabb, mint a véletlen!
Nézd meg szorosan a válaszokat; látni fogod, hogy tényleg csak két dolog van, amit tudnod kell:
Tartály vagy tartalom?
Először is a tartalék mérete a tartalom saját maga alapján, vagy a konténer div?
Most ez nem gimme, de valószínűleg bízhat az ösztönökben. Ha beállítom, hogy a div értéke 50% legyen a konténer szélességének, és azt akarom, hogy a bal és jobb margók kitöltsék a többi helyet, természetesen mindegyikük 25% -át állítja be (így a százalékos értékek hozzáadódnak 100%). Ehhez a százalékos margóknak a tartály méretein kell alapulniuk.
Persze, hogy a tesztet átvevő emberek kétharmada kapja meg a válasz jobb részét.
Szélesség vagy magasság?
Második, a margó tetejének mérete az elem szélessége vagy magassága alapján?
Ha odafigyelsz, akkor valószínűleg már a védődben van. Annyira kevés embernek, hogy kiválassza a helyes választ, ez egy trükk kérdés, igaz?
És mégis, fogadok, hogy alig hiszek abban a válasz nem magasság. Nos, nem az.
Igen, itt egy felső határról beszélünk. Igen, a margó mérete függőleges mérés. Igen, ha egy blokk a tárolóedény magasságának 50% -át teszi ki, és 25% -os felső árrést adtál neki, azt várod, hogy a tartály magassága 25% lesz.. És tévedsz.
Ne értsen rosszul, ha úgy gondolta, hogy magának kell lennie. A tesztben résztvevők közel 80% -a egyetért Önnel:
Tényleg… Nem, tényleg!
Még mindig nem hiszem el? Íme egy idézet a W3C CSS specifikációból:
A százalékot a generált doboz tartalmú blokk szélességére vetítve számítjuk ki. Ne feledje, hogy ez igaz a margin-top és a margó-alsó esetében is.
Ugyanez vonatkozik a felső és alsó párnázásra is, ha kíváncsi lenne. Ami a határokat illeti, illegális a szélesség százalékos meghatározása.
Tehát ebben a pillanatban valószínűleg a CSS alkotóit gondolod bolond, vagy csak egy igazán ostoba hibát követtek el. De itt vagyok, hogy elmondjam, két jó oka van annak, hogy a függőleges margókat a blokk szélességére alapozzuk:
Vízszintes és függőleges konzisztencia
Természetesen van egy rövidített tulajdonság, amely lehetővé teszi a blokk mind a négy oldalának margójának megadását:
margin: 10%;
Ez kiterjed:
margin-top: 10%; margin-right: 10%; margin-bottom: 10%; margin-left: 10%;
Most, ha a fentiek közül bármelyiket írta, valószínűleg azt várná, hogy a blokk mind a négy oldala egyenlő méretű legyen, ugye? De ha a margó-bal és a margó jobbra a tartály szélességén alapulnak, és a margó-felső és a margó-alsó alapja a magassága volt, akkor általában másak lennének!
Körkörös függőség elkerülése
A CSS a blokkokban lévő tartalmat függőlegesen lefekteti az oldalra, így a blokk szélességét általában a szülő szélessége határozza meg. Más szóval, tudod számítsuk ki a blokk szélességét anélkül, hogy aggódnunk kellene belül a blokk.
A blokk magassága más kérdés. Általában a magasság a tartalom együttes magasságától függ. Módosítsa a tartalom magasságát, és megváltoztatja a blokk magasságát. Lásd a problémát?
A tartalom magasságának megismeréséhez meg kell ismernie a hozzá tartozó felső és alsó margókat. És ha ezek a margók a szülő blokk magasságától függnek, bajban vagyunk, mert nem tudjuk kiszámítani az egyiket a másik ismerete nélkül!
A függőleges margók alapja a szélesség a konténer megszakítja a körkörös függőséget, és lehetővé teszi az oldal elrendezését.
Ász az osztály
Tehát ott van: a legnehezebb kérdés a teszten, és most válaszolhat. Szeretné tudni, hogyan tenné a teszt többi részét? Próbáld ki magad. Megígérem, hogy a legtöbb kérdés sokkal könnyebb, mint ez.
Közben keresek egy új, legnehezebb kérdést! Milyen részleteket gondol a CSS, hogy senki sem tudja?
A szerkesztő megjegyzése: Ezt a Hongkiat.com-nak írta Kevin Yank. Kevin 1999 óta írt a webről, a PHP-vel, CSS-szel és JavaScript-lel ellátott könyvekkel. Ő is otthont ad a podcastoknak, konferenciákon beszélt, és videó-képzést készített az internetről. Most a Sit the Test, a webes alkalmazás online tesztek készítésére és vételére szolgáló fejlesztési csapatot vezeti.
További információ a Hongkiatról:
- Webdesign: egyenlő oszlopmagasság CSS-vel
- 6 CSS trükkök a tartalom függőleges beállításához
- A CSS-egységek megjelenítése: pixel, EM és százalék
- Egy pillantás a CSS3 dobozra
Most olvasd el: 10 Rejtett CSS3 tulajdonság, amit tudnod kell
