El dimensionament de caixa (box-sizing) és una propietat CSS que permet controlar com es calculen les dimensions d'un element. Aquesta propietat és fonamental per entendre com es distribueixen les mides dels elements en una pàgina web i com es poden ajustar per obtenir el disseny desitjat.
Què és el box-sizing?
La propietat box-sizing defineix com es calculen l'amplada i l'alçada totals d'un element. Hi ha dues opcions principals:
content-box(valor per defecte): L'amplada i l'alçada només inclouen el contingut de l'element. Els marges, el farciment i les vores no es tenen en compte en aquestes dimensions.border-box: L'amplada i l'alçada inclouen el contingut, el farciment i les vores. Això facilita el control de les dimensions totals de l'element.
Sintaxi
Exemple Pràctic
Vegem un exemple pràctic per entendre millor com funciona box-sizing.
HTML
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemple de Box Sizing</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="content-box">Content Box</div> <div class="border-box">Border Box</div> </body> </html>
CSS
/* Estils generals */
div {
width: 200px;
height: 100px;
margin: 20px;
padding: 20px;
border: 10px solid #000;
background-color: #f0f0f0;
font-size: 18px;
text-align: center;
line-height: 100px;
}
/* Content Box */
.content-box {
box-sizing: content-box;
}
/* Border Box */
.border-box {
box-sizing: border-box;
}Explicació
- Content Box: L'amplada i l'alçada només inclouen el contingut. El farciment i les vores s'afegeixen a aquestes dimensions, fent que l'element ocupi més espai del que s'especifica.
- Border Box: L'amplada i l'alçada inclouen el contingut, el farciment i les vores. Això fa que l'element ocupi exactament l'espai especificat.
Resultat Visual
| Propietat | Amplada Total | Alçada Total |
|---|---|---|
content-box |
260px | 160px |
border-box |
200px | 100px |
Exercici Pràctic
Enunciat
Crea una pàgina HTML amb tres divs. El primer ha de tenir box-sizing: content-box, el segon box-sizing: border-box i el tercer ha de tenir box-sizing: border-box però amb diferents valors de farciment i vora. Observa com canvien les dimensions totals dels elements.
Solució
HTML
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exercici de Box Sizing</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="content-box">Content Box</div> <div class="border-box">Border Box</div> <div class="border-box-custom">Border Box Custom</div> </body> </html>
CSS
/* Estils generals */
div {
width: 200px;
height: 100px;
margin: 20px;
padding: 20px;
border: 10px solid #000;
background-color: #f0f0f0;
font-size: 18px;
text-align: center;
line-height: 100px;
}
/* Content Box */
.content-box {
box-sizing: content-box;
}
/* Border Box */
.border-box {
box-sizing: border-box;
}
/* Border Box Custom */
.border-box-custom {
box-sizing: border-box;
padding: 30px;
border: 5px solid #000;
}Explicació
- Content Box: L'amplada total serà 260px (200px + 20px de farciment a cada costat + 10px de vora a cada costat).
- Border Box: L'amplada total serà 200px, ja que el farciment i la vora estan inclosos en les dimensions especificades.
- Border Box Custom: L'amplada total serà 200px, però el farciment i la vora són diferents, afectant l'espai intern però no les dimensions totals.
Conclusió
La propietat box-sizing és essencial per controlar com es calculen les dimensions dels elements en CSS. Utilitzar box-sizing: border-box pot simplificar molt el disseny, ja que les dimensions especificades inclouen el farciment i les vores, fent que sigui més fàcil obtenir el disseny desitjat. Practicar amb diferents configuracions de box-sizing t'ajudarà a comprendre millor com afecta les dimensions dels elements i a aplicar-ho correctament en els teus projectes.
Domini del CSS: De Principiant a Avançat
Mòdul 1: Introducció al CSS
- Què és el CSS?
- Sintaxi i Selectors de CSS
- Com Afegir CSS a HTML
- Propietats Bàsiques de CSS
- Colors en CSS
- Unitats i Mesures en CSS
Mòdul 2: Estilització de Text i Fonts
- Propietats de Text
- Propietats de Fonts
- Integració de Google Fonts
- Alineació i Espaiat de Text
- Decoració i Transformació de Text
Mòdul 3: Model de Caixa i Disseny
- Comprendre el Model de Caixa
- Marge i Farciment
- Vora i Contorn
- Amplada i Alçada
- Dimensionament de Caixa
- Propietat de Visualització de CSS
Mòdul 4: Posicionament i Flotació
- Propietat de Posició de CSS
- Posicionament Estàtic, Relatiu, Absolut i Fix
- Flotació i Neteja de CSS
- Crear Dissenys amb Flotació
- Índex Z de CSS
Mòdul 5: Flexbox
- Introducció a Flexbox
- Propietats del Contenidor Flex
- Propietats dels Elements Flex
- Crear Dissenys amb Flexbox
- Disseny Responsiu amb Flexbox
Mòdul 6: CSS Grid
- Introducció a CSS Grid
- Propietats del Contenidor Grid
- Propietats dels Elements Grid
- Crear Dissenys amb CSS Grid
- Disseny Responsiu amb CSS Grid
Mòdul 7: Tècniques Avançades de CSS
Mòdul 8: Disseny Responsiu
- Introducció al Disseny Responsiu
- Consultes de Mitjans
- Tipografia Responsiva
- Imatges Responsives
- Disseny Mobile-First
Mòdul 9: Preprocessadors i Frameworks
- Introducció als Preprocessadors de CSS
- Conceptes Bàsics de Sass
- Conceptes Bàsics de Less
- Introducció als Frameworks de CSS
- Ús de Bootstrap
Mòdul 10: Millors Pràctiques i Optimització
- Millors Pràctiques de CSS
- Organització del Codi CSS
- Minificació de CSS
- Optimització del Rendiment de CSS
- Depuració de CSS