Creat de box sau nu, iar tipul cutiei depinde de limbajul de marcare. CSS este conceput ca o metodă de styling HTML-documente, astfel încât redarea vizuală modelul CSS este în mare parte înrădăcinată în diferențele dintre bloc și elementele inlaynovymi în HTML. În mod implicit, elementele p și secțiunea de a crea un cutii de nivel bloc și etichetează o, durata și le crea cutii inlaynovye. SVG nu utilizează modelul de bloc, astfel încât cele mai multe dintre proprietățile CSS ale manechinului nu funcționează cu SVG.
cutii la nivel de bloc de a crea noi blocuri de conținut, așa cum este prezentat în figura 4.1. cutii de bloc sunt redate vertical, în ordinea inițială și sunt umplute (cu excepția tabelelor) lățimea întreagă a containerului. Acest valori convenționale de trasare a blocurilor, lista de itemi, tabel sau alte valori * table- (de exemplu, tabelul de celule).
Figura 4.1. cutii nivel bloc din tag-uri h1, p, ul și masa în interiorul containerului (zona gri)
cutii de nivel inlaynovogo nu formează blocuri noi de conținut. Aceste cutii de a crea o linie într-o cutie de bloc. Acestea sunt afișate pe orizontală și umple lățimea containerului caseta, sărind în noi linii după cum este necesar, așa cum se arată în figura 4.2. Prin inlaynovogo nivel cutii sunt valori de proprietate afișate în linie, inline-bloc, inline-masă și rubin.
Figura 4.2. Exemplu inlaynovogo cutie cu margine: 1em și padding: 5px
Dar cum se calculează dimensiunea de box? Acest lucru este în cazul în care lucrurile devin interesante. Figura 4.3 arată că sunt formate din dimensiuni cutie de padding'a zona de conținut și lățime plus lățimea cadrului așa cum este definit în CSS2. margin'a Lățime creează un element margin-box și afectează alte elemente din document, dar nu afectează dimensiunea casetei în sine.
Figura 4.3. model de bloc pentru CSS 2.1
De exemplu, p etichetă lățime: 300px, padding: 20px și frontieră: 10px va avea o lățime de 360 pixeli calculat. Lățimea suma lățimea secțiunii, stânga și dreapta padding, iar lățimea de frontieră-stânga și la dreapta. Pentru lățimea totală a elementului a fost 300px, menținând în același timp 20px padding 10 pixeli și cadre, este necesar să se stabilească lățime: 240 de pixeli. Cele mai multe browsere calculează lățimea în acest fel. Dar acest lucru nu se aplică în cazul IE 5.5.
IE 5.5 utilizează proprietatea lățime ca valoarea finală pentru dimensiunea de box, forțând padding și cadru în interiorul cutiei, așa cum se arată în figura 4.4. Ambele valori sunt scăzute din lățimea, reducerea dimensiunii zonei de conținut. Mulți programatori cred că acest lucru ar fi mai rezonabil, în ciuda faptului că aceasta nu funcționează în caietul de sarcini.
Figura 4.4 Modelul de bloc în CSS 2.1 și modelul de bloc în vechiul IE 5.5
Grupul de lucru CSS prezentat de proprietate box-dimensionare, ca o modalitate de a aborda parțial aceste modele concurente. Acesta vă permite să alegeți punerea în aplicare a modelului de bloc, și simplifică foarte mult calcul atunci când se lucrează cu un design receptiv.
Selectarea modelului de bloc folosind proprietatea box-dimensionare
proprietate-dimensionare cutie este definită în CSS User Interface de bază modul de nivel 3 caietul de sarcini, și ia două valori posibile: conținutul-box și border-box.
Valoarea implicită este de conținut-box. Cu această valoare a proprietăților lățime și înălțime afecta dimensiunea zonei de conținut, care coincide cu comportamentul descris în CSS 2.1 caietul de sarcini. Acesta este comportamentul implicit în browserele moderne (așa cum se arată în figura 4.4).
Valoarea de frontieră-box adaugă un pic de magie. Lățimea și înălțimea încep să fie aplicate la limita exterioară a cadrului, și nu în zona de conținut. Cadrul și elementul de umplutură sunt trase în interiorul cutiei, care coincide cu vechiul comportament IE 5.5. Să ne uităm la un exemplu în care lățimea unui procent combinat cu px și umplutură pe cadru:
Pentru a eticheta și articolul aplicat deoparte CSS-cod de mai jos, care ne dă aspectul prezentat în figura 4.5, unde primul element are o lățime de 60%, iar al doilea - 40%:
Figura 4.5. elemente cu o dimensionare cutie: conținut-box
Articolul implicit deoparte și setați proprietatea-dimensionarea caseta cu valoarea de conținut-box. Valori border-width și padding se adaugă lățimea de 40 de pixeli elemente care alterează raportul 60% / 40%. Să adăugăm la articolul obscen și o parte de proprietate box-dimensionării: frontieră-box:
Modificările sunt prezentate în Figura 4.6: lățimea elementelor este păstrată, dar din cauza box-dimensionare: lățime border-box este acum, de asemenea, este format dintr-un cadru și padding. Lățimea este acum aplicată pe fața exterioară a cadrului, și nu la zona de conținut, astfel încât elementele noastre sunt strâns presate unul față de celălalt, și nu sa mutat la o nouă linie.
Figura 4.6 Elementele o cutie-dimensionare: de frontieră-box
Aș sugera folosind-dimensionare caseta de proprietate: frontieră-box. Aceasta face viața mai ușoară, nu este necesar să se calculeze lățimea, Potrivire la lățime de padding și de frontieră.
Cel mai bine este să se aplice-dimensionare caseta: border-caseta cu reglementările de descărcare de gestiune. Exemplul de mai jos este preluat dintr-un articol de Chris Koyera cu CSS-trucuri «moștenire-dimensionarea box, probabil chiar mai bune practici":
Codul de mai sus folosește de frontieră-box pentru toate etichetele implicite, fără a schimba comportamentul de box-dimensionare în părțile existente ale proiectului. Dacă știi exact ce nu ai terțe părți sau componente vechi, care se bazează pe conținutul-box, aceste reguli pot fi simplificate:
Tabelul 4.1 prezintă browserele curente suporta proprietăți box-size: border-box
bloc model de management - este doar un singur ingredient în înțelegerea modului de a crea machete complexe. În secțiunea următoare vom analiza elementele stratificate.
Revizie: Echipa webformyself.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram