Wielkość skrzynki CSS3
CSS3 box-sizing nieruchomość ustawić szerokość i wysokość atrybutów zawiera padding (padding) oraz obramowania (border).
Pomoc Browser
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji nieruchomości.
Natychmiast po numerze -webkit- przeglądarki lub -moz- określonym prefiksem.
| nieruchomość | |||||
|---|---|---|---|---|---|
| box-zaklejania | 10,0 4,0 -webkit- | 8,0 | 29,0 2,0 -moz- | 5,1 3,1 -webkit- | 9,5 |
Nie używaj własności CSS3 box-zaklejania
Domyślnie szerokość i element sposobem high-end obliczeniowa jest następująca:
width (szerokość) + dopełnienie (dopełnienie) + granica (granica) = rzeczywista szerokość elementów
wysokość (wysokość) + dopełnienie (dopełnienie) + granica (granica) = rzeczywista wysokość elementu
Oznacza to, że gdy ustawiamy elementu szerokość / wysokość, wysokość wyświetlania elementu i szerokość będzie większa (z powodu elementu granicy z wyściółką będzie obliczyć szerokość / wysokość w).
Te dwie <div>, chociaż szerokość i wysokość ustawienia takie same, ale wielkość prawdziwego pokazu niespójna, ponieważ Div2 określonym padding:
Przykłady
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Spróbuj »
Jeśli chcesz użyć tej metody, aby uzyskać mniejsze pole i zawiera w marginesie, trzeba wziąć pod uwagę granicę i wewnątrz szerokości marginesu.
CSS3 box-sizing własność dobrym rozwiązaniem tego problemu.
Użycie CSS3 własność box-zaklejania
CSS3 box-sizing atrybut zawiera padding (padding), a granica (granica) w szerokości i wysokości elementu.
Jeśli ustawisz na elemencie box-sizing: border-box; padding (dopełnienia) i granicy (granica) jest również w szerokości i wysokości:
Oto dwie <div> element jest dodawany box-sizing: border-box; właściwości prosty przykład.
Przykłady
width: 300px;
height: 100px;
border: 1px solid blue;
box-klejący: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-klejący: border-box;
}
Spróbuj »
Sądząc po wynikach box-sizing: border-box; lepszych wyników, jest również wiele programiści potrzebują.
Poniższy kod może mieć wszystkie elementy w bardziej intuicyjny sposób wyświetlania wielkości. Wiele przeglądarek już wspierać box-sizing: border-box; (ale nie wszystkie - dlatego elementy wejściowe i tekst zawarty width: 100%; szerokość słupka to nie to samo).
Wszystkie elementy wykorzystujące pole-wielkości jest bardziej zalecane: