Rozmiar pola CSS
Rozmiar pola CSS
Właściwość CSS box-sizingpozwala nam uwzględnić dopełnienie i obramowanie w całkowitej szerokości i wysokości elementu.
Bez CSS box-sizing Property
Domyślnie szerokość i wysokość elementu jest obliczana w następujący sposób:
szerokość + dopełnienie + obramowanie = rzeczywista szerokość elementu
wysokość + dopełnienie + obramowanie = rzeczywista wysokość elementu
Oznacza to: Kiedy ustawisz szerokość/wysokość elementu, element często wydaje się większy niż ustawiłeś (ponieważ obramowanie i dopełnienie elementu są dodawane do określonej szerokości/wysokości elementu).
Poniższa ilustracja przedstawia dwa elementy <div> o tej samej określonej szerokości i wysokości:
Dwa powyższe elementy <div> mają w wyniku różne rozmiary (ponieważ div2 ma określone wypełnienie):
Przykład
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Nieruchomość box-sizingrozwiązuje ten problem.
Z właściwością rozmiaru pudełka CSS
Właściwość box-sizingpozwala nam na uwzględnienie dopełnienia i obramowania w całkowitej szerokości i wysokości elementu.
Jeśli ustawisz box-sizing: border-box;na elemencie, dopełnienie i obramowanie są uwzględniane w szerokości i wysokości:
Oto ten sam przykład co powyżej, z box-sizing: border-box;
dodanymi do obu elementów <div>:
Przykład
.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;
}
Ponieważ wynik używania box-sizing: border-box;jest o wiele lepszy, wielu programistów chce, aby wszystkie elementy na ich stronach działały w ten sposób.
Poniższy kod zapewnia, że wszystkie elementy mają rozmiar w bardziej intuicyjny sposób. Wiele przeglądarek używa już box-sizing: border-box;wielu elementów formularzy (ale nie wszystkich - dlatego dane wejściowe i obszary tekstowe wyglądają inaczej na szerokości: 100%;).
Zastosowanie tego do wszystkich elementów jest bezpieczne i mądre:
Przykład
* {
box-sizing: border-box;
}
Właściwość rozmiaru pola CSS
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |