CSS3 Box Rozmiary
CSS3 box-sizing nieruchomości pozwala nam na to dopełnienie i obramowanie w łącznej wysokości i szerokości elementu.
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.1 -webkit- |
9.5 |
Bez CSS3 box-sizing obiektu
Domyślnie, szerokość i wysokość elementu jest obliczana w następujący sposób:
Szerokość + dopełnienie + border = rzeczywista szerokość elementu
Wysokość + dopełnienie + border = rzeczywista wysokość elementu
Oznacza to, że: Po ustawieniu szerokość / wysokość elementu, element często wydają się większe, niż to zostało ustawione (bo obramowań elementu są dodawane do elementu w określonym szerokość / wysokość).
Poniższa ilustracja przedstawia dwie <div> elementy z tej samej określonej wysokości i szerokości:
Oba <div> elementy Powyższe skończyć z różnych rozmiarów w wyniku (bo Div2 posiada wypełnienie określony):
Przykład
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Spróbuj sam " Tak więc przez długi czas developerzy określono wartość mniejszą szerokość niż chcieli, bo musieli odjąć padding i granice.
Z CSS3, The box-sizing nieruchomość rozwiązuje ten problem.
Z CSS3 box-sizing obiektu
CSS3 box-sizing nieruchomości pozwala nam na to dopełnienie i obramowanie w łącznej wysokości i szerokości elementu.
Jeśli ustawisz box-sizing: border-box; na dopełnienie i obramowanie elementu są zawarte w szerokości i wysokości:
Oto sam przykład jak powyżej, z box-sizing: border-box; dodany do obu <div> elementy:
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;
} Spróbuj sam " Od wyniku wykorzystania box-sizing: border-box; jest tak dużo lepsze, wielu deweloperów, aby wszystkie elementy na swoich stronach pracować w ten sposób.
Poniższy kod gwarantuje, że wszystkie elementy są wielkości w tym bardziej intuicyjny sposób. Wiele przeglądarek korzystają już box-sizing: border-box; dla wielu elementów formularza (ale nie wszystkie - dlatego wejścia i pola tekstowe wyglądać inaczej na szerokość: 100%;).
Stosując to do wszystkich elementów jest bezpieczny i mądry: