Share
Am primit mai multe cereri pentru tutoriale simple CSS care predau fundamentele dificile. Acest lucru va servi drept prima intrare într-o serie care va primi noi completări sporadic în fiecare lună. Astăzi, vom examina depășirea: trucuri ascunse și clarificări pentru a forța un divizor să-și controleze copiii.
Ați observat vreodată că atunci când plutiți toate elementele de copii într-o div, părintele ocupă spațiu zero? De exemplu, în editorul de coduri, adăugați următoarele în eticheta corporală.
Acum, să adăugăm un pic de CSS pentru a simula un site tipic.
#container fundal: roșu; lățime: 800px; pad-bottom: 2cm; #main fundal: verde; înălțime: 500px; lățime: 600px; float: dreapta; #sidebar fundal: albastru; înălțime: 500px; lățime: 200px; plutește la stânga;
Deasupra, pur și simplu setăm culorile de fond și plutește bara laterală și divurile principale spre stânga și dreapta, respectiv. Rețineți "partea inferioară a căptușelii: 2em;". Acest lucru ar trebui să ne permită să vedem fundalul roșu în partea de jos, nu? Vedeți pagina din browser și veți vedea:
Unde a trecut fundalul roșu? De ce nu se afișează?
Când plutiți toți copiii, părintele în esență nu ocupă niciun spațiu. Pentru a ilustra mai bine acest lucru, să stabilim o înălțime arbitrară de 50 de pixeli în container și apoi să reducem opacitatea diviziilor pentru copii astfel încât să vedem fundalul roșu dedesubt.
#container ... alte stiluri înălțime: 50px; #main, #sidebar opacitate: .5;
Reîmprospătați browserul și veți vedea:
Ce ciudat. Am specificat o înălțime de 50 de pixeli pentru distribuția noastră de containere, dar bara principală și laterală se divizează în mod flagrant revărsare granițele sale, cum ar fi divorțurile rătăcite.
Reveniți la foaia de stil și aplicați un stil:
#container ... alte suprapuneri de stiluri: ascunse;
După o altă reîmprospătare, vedem:
Ei bine, asta ajută parțial. Acum, nu trebuie să ne facem griji cu privire la copiii pubescenți care nu le respectă pe părinți. Acestea fiind spuse, acest lucru nu ne ajută într-adevăr situația.
"Încercați să evitați să specificați înălțimi cât mai mult posibil. De obicei există o metodă mai inteligentă.
Soluția este de a extrage proprietatea înălțimii din containerul nostru. Elimina următoarea proprietate.
#container ... alte stiluri înălțime: 50px; /* Înlătură asta */
O ultima reîmprospătare, iar problema noastră pare a fi rezolvată.
De asemenea, puteți elimina proprietățile de opacitate. Au fost doar pentru demonstrații. Metoda demonstrată mai sus va funcționa în majoritatea cazurilor. Cu toate acestea, să introducem o altă variabilă. Dacă dorim să poziționăm o imagine pe marginea containerului nostru, astfel încât să se suprapună. Ați văzut acest efect de multe ori. De dragul exemplului, vom folosi doar o imagine a unui cerc cu un fundal transparent. Pe un site real, aceasta ar putea reprezenta un buton "Cumpărați acum" sau "Înscrieți-vă" - ceva asemănător cu brânză.
Folosind CSS, să poziționăm imaginea în partea dreaptă sus a site-ului nostru, suprapunând marginile. Aceasta este ceea ce vrem:
Mai întâi, trimitem imaginea în HTML.
... restul de html
Apoi, reveniți la foaia de stil și adăugați următoarele stiluri.
img poziție: absolut; dreapta: -100px; top: 20px;Contextul de poziționare
S-ar putea crede că acest lucru va plasa imaginea chiar peste marginea din dreapta a containerului div. Cu toate acestea, el ar fi greșit.
Deoarece nu am setat un context de poziționare, fereastra va fi folosită în schimb.
Evident, acest lucru nu este ceea ce dorim. Pentru a aplica un context de poziționare divului nostru de containere, adăugați pur și simplu "poziție: relativă"; la #container. După ce am făcut acest lucru, imaginea nu va mai utiliza fereastra ca referință.
Care este problema acum??
Dar acum, avem o nouă problemă! Pentru că ne-am depășit: ascunsă în containerul div, ne-am împușcat oarecum în picioare. Cum distrugem limitele și luăm nume dacă depășirea este setată ca ascunsă? Ar trebui să acceptăm pur și simplu că acest site special nu va lua nume astăzi? Absolut nu. În aceste cazuri, merită să folosiți o altă metodă.
Trăsătura Clearfix
Cu această metodă, vom folosi CSS pentru a adăuga conținut după divul dvs. container. Acest conținut creat va clarifica divul nostru, obligându-l astfel să-și păstreze copiii. Acum, evident, nu vrem să vedem acest conținut, așa că trebuie să fim siguri că îl ascundem de la vizualizator.
Reveniți la foaia de stil, eliminați "overflow: hidden"; din containerul div și adăugați următoarele:
#container ... alte stiluri _height: 1%; #container: după content: "."; vizibilitate: ascuns; afișare: bloc; clar: ambele; înălțime: 0; font-size: 0;Acest lucru poate părea complicat, dar vă asigur că este destul de simplu.
- _înălţime: Declanșează "haslayout" în Internet Explorer, prin utilizarea trucului de subliniere pentru a direcționa direct IE6.
- conţinut: După distribuția containerului, adăugați o perioadă.
- vizibilitate: Nu vrem să vedem perioada, așa că ascunde-o din pagină. (Egal la setarea opacității: 0;)
- afişa: Permite perioada să se afișeze ca nivel de bloc, mai degrabă decât în linie.
- clar: Proprietatea importantă. Aceasta elimină principalele și bara laterală. Acest lucru este același cu adăugarea unui mesaj nesemantic
la pagina noastră.- înălţime: Nu ocupați nici un spațiu.
- marimea fontului: Doar o precauție pentru Firefox. Acest browser adaugă câte un spațiu după elementul părinte. Setarea dimensiunii fontului la zero stabilește acest lucru.
Concluzie
Deși preludiul: truc ascuns este preferabil, nu este întotdeauna ideal. Trebuie să utilizați cea mai bună soluție pentru sarcina la îndemână. Cel mai important lucru este să înveți fiecare metodă, astfel încât să ai instrumentele necesare pentru a rezolva puzzle-ul.
- Urmăriți-ne pe Twitter sau abonați-vă la feed-ul RSS NETTUTS pentru mai multe tutoriale și articole zilnice de dezvoltare web.
Accentsconagua
... restul de html 
