CSS box-sizing Property
Przykład
Uwzględnij dopełnienie i obramowanie w całkowitej szerokości i wysokości elementu:
#example1 {
box-sizing: border-box;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość box-sizing
określa, w jaki sposób obliczana jest szerokość i wysokość elementu: czy powinny zawierać dopełnienie i obramowanie, czy nie.
Domyślna wartość: | zawartość-box |
---|---|
Dziedziczny: | nie |
Animowalny: | nie. Przeczytaj o animacji |
Wersja: | CSS3 |
Składnia JavaScript: | obiekt .style.boxSizing="ramka-pudełko" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit- lub -moz- określają pierwszą wersję, która działała z przedrostkiem.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Składnia CSS
box-sizing: content-box|border-box|initial|inherit;
Wartości nieruchomości
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Określ dwa obramowane pola obok siebie:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Przykład
Ustaw „uniwersalny rozmiar pudełka”:
* {
box-sizing: border-box;
}
Powiązane strony
Samouczek CSS: Rozmiar pola CSS
Odniesienie HTML DOM: właściwość boxSizing