Najlepszy samouczek Wielkość skrzynki CSS3 W 2024 r. W tym samouczku możesz dowiedzieć się Pomoc Browser,Nie używaj własności CSS3 box-zaklejania,Użycie CSS3 własność box-zaklejania,
CSS3 box-sizing
nieruchomość ustawić szerokość i wysokość atrybutów zawiera padding (padding) oraz obramowania (border).
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 |
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:
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.
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.
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: