Textbook CSS 3
Árnyék elem CSS
Lebegő elemek CSS
A tanulmány a CSS doboz modell áttekintettük, hogy a szélesség és magasság meghatározott tulajdonságok szélességét és magasságát az elem belső szakaszán (tartalmi terület), amely tartalmazhat szöveget, képeket és egyéb elemeket.
A CSS box modell, van-e különbség a szélesség és a magasság, hogy adja meg az elem és a térköz, hogy van fenntartva a böngésző megjeleníteni. Teljes szélesség és magasság az elemek egy olyan régió a böngésző ablakot, amely magában foglalja a szélessége és magassága a belső párnázás, az említett határok, és hogy a felhasználói értékeket.
Ábra. Reakcióvázlat 99 számítástechnikai a teljes szélessége és magassága a elemek.
A teljes szélessége az elem képlettel számítottuk ki:
A teljes magassága az elem a következőképpen számítjuk ki:
Tegyük fel, hogy a következő stílusokat az elem
Forgalomba az elem
A teljes szélessége az elem:
150 képpont (szélesség egyéni érték) + 10 pixel (bal belső bemélyedés) + 10 pixel (jobb belső bemélyedés) + 5 pixel (bal határszakasz) + 5 pixel (jobb oldali határ) = 180 pixel.
A teljes magassága az elem:
150 képpont (felhasználói magasság érték) + 10 pixel (az alsó belső tér) + 10 képpont (felső belső tér) + 5 képpont (alsó határ) + 5 képpont (felső határa) = 180 pixel.
És így megvizsgáltuk, hogyan klasszikusan fordul kiszámításakor a teljes szélessége és magassága az elemek. Cons a modell abban a tényben rejlik, hogy meg kell, hogy végezzen matematikai számítások, hogy megértsük, mi is valójában a szélessége vagy magassága egyik vagy másik elem. Ez kényelmes?
Megváltoztatása a modell számítás a szélessége és magassága az elemek
A CSS 3 hozzáadunk ingatlan box-méretezése. ez lehetővé teszi, hogy módosítsa az alapértelmezett CSS modell, amely kiszámítja a szélessége és magassága az elemek.
Annak érdekében, hogy megértsük, hogy fel kell használni az alternatív számítási módszerek szélességét és magasságát az elemek, nézzük meg egy példát, ahol létre a négy blokk azonos szélességű, és fogjuk használni százalékok:
Ügyeljen arra, hogy a fontos pillanat - mind a négy blokk van elrendezve egy sorban.
Ez egy nagyon kényes pillanatban, az a tény, hogy ha egy kijelzőn. inline-block sortöréseket a böngésző lát, mint a szóköz karaktert, és ennek következtében adunk minden mondat után 3-4px üres tér, attól függően, hogy a böngésző és a felhasználó font. Valójában ez mezhduslovnyh óta eltelt blokk tekinthető itt szó. Talán ebben a szakaszban, ebben a kérdésben nem teljesen világos, hogy ha, csak emlékszem rá, hogy később történjen elveszíteni egy pár órát, amikor majd „lefelé” blokkban vagy listát a navigációs sáv, mert hirtelen nem volt „nem világos, hogy hol pixel. " Én egy egyszerű ember, látok egy furcsa, ha pixeles kijelző. inline-block - írok elem a sorban hézagmentesen.
Ennek eredményeként, mi kell a négy sokszínű blokkok, található a sort:
És most a feladatmeghatározás megváltozott, és meg kell adni minden páratlan blokk szilárd határ 5px a megfelelő méretet. Ehhez fogunk létrehozni a következő stílus:
Most stílusossá a kódot, és látni, mi jön ki belőle.
Mint látható az alábbi képen, mi lesz csalódott, mint a mi ál „lebegett”:
Mi van lehetőség kijavítani a elrendezés?
- Az első -, hogy vegye fel egy számológép és kiszámítja a érdeke, hogy kezdett az elemeket a dokumentumban.
- A második -, hogy egy alternatív modellt kiszámításához szélessége és magassága a elemek.
A mi esetünkben, úgy vélem, hogy el kell választani a második lehetőséget:
Mi használt CSS tulajdonság doboz méretezése értéke border-box. amely lehetővé tette számunkra, hogy változtatni a modell, hogy kiszámolja a szélessége és magassága az elemek.
A mi esetünkben ez megmenti a helyzetet, és nem lesz, hogy a számításokat, hogy a jövőben félnek olyan változás, amely szükséges lehet a tagok. Hagyjuk ezeket a felesleges számításokat a böngésző oldalon, és nézd meg az eredményt a példa:
Mert végső megértés a modell számítás a szélessége és magassága elemek, hogy rögzítse a kapott ismereteket a következő példát:
Érték tartalom-box-méretezése tulajdonságait az alapértelmezett érték, és termeli a számítás a teljes szélessége és magassága az elem szerint a klasszikus rendszer. Példában szélesség:
150 képpont (szélesség egyéni érték) + 10 pixel (bal belső bemélyedés) + 10 pixel (jobb belső bemélyedés) + 10 pixel (bal határszakasz) + 10 pixel (jobb oldali határ) = 190 pixel.
Az eredmény a példa:
Management túlfolyó tömb elemei
Alatt elrendezés akkor merül fel az esetekben, amikor a tartalom az elem jelenik határain kívül az elem. Alapértelmezésben a böngésző megjeleníti a tartalmát egy (túlcsordulás elem jelenik meg), ami egyes esetekben vezet vizuális hibákat. Az ilyen viselkedés nem felelős böngésző CSS tulajdonság túlcsordulás. Úgy vélik, hogy a lehetséges értékek: