box-sizing
Decyduje, czy width i height obejmują padding i obramowanie.
- Wartość domyślna
content-box- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy, które mają szerokość lub wysokość
- JavaScript
element.style.boxSizing = "border-box"
Przykład
#*,
*::before,
*::after {
box-sizing: border-box;
}<div class="stage">
<input placeholder="Pole o szerokości 100% nie wyjdzie poza kontener" style="width: 100%; padding: 10px 12px; border: 2px solid #525252; border-radius: 8px; box-sizing: border-box;">
</div>Definicja i zastosowanie
#Właściwość box-sizing zmienia sposób liczenia rozmiaru elementu. Przy domyślnym content-box wartości width i height dotyczą samej treści, a padding i obramowanie powiększają element na zewnątrz.
Przy border-box podana szerokość jest całkowitą szerokością elementu razem z paddingiem i obramowaniem. Treść kurczy się wtedy, żeby się zmieścić. To znacznie bardziej intuicyjne i dlatego wiele projektów ustawia border-box dla wszystkich elementów.
Popularny reset wygląda tak: *, *::before, *::after { box-sizing: border-box; }.
Składnia
#box-sizing: content-box | border-box;Wartości
#- Element ma 200px treści plus 2 × 16px paddingu i 2 × 8px obramowania, czyli 248px. Zielony pasek ma 200px.
- Cały element ma dokładnie 200px, tyle co zielony pasek.
Wartości w praktyce
#content-box
.demo { box-sizing: content-box; }border-box
.demo { box-sizing: border-box; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Dodaj reset
border-boxna początku każdego arkusza. Oszczędzi Ci liczenia pikseli. - Pola formularzy mają w niektórych przeglądarkach domyślnie inny
box-sizingniż reszta elementów, reset ujednolica je wszystkie.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.