Blocurile HTML și proprietățile lor CSS, Web On Life
S-ar părea că este greu de reconciliat. HTML și CSS nu sunt nici măcar limbaje de programare. O pagină HTML este doar blocuri plasate în locul potrivit. De fapt, totul nu este atât de simplu. A sta la layout fara a intelege nuantele modelului bloc inseamna a pierde mult timp la ajustarea rezultatelor la intamplare, de fiecare data fiind surprins de rezultate neasteptate sau de absenta acestora. În construcția de șantier, ca și în construcții, dacă doriți să construiți ceva mai serios decât un gard, trebuie să cunoașteți subtilitățile.
proprietăți css pentru a defini înălțimea și lățimea blocului.
În mod implicit, o lățime de casetă ocupă tot spațiul disponibil și este limitată de lățimea casetei părinte. Înălțimea blocului este determinată de conținutul acestuia.
Blocul poate fi redimensionat folosind proprietățile înălțime și lățime. Aceste proprietăți sunt setate nu pentru întregul bloc, ci pentru conținutul acestuia. Acest lucru trebuie reținut deoarece, pe lângă conținut, alte două proprietăți afectează dimensiunea blocului - chenar și umplutură. Din nume, puteți înțelege că chenarul definește granița. În imagine, chenarul este marcat cu o linie roșie. Spațiul dintre chenar și conținut este definit folosind proprietatea padding. Dacă nu îl setați, atunci textul din imaginea de mai jos va fi apăsat aproape de chenar.
Astfel, atunci când se calculează dimensiunea blocului, pe lângă lățime și înălțime, trebuie luate în considerare căptușeala și chenarul. De exemplu, să calculăm dimensiunea blocului pentru care sunt date următoarele valori
Lățimea blocului 200px+10px*2+5px*2=230px
Pentru a nu te deranja cu aritmetica și a ști întotdeauna exact dimensiunea blocului, există proprietatea box-sizing. Ia trei valori.
- content-box - Valorile date în lățime și înălțime se aplică numai conținutului.
- padding-box - Valoarea dată în lățime și înălțime determină dimensiunea conținutului plus dimensiuneacăptușeală.
- border-box - Valorile date în lățime și înălțime determină dimensiunea conținutului plus umplutura plus chenarul
Dacă în exemplul de mai sus adăugați linia
dimensiunea blocului va fi de 200px declarată, iar lățimea conținutului va fi redusă la 200px-10px*2-5px*2=170px.
marginea modului de a seta corect distanța dintre blocuri.
Ar fi greșit să vorbim despre blocuri și să nu menționăm margine, mai ales că e ceva de spus. Pentru cei care nu cunosc, marginea definește spațiul liber din jurul cutiei. Spre deosebire de căptușeală, totul nu este atât de evident aici. Luați în considerare două blocuri, unul imbricat în celălalt. Setați marja blocului imbricat: 10%. Se pune imediat întrebarea ce să numere aceste procente. Procentul este luat din lățimea elementului părinte. Nu contează dacă definim indentări orizontale sau verticale. Răspunsul, sincer, nu este evident, dar dacă te uiți la explicații, devine clar de ce a fost aleasă această opțiune.
Surprizele nu se opresc aici. marja adăugată imaginii noastre va da un rezultat atât de neașteptat.
Blocul părinte este afișat cu gri în imagine. Contrar așteptărilor noastre, marja aplicată blocului copil nu a extins marginile de sus și de jos ale părintelui. Acest lucru s-a întâmplat deoarece blocul părinte nu are pe ce să se construiască. În astfel de cazuri, marginea este împinsă spre exterior și respinsă de blocul învecinat sau de marginile blocului situat cu un nivel mai sus. Pentru ca blocul să fie respins din blocul părinte, blocul părinte trebuie să aibă padding sau chenar sau proprietatea de overflow setată la orice valoare, alta decât cea vizibilă.
O altă caracteristică a indentării este colapsul. Ideea este că, dacă două elemente adiacente au o marjă setată, atunci distanța dintre ele va fi egală cu cea mai mare valoare.
marginea poateiau valori negative. În acest caz, un bloc se va suprapune pe celălalt. Măsura în care un bloc se târăște pe altul este determinată de
- Dacă ambele marje sunt negative, atunci se ia o valoare modulo mare
- Dacă o marjă este negativă și cealaltă este pozitivă, atunci se adună.
Membru pentru
Miercuri, 17.12.2014 - 20:22
Sunt obligat să o fac vreodată
Într-o zi cu siguranță voi învăța cum să fac un site web de la zero. Inteleg multe, nu. Trebuie să-mi dau seama totul, pentru că nici un subiect nu mi se potrivește pe deplin. Acum problema este cum să vă faceți site-ul de cauciuc. Apropo, am citit despre toate aceste indentări: trebuie, de asemenea, să poți seta parametri, astfel încât toate browserele să afișeze totul la fel. De asemenea, trucul este în continuare același.
Membru pentru
Miercuri, 17.12.2014 - 21:15