Czego nie wiesz o obliczaniu marginesów procentowych w CSS

Większość projektantów stron internetowych uważa, że dobrze zna CSS. Przecież nie ma to zbyt wiele - kilka typów selektorów, kilkadziesiąt właściwości i kilka reguł kaskadowych, których ledwo trzeba pamiętać, ponieważ sprowadzają się do zdrowego rozsądku. Ale kiedy dochodzisz do poziomu nitty-gritty, istnieje wiele niejasnych szczegółów, które niewielu projektantów naprawdę rozumie.

Odkryłem, że kiedy badałem wyniki darmowego testu CSS, który oferowałem online przez ostatnie sześć miesięcy jedno pytanie prawie nikt mam rację. Z tysięcy ludzi, którzy wzięli udział w teście, mniej niż 14% miało rację.

Pytanie sprowadza się do tego: Jak obliczyć marginesy procentowe?

Pytanie

Powiedz, że Twoja witryna ma kontener div, i wewnątrz tego, treści div:

Teraz dajmy tę treść div górny margines:

.treść margin-top: 10%;

Dobra, więc to 10% ... ale 10% co? Takie jest pytanie tylko 13,8% osób może odpowiedzieć poprawnie. I pamiętaj: ci ludzie mają dostęp do Google!

W tym pytaniu kocham to wydaje się, że odpowiedź powinna być oczywista. Tak bardzo, że podejrzewam, że większość ludzi po prostu zgaduje (i zgaduje, że się myli). Ale może to nie wydaje ci się oczywiste. To znaczy, jeśli naprawdę używasz swojej wyobraźni, przeglądarka może na wiele sposobów obliczyć taki margines.

A co powiesz na to, jeśli zawężę to dla ciebie, ponieważ pytanie w teście jest właściwie wielokrotnym wyborem. Oto twoje opcje:

10% wysokości div zawartości
10% wysokości pojemnika div
10% szerokości div treści
10% szerokości div pojemnika

Pamiętaj, że tylko 13,8% osób może wybrać właściwą odpowiedź z tej listy. To jest gorsze niż przypadek!

Przyjrzyj się uważnie odpowiedziom; zobaczysz, że są tylko dwie rzeczy, które musisz wiedzieć:

Kontener lub zawartość?

Po pierwsze, jest wielkość marginesu na podstawie rozmiaru samej zawartości div lub rozmiaru div kontenera?

Teraz to nie jest gimme, ale prawdopodobnie możesz ufać swoim instynktom. Jeśli ustawię div na 50% szerokości jego kontenera, a następnie chcę, aby jego lewy i prawy margines wypełniły resztę przestrzeni, naturalnie ustawię je na 25% każdy (więc procenty sumują się do 100%). Aby to działało, marginesy procentowe muszą opierać się na wymiarach kontenera.

Rzeczywiście dwie trzecie osób, które zdadzą test, otrzymało tę część odpowiedzi poprawnie.

Szerokość lub wysokość?

druga, to rozmiar marginesu oparty na szerokości lub wysokości tego elementu?

Jeśli zwracałeś uwagę, prawdopodobnie już jesteś na baczności. Dla tak niewielu osób, aby wybrać właściwą odpowiedź, musi to być podchwytliwe pytanie?

A jednak założę się, że ledwo w to wierzysz odpowiedź nie jest wysokość. Cóż, nie jest.

Tak, mówimy tu o górnym marginesie. Tak, rozmiar tego marginesu jest pomiarem pionowym. Tak, jeśli blok stanowi 50% wysokości jego kontenera, a ty dałeś mu górny margines w wysokości 25%, spodziewałbyś się, że będzie to 25% wysokości kontenera. I myliłbyś się.

Nie czuj się źle, jeśli uważasz, że to musi być wysokość. Prawie 80% osób, które biorą udział w teście, zgadza się z tobą:

Sprawia sens… Nie, naprawdę!

Nadal w to nie wierzysz? Oto cytat ze specyfikacji CSS W3C:

Procent jest obliczany w odniesieniu do szerokości bloku zawierającego wygenerowane pole. Należy zauważyć, że dotyczy to również marginesu górnego i marginesu dolnego.

To samo dotyczy górnej i dolnej wyściółki, na wypadek gdybyś się zastanawiał. Jeśli chodzi o granice, podawanie ich szerokości w procentach jest nielegalne.

Więc w tym momencie prawdopodobnie myślisz, że twórcy CSS też zwariowany, albo po prostu popełnili naprawdę głupi błąd. Ale jestem tutaj, aby ci powiedzieć, istnieją dwa dobre powody, aby oprzeć pionowe marginesy na szerokości bloku zawierającego:

Spójność pozioma i pionowa

Istnieje oczywiście skrócona właściwość, która pozwala określić margines dla wszystkich czterech boków bloku:

marża: 10%;

Rozwija się do:

margines: 10%; margines prawy: 10%; margin-bottom: 10%; margines po lewej: 10%;

Teraz, jeśli napisałeś którykolwiek z powyższych, prawdopodobnie spodziewałbyś się, że marginesy na wszystkich czterech stronach bloku będą równej wielkości, prawda? Ale jeśli margines lewy i prawy margines opierały się na szerokości kontenera, a margines górny i marginesowy były oparte na jego wysokości, to zazwyczaj byłyby inne!

Unikanie zależności zależnej od obiegu

CSS umieszcza zawartość w blokach ułożonych pionowo w dół strony, więc szerokość bloku jest zwykle podyktowana wyłącznie przez szerokość jego rodzica. Innymi słowy, możesz oblicz szerokość bloku bez martwienia się o to, co jest wewnątrz ten blok.

Wysokość bloku to inna sprawa. Zazwyczaj wysokość zależy od łącznej wysokości jego zawartości. Zmień wysokość treści i zmień wysokość bloku. Zobacz problem?

Aby uzyskać wysokość zawartości, musisz znać górne i dolne marginesy, które są do niej stosowane. A jeśli te marginesy zależą od wysokości bloku macierzystego, masz kłopoty, ponieważ nie możesz obliczyć jednego bez znajomości drugiego!

Oparcie marginesów pionowych na szerokość kontenera przerywa zależność kołową i umożliwia rozłożenie strony.

Ace the Class

Więc masz to: najtrudniejsze pytanie w teście, a teraz możesz na nie odpowiedzieć. Chcesz wiedzieć, jak postępujesz w pozostałej części testu? Spróbuj sam. Obiecuję, że większość pytań jest dużo łatwiejsza niż ta.

Tymczasem szukam nowego najtrudniejszego pytania! Jak myślisz, jaki szczegół CSS nikt nie wie?

Nota redaktora: To jest napisane dla Hongkiat.com przez Kevin Yank. Kevin pisał o sieci od 1999 r., Z jego książkami na temat PHP, CSS i JavaScript. Prowadził także podcasty, wypowiadane na konferencjach, i produkował szkolenia wideo, a wszystko o sieci. Obecnie kieruje zespołem programistów w Sit the Test, aplikacji internetowej do wykonywania i przeprowadzania testów online.

Więcej o Hongkiat:

Projektowanie stron internetowych: Równa wysokość kolumn z CSS
6 sztuczek CSS do wyrównania treści w pionie
Spojrzenie w jednostki CSS: piksele, EM i procent
Spojrzenie w: CSS3 Wielkość pudełka

Teraz przeczytaj: 10 ukrytych właściwości CSS3, które powinieneś znać