CSS Box Modelul
Toate elementele HTML pot fi considerate ca fiind cutii. În CSS, termenul "box model" de "box model" este utilizat atunci când vorbim despre design și aspect.
Modelul caseta CSS este, în esență, o cutie care se înfășoară în jurul fiecărui element HTML. Se compune din: margini, borduri, umplutură, și conținutul real.
Imaginea de mai jos ilustrează modelul caseta:
Explicarea diferitelor părți:
- Content - Conținutul cutiei, în cazul în care apar text și imagini
- Padding - Golește o zonă din jurul conținutului. Căptușeala este transparent
- Border - Un chenar care merge în jurul valorii de umplutură și conținutul
- Margin - Golește o zonă în afara graniței. Marja este transparentă
Modelul cutie ne permite să adăugați un chenar în jurul valorii de elemente, și pentru a defini spațiul dintre elemente.
Exemplu
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
} Încearcă - l singur » Lățimea și înălțimea unui Element
Pentru a seta lățimea și înălțimea unui element corect în toate browserele, trebuie să știți cum funcționează modelul de cutie.
Important: Când setați lățimea și înălțimea proprietățile unui element cu CSS, setați doar lățimea și înălțimea content area de content area . Pentru a calcula dimensiunea completă a unui element, trebuie să adăugați, de asemenea, de umplutură, borduri și margini.
Să presupunem că vrem să stil un <div> element de a avea o lățime totală de 350px:
Exemplu
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
} Încearcă - l singur » Matematic:
Lățimea totală a unui element trebuie calculat astfel:
Lățimea totală = element de latime + padding stanga + padding dreapta + frontieră la stânga + frontieră dreapta + marginea din stânga + marja dreapta
Înălțimea totală a unui element trebuie calculat astfel:
Înălțimea totală Element = înălțime + padding sus + padding jos + chenarul de sus + jos + frontieră marginea de sus + marginea de jos
Notă pentru IE vechi: Internet Explorer 8 și versiunile anterioare, includ padding și de frontieră în width proprietate. Pentru a rezolva această problemă, adăugați o <!DOCTYPE html> pagina HTML.
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»