Spojrzenie w rozmiar CSS3
Nie tak dawno temu, kiedy tworzymy pudełko na stronie internetowej, powiedzmy za pomocą div, określamy 100px dla szerokości i wysokości, a następnie wyściółka dla 10px i granice około 10px także.
div width: 100px; wysokość: 100px; padding: 10px; granica: 10px bryła #eaeaea;
Przeglądarki zwiększą rozmiar pudełka do 140px, gdzie ta suma 140px całkowitej szerokości / wysokości składa się z dodania wyściółka i granice następująco; 100px [szerokość / wysokość] + (2 x 10px [padding]) + (2 x 10px [obramowanie]).
Czasami jednak ten wynik nie jest taki, jakiego oczekujemy. Czasami potrzebujemy pudełka, aby zawsze było 100px niezależnie od dopełnienia lub dodanych granic.
Aby przezwyciężyć taki powtarzający się problem podczas tworzenia układu strony internetowej, możemy użyć CSS3 wielkość pudełka właściwość do kontrolowania, jak Model skrzynki CSS powinien działać w przeglądarkach.
Korzystanie z rozmiaru pudełka
The wielkość pudełka właściwość ma dwie opcje wartości, najpierw pole zawartości; która jest wartością domyślną, przy użyciu tej wartości model skrzynki będzie zachowywał się tak, jak to opisano powyżej.
A drugi to obramowanie, gdzie zostanie obliczony rozmiar pudełka odejmując określony rozmiar zawartości z dopełnieniem i dodanymi granicami.
div width: 100px; wysokość: 100px; padding: 10px; granica: 10px bryła #eaeaea; wielkość pudełka: obramowanie; -moz-box-sizing: obramowanie; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
Na przykład, gdy mamy pudełko podobne do tego, które opisaliśmy powyżej (kwadrat 100px z 10 pikslami dla wypełnienia i granic), rozmiar zawartości zmniejszy się do 60px, a całkowita wielkość pudełka pozostaje 100px, gdzie równanie odejmowania można opisać w następujący sposób; 100px [szerokość / wysokość] - ((2 x 10px [padding]) + (2 x 10px [obramowanie])).
- Próbny
- Pobierz źródło
Obsługa przeglądarki
The wielkość pudełka nieruchomość jest obsługiwane we wszystkich przeglądarkach; Firefox 3.6+, Safari 3, Opera 8.5+ i Internet Explorer 8 i nowsze wersje.
Jeśli więc wiesz, że większość użytkowników nie będzie korzystać z wersji Internet Explorer poniżej 8, możesz skorzystać z tej przydatnej rekomendacji (dzięki Paulowi Irlandi).
* box-sizing: border-box; -moz-box-sizing: obramowanie; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
Powyższy fragment zastosuje wielkość pudełka własność do wszystkich elementów na twojej stronie internetowej.
Przykład
W tej sekcji pokażemy Ci prawdziwy przykład, w jaki sposób możemy to wykorzystać wielkość pudełka własność. Stworzymy prostą nawigację, opartą na znaczniku HTML poniżej, z pięcioma linkami w menu.
Następnie dodamy kilka stylów dekoracyjnych; na przykład ustaw nawigację ustal szerokość dla 500px i szerokość łącza dla 100px każdy, następnie wstaw element listy i podaj różne tła dla każdego menu łącza, aby zobaczyć różnicę między nimi.
nav width: 500px; margin: 50px auto 0; wysokość: 50px; nav ul padding: 0; margines: 0; nav li float: left; nav a display: inline-block; szerokość: 100px; wysokość: 100%; background-color: #ccc; kolor: # 555; dekoracja tekstowa: brak; font-family: Arial, sans-serif; rozmiar czcionki: 12pt; wysokość linii: 300%; wyrównywanie tekstu: środek; nav a display: inline-block; szerokość: 100px; wysokość: 100%; kolor: # 555; dekoracja tekstowa: brak; font-family: Arial, sans-serif; nav li: nth-child (1) a background-color: # E9E9E9; border-left: 0; nav li: nth-child (2) a background-color: # E4E4E4; nav li: nth-child (3) a background-color: #DFDFDF; nav li: nth-child (4) a background-color: # D9D9D9; nav li: nth-child (5) a background-color: # D4D4D4; border-right: 0;
W tym momencie nasza nawigacja wygląda normalnie.
Jednak problem pojawi się, gdy dodamy lewą lub prawą granicę do menu łącza.
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3;
Menu zostanie przepełnione do dołu, ponieważ szerokość łącza nie jest już dostępna 100px. To jest teraz 102px, powodując całkowitą szerokość nawigacji 10px dłużej niż określiliśmy powyżej (500px).
Aby rozwiązać ten problem, musimy zastosować wielkość pudełka nieruchomości w następujący sposób:
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3; wielkość pudełka: obramowanie; -moz-box-sizing: obramowanie; -webkit-box-sizing: border-box;
- Próbny
- Pobierz źródło
Dalsze czytanie
I wreszcie, jeśli jesteś typem śmiałego i chcesz zagłębić się w ten temat, przygotowaliśmy dla Ciebie kilka wybranych referencji:
- Zrozumienie modelu pudełkowego CSS - Tech Republic
- Błąd wielkości pudełka w Firefoksie - BugZilla
- Wielkość pudełka FTW - Paul Irish
