Przykład
Określić, że <div> elementy powinny mieć padding i border ujęte w całkowitej szerokości i wysokości tego elementu:
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Nieruchomość box-zaklejania służy powiedzieć przeglądarkę jakie właściwości klejące (width and height) powinna zawierać.
Powinny one obejmować border-box? Albo po prostu zawartość skrzynki (która jest wartością domyślną właściwości szerokość i wysokość)?
| Domyślna wartość: | content-box |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.boxSizing="border-box" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit- lub -moz- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| 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
| Wartość | Opis |
|---|---|
| content-box | Zaniedbanie. Własności width i height (and min/max properties) zawiera tylko treść. Graniczna, wyściółka lub marża nie są wliczone |
| border-box | Własności width i height (and min/max properties) zawiera treści, dopełnienie i obramowanie, ale nie margines |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Przykład
Określ dwa ramkach obok siebie:
div
{
box-sizing: border-box;
width: 50%;
float: left;
}
Spróbuj sam " Podobne strony
Tutorial CSS3: CSS3 Box Rozmiary
HTML DOM referencyjny: boxSizing property