CSS3 Caseta Dimensionarea
CSS3 box-sizing proprietate ne permite să includă padding și granița cu lățimea totală a elementului și înălțime.
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit- sau -moz- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
Fără CSS3 box-sizing de proprietate
În mod implicit, lățimea și înălțimea unui element se calculează astfel:
latime + padding + border = lățimea efectivă a unui element
înălțime + padding + border = înălțimea efectivă a unui element
Acest lucru înseamnă: Când setați lățimea / înălțimea unui element, elementul de multe ori apar mai mari decât ați stabilit (because the element's border and padding are added to the element's specified width/height) pentru (because the element's border and padding are added to the element's specified width/height) de (because the element's border and padding are added to the element's specified width/height) .
Următoarea ilustrație arată două <div> elemente cu aceeași lățime și înălțime specificată:
Cele două <div> elementele de mai sus capăt cu diferite dimensiuni ale rezultatului (deoarece Div2 a specificat o umplutură):
Exemplu
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Încearcă - l singur » Deci, pentru o lungă perioadă de timp dezvoltatorii web au specificat o valoare lățime mai mică decât au vrut, pentru că a trebuit să se scadă din padding și chenarele.
Cu CSS3, box-sizing de proprietate rezolvă această problemă.
Cu CSS3 box-sizing de proprietate
CSS3 box-sizing proprietate ne permite să includă padding și granița cu lățimea totală a elementului și înălțime.
Dacă setați box-sizing: border-box; de box-sizing: border-box; de box-sizing: border-box; pe un element de umplutură și de frontieră sunt incluse în lățimea și înălțimea:
Iată același exemplu ca mai sus, cu box-sizing: border-box; adăugat la ambele <div> elemente:
Exemplu
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} Încearcă - l singur » Având în vedere că rezultatul folosind box-sizing: border-box; este atât de mult mai bine, mulți dezvoltatori doresc toate elementele de pe paginile lor de a lucra în acest fel.
Codul de mai jos se asigură că toate elementele sunt dimensionate în acest mod mai intuitiv. Multe browsere folosesc deja box-sizing: border-box; de box-sizing: border-box; pentru mai multe elemente de formular (dar nu toate - care este motivul pentru intrări și zone de text arată diferit, la lățime: 100%;).
Aplicarea acestui tuturor elementelor este sigur și înțelept: