CSS3 - Dimensionamento della scatola
La proprietà di ridimensionamento della casella viene utilizzata per modificare l'altezza e la larghezza dell'elemento.
Da css2, la proprietà box ha funzionato come mostrato di seguito -
larghezza + imbottitura + bordo = larghezza effettiva visibile / renderizzata del riquadro di un elemento
altezza + imbottitura + bordo = altezza effettiva visibile / renderizzata del riquadro di un elemento
Significa che quando si impostano l'altezza e la larghezza, appare un po 'più grande della dimensione data perché l'elemento boarder e padding vengono aggiunti all'altezza e alla larghezza dell'elemento.
Proprietà di dimensionamento CSS2
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Produrrà il seguente risultato:
L'immagine sopra ha la stessa larghezza e altezza di due elementi ma il risultato è diverso, poiché il secondo è incluso nella proprietà di riempimento.
Proprietà dimensionamento box CSS3
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Il campione sopra ha la stessa altezza e larghezza con box-sizing:border-box. qui il risultato è mostrato sotto.
Produrrà il seguente risultato:
Gli elementi sopra hanno la stessa altezza e larghezza con il box-sizing: border-box quindi il risultato è sempre lo stesso per entrambi gli elementi come mostrato sopra.