Najnowsze tutoriale tworzenie stron internetowych
 

CSS3 Box Sizing


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:

Ten div jest mniejszy (szerokość 300px i wysokość 100px).

Ten div jest większy (szerokość 300px, a także wysokość 100px).

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:

Oba DIV są tej samej wielkości teraz!

Brawo!

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:

Przykład

* {
    box-sizing: border-box;
}
Spróbuj sam "