Pe ce tipuri de elemente sunt împărțite
elemente ale blocului au un comportament complet diferit. Fără manipulare suplimentară nu pot fi pe picior de egalitate. Un exemplu de astfel de bloc - paragraf, care este dată de p tag. Deci, de aceea îți spun toate astea? Acest lucru se spune pentru ca să înțelegeți - dimensiunea trebuie să fie specificate numai elementele la nivel de bloc, pe care o vom face în acest articol.
Fig. 1. Proprietățile de bază, care ajuta pentru a seta dimensiunea
proprietăți simple la dimensiuni
Proprietățile cele mai simple, care pot înregistra dimensiuni - este lățimea și înălțimea. ele înseamnă, respectiv, lățimea și înălțimea. Ele pot adăuga, de asemenea, prefixele și MAX- tente. În acest caz, vom repara lățimea și înălțimea minimă și maximă, respectiv.
Valorile pot fi înregistrate fie în pixeli sau procente. Uneori, încă utilizate unitate relativă em (înălțime font), dar, de obicei, cu ajutorul valorii determinate de text. În mod implicit, toate grila (principalele blocuri de model structurale), în care dimensiunile sunt determinate ca procent, se face referire la cauciucul. De asemenea, înregistrarea de interes îl face ușor să se adapteze șablonul, care este, de asemenea, foarte important.
Dimensiunea în pixeli
Pixelii sunt înregistrate așa-numitele valori absolute. De exemplu, întregul amplasament trebuie să fie localizat în lățimea containerului de 1000 de pixeli. Creați această unitate și este scris lățime.
Când ați înregistrat, astfel încât lățimea containerului nu se va schimba sub nici un pretext. Când măriți sau micșora fereastra va rămâne la fel. Dimensiune de site-ul este redus, iar bara de derulare orizontală va apărea, dacă este necesar.
Cu toate acestea, capacitatea de a se adapta la rețeaua de site-ul noile ecrane au un rol foarte important astăzi, deoarece traficul de date mobile este în creștere. În acest sens, ultimii ani mai mult și mai mult site-ul principal cadru de container nu obține o lățime greu. De exemplu, ca aceasta:
Și ce înseamnă? Iar faptul că unitatea va fi redusă dacă este necesar. Dacă comprima fereastra, este, de asemenea redusă. În același timp, în cazul în care rezoluția ecranului permite lățimea de 1320 pixeli vor fi exact. Reducerea fereastra nu va vedea o defilare orizontală.
Cu toate acestea, aici este posibil să se stabilească chiar și lățimea minimă. În cazul în care blocul pentru a scrie această proprietate, acesta nu va deveni mai restrânsă decât valoarea specificată. De exemplu:
Dacă lățimea ferestrei va fi mai mică de 600 de pixeli, unitatea se va opri contractarea și să primească aceeași bară de derulare orizontală.
Procentaj Dimensiune
Se specifică procentul cu care este din ce în ce mai popular. Atunci când este utilizat în mod corespunzător poate aduce o mare de afișare a site-ului pe diferite dispozitive.
Ca rezultat, bara laterală va primi 28% din lățimea elementului mamă (în acest caz, recipientul global), iar unitatea principală - 62%. Lățimea totală a acestora este de 90%. 10 Concediul rămas la diferite indentare externe și interne, cadre etc.
Fig. 2. blocuri de cauciuc modifica dimensiunile lor, cu o scădere în fereastra browser-ului
Așa cum afectează indentare pe dimensiuni bloc
Când specificați lățimea unor unități folosind lățimea, aceasta nu poate fi valoarea finală. Adevărul este, că este modul în care definim lățimea numai porțiunea în care conținutul direct acolo. Trebuie amintit faptul că, în căptușeala css mărește dimensiunea blocului, precum și a cadrului (de frontieră).
Să presupunem că luăm bara laterală. Am dat-o 28% din lățimea totală a containerului. Cu toate acestea, conținutul în bara laterală nu se lipește de margini, este necesar să se dea niște umplutură. De asemenea, poate doriți să adăugați un cadru bara laterală.
Căci se dovedește că lățimea totală a barei laterale a crescut cu 44 de pixeli (marginile din stânga și din dreapta 20, și cadru cu aceleași părți pentru 2). Există o opțiune pentru cei care nu doresc să deranjez mult pe dimensiunea și să le înregistreze în același timp, luând în considerare marjele și frontiere. Apoi, aveți nevoie pentru a scrie:
Această proprietate remarcabilă face astfel încât, în lățimea blocului (lățime) încep să includă padding (padding) și cadrul. Acum, dacă specificați dimensiunea conținutului de 62%, va rămâne așa, în orice caz. Dar există, de asemenea umplutură externă, dar ele sunt deja pe dimensiunea blocului nu este afectată. Dar dacă vrei să faci, să zicem, o adâncitură mare pe partea dreaptă a coloanei, conținutul pur și simplu nu se potrivesc și va fi forțat să călătorească înapoi în jos.
poze de cauciuc
Pentru a permite imagine pentru a schimba în css de mărimea blocului, este necesar să se stabilească lățimea în procente. Astfel, în cazul în care blocul în sine este dimensiunea relativă sau max-lățime prescrisă, scade lățimea și blocul de imagine va scădea sincron, care este bun pentru site-ul de afișare bun.
CSS.Intr multe opțiuni pentru a specifica dimensiunea. Mult mai multă atenție este acordată lățimea blocului, deoarece provine de la acest model de afișare este determinată. În cele din urmă, eu încă dori să recomande un astfel de curs. din care puteți învăța cum să lucreze cu dimensiunile elementelor în ceea ce privește dezvoltarea de dispozitive mobile.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram