css probléma
Sok dolog, a css, eredetileg nem tervezték, például mint: többoszlopos, érzékeny web design, stb Ezért vált nyelv tele csapkod és hibák, mint valami ősi autó egy csomó kiterjesztések.
A legjobb esetben - együttműködik css nevezhető szórakoztató időtöltés. És ez annak köszönhető, hogy mit kell dolgoznunk. Mert, mivel úgy vélem, a generációs hatékony és cross-böngésző css stílusokat nem lehet és nem lesz elérhető a közeljövőben.
Térjünk a lényegre, mert nem vagyok itt, mit adna a véleménye a css. És annak érdekében, hogy kezelni számos közös probléma a css, és a lehetséges megoldásokat.
Próbáltam, hogy választani néhány valóban nagyon gyakori:
- Tisztító float`ov.
- Hogyan nyerjünk a behúzás elemek közötti inline-block?
- Megértése abszolút pozicionálás.
- Amikor elhelyezzük az szélesség / magasság értékek olyan méretű egyenlő 100%? (2. rész)
- Ez nem túl okos z-index. (2. rész)
- Mi alvadási határokat (árrés összeomló)? (2. rész)
Tisztító float`ov.
Úgy tűnik számomra, hogy ez a leggyakoribb kérdés, CSS. Ő olyan régi, mint a világ, őszintén, én ezer százalékig biztos, hogy minden ember, aki valaha is írt css találkozott vele.
Egyszerű szavakkal leírható a következő: ha a belső elem tartalmaz egyetlen elemet úszóval, összeesik, mintha benne nincsenek gyermek elemei. Ez azt jelenti, sőt, az elemek egy úszó kiesnek a teljes áramlás.
Számos módja van, hogy megoldja ezt a problémát. Korábban használt üres div stílus «egyértelmű: mind» alján a tartály. Aztán, mi váltotta le a címke óra, ami nem sokkal jobb.
Végül Nicolas Gallagher javasolt új float`ov tisztító utat anélkül, hogy megérintse a jelölő egyáltalán. Hosszas viták és vizsgálatok, megvan a szükséges minimális működése egy sor stílusok, így a legújabb verzióját:
Tulajdonképpen hazudtam, nem tart ez a legrövidebb. De ha szükség IE 6/7 támogatást, akkor hozzá kell adni a következő:
Dolgozni, akkor kell hozzá .clearfix osztály a projekt, majd alkalmazza azt elemei a jelölést. Ez a legegyszerűbb és legtisztább módja dolgozni float`ami.
Hogyan nyerjünk a behúzás elemek közötti inline-block?
Folytatjuk a végeredmény az elemek egy sorban, ezúttal nem az úszó, de inline-blokkok. display: inline-block hosszú alábecsülték, és mégis megértjük, hogyan működik és miért jó. Ma már egyre több front-end fejlesztők inkább használni inline-block helyett float`ov, ha van rá lehetősége.
A fő plusz inline-block az, hogy nem kell kaparni float`y és mi nem találkozunk más problémák merülhetnek fel, mivel álláspontja elemek használatával float`ov. Csak beállítás a display tulajdonság egy elem az inline-block értéke a hibrid vonal elem és a blokk. Lehet, hogy a méret, margók, de a szélessége alapértelmezés szerint ez függ a tartalom, hanem a teljes szélessége a szülő elem. Így vízszintesen vannak elrendezve, hanem függőlegesen.
Ön kérheti, „Mi a baj?”. És az a baj, hogy azok fele kisbetűs, és ezért behúzott egymástól egyenlő nagyságú helyet. A normál 16px betűméret, ez 4px. A legtöbb esetben, a behúzás mérete lehet kiszámítani 25% -a a betűméretet. Különben is, ez zavarja a normális elrendezése elemek. Vegyük például a méret a tartály 600px három elem belül mérete amely be van állítva, és 200px display tulajdonság: inline-blokk. Ha nem távolítja el a behúzás, akkor nem lesz képes, hogy azokat egy vonal (200 * 3 + 4 * 2 = 608).
Számos módja van, hogyan kell eltávolítani a szükségtelen számunkra helyet, mindegyiknek megvan a maga előnye és hátránya. Hogy őszinte legyek, amíg nincs tökéletes megoldás. Nézzük meg egymás után!
Markup szint: eltávolítja terek
Minden tesztjeink az alábbi jelölést.
Amint azt már említettük, a gyermek elemek nem lesz egy egyenes vonal, mert van egy további szóköz karakter között mindegyik (ebben az esetben egy új sort és 4 férőhely). Az első módszer a probléma megoldására - teljesen eltávolítani a hiányosságok.
Úgy működik, de nem kényelmes elolvasása kódot. Bár tudjuk átszervezni mi kis elemeket, amely megőrzi az olvasást:
És hogy igazán hűvös, megteheti:
Igen - ez működik! Persze én nem ajánlom ezt a megközelítést, mert nem intuitív, és teszi csúnya kódot. Nézzük jobb, próbálja meg, semmi mást.
Igen, sokkal jobb! A kód olvasni és működtetni. Igen, ez a módszer egyáltalán nem ismerős első pillantásra, de ez nem olyan nehéz szokni. Magam ezt a módszert, amikor el kell távolítani a terek közötti elemek inline-block.
Persze, valaki azt fogja mondani, hogy ez nem egy ideális megoldás, mivel ez működik az elrendezés oldalon, és a problémát meg kell oldani szintjén css. Valóban. A legtöbben ténylegesen használni css megoldásokat.
Szint css: távolság a szimbólumok
levél-térköz tulajdonság lehet beállítani a behúzás karakterek között. Az elképzelés az, hogy a francia úgy, hogy neviliroval bemélyedés a két elem között, akkor vissza kell állítania a levél-térköz a gyerekek, akik a bennük lévő szöveget nézd normális.
Szint css: negatív különbözet
Egy másik megközelítés a probléma megoldásának, nagyon hasonlít az előző fájlt, de a használata negatív különbözet. Fő hátránya, hogy nem működik az IE 6/7. Plusz, el kell távolítani a behúzás az első elem, hogy ők is emelkedtek belül a tartályba.
Ha nem kell IE 6/7 támogatást, úgy vélem, hogy ez egy nagyon jó megoldás.
Szint css: font-size
És végül, akkor állítsa be a betűméretet, a szülői egység 0, hogy lenne a különbség egyenlő 0px, majd állítsa vissza a betűméretet a gyermekek számára.
Ebben a határozatban, van néhány a problémák és korlátozások:
- Nem lehet visszaállítani a betűtípust a gyermek elemek felhasználásával em a betűméret
- Terek nem távolítja el az Android készülékek Jellybean
- Szöveget a @ font-face elveszíthetik simítása Safari 5
- Egyes böngészők figyelmen kívül hagyja a font-size: 0 Chrome például kínai változata, amely esetben a font-size visszaáll 12px
Megértése abszolút pozicionálás.
Positioning elemek - egy bonyolult folyamat, és mindig is az volt. Helymeghatározás, a kezdők, mivel nagy nehezen. Gyakran (mis) a pozíció tulajdonság. Ez a tulajdonság meghatározza, hogy milyen az elem lehet mozgatni útján az elmozdulás (felső, jobb, alsó és bal). És a következő értékeket:
- statikus - alapértelmezés szerint az eltolás nem alkalmazható
- relatív - offset mozgó vizuális réteg, de nem az elem
- abszolút - az elmozdulás elem elmozdul keretében (az első elem nem statikus)
- fix - elmozdulás elem belsejében van elhelyezve viewport`a és nem számít, hogy hol található a dokumentumban
Problémák merülnek fel, amikor használja position: absolute. És biztosan ki volt téve nekik: megadtuk egy elem abszolút pozicionálás, mert azt szeretnénk, hogy mi lenne a jobb felső sarokban a szülő (például egy gombot, hogy bezárja az ablakot modális).
... és ez a jobb felső sarokban a dokumentumot. Akkor egy pillanatra azt gondolta „Mi a fene?”. Tény, hogy ez normális böngésző működését. Kulcsszó összefüggésben van.
A fenti kód egyszerűen azt mondja: „Azt akarom, hogy az én elem prepositioned a jobb felső sarokban a kontextusban.” Tehát mi a háttér? Ez az első eleme a helyzet ingatlan nem egyenlő a statikus. Ez lehet a közvetlen szülő elem, a szülő vagy szülők, vagy a szülő szülő szülő. És így tovább, amíg az első eleme a helyzetben! = Statikus.
Ez a fogalom gyakran nehéz megérteni a kezdők, de ha egyszer megérted, hogy nyit egy nagy lehetőséget, hogy működjenek együtt az elemek vannak elhelyezve teljesen.
Részben demo bemutató fent említett. Két szülő, mindegyik egy utódeleme pozíciótól abszolút top offset: 0 és jobbra: 0. Balról jobbra szülő position: relative jobb rossz helyről: statikus.
Vége az első rész.