Zawartość
- Delikatne elementy na wierzchu
- Starannie zapakowane koszulki
- Skarpetki wypełniające luki
- Udanej podróży
Jest północ i ta div w Twojej witrynie nadal wygląda jak skrzynka na zabawki dziecka. Wszystkie elementy to pomieszany bałagan i za każdym razem, gdy grasz z CSS pokaz własności, przestawiają się w zupełnie inny nonsens.
Jeśli jesteś podobny do mnie, prawdopodobnie rozwiążesz ten problem, mamrocząc pod nosem i coraz bardziej agresywnie używając klawiatury. I chociaż ta strategia działała dla mnie wcześniej, ostatnio postanowiłem znaleźć lepszy sposób na zrozumienie pokaz własność.
Okazuje się, że podstawy pokaz są znacznie prostsze niż początkowo sądziłem. W rzeczywistości używają tych samych zasad, co pakowanie walizki. Mam zamiar opisać Blok wyświetlacza, inline-block i inline. Jeśli wcześniej ułożyłeś walizkę w uporządkowany sposób, zobaczysz podobieństwo. Jeśli jesteś osobą, która na chybił trafił taranuje ci całe ubranie - cóż, tylko tyle mogę dla ciebie zrobić.
W naszej walizce znajdą się trzy rodzaje odzieży:
- Delikatna jak koszula z kołnierzykiem
- Koszulki, które można podwinąć
- Skarpetki lub bielizna, które można włożyć w luki
Dla porównania, gdybyśmy modelowali walizkę w HTML, wyglądałoby to tak:
div class = 'walizka'> div class = 'delikatny'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = „tshirt”> / div> / div>
Delikatne elementy na wierzchu
Blok wyświetlacza jest wartością domyślną dla większości elementów HTML. Oznacza to, że element zajmuje całą poziomą przestrzeń w swoim pojemniku div. Jeśli znajduje się obok innych elementów siostrzanych, rozpocznie nową linię i nie zezwoli na inne elementy w swojej linii. Jest podobny do delikatnych przedmiotów, które kładziesz na górze walizki. Są to delikatne lub eleganckie artykuły, takie jak koszule z kołnierzykiem. Nie chcesz, żeby się pomarszczyły, więc upewnij się, że nie są przytrzaśnięte do innych części garderoby.
W ten sposób pojawia się jedna z najtrudniejszych części Blok wyświetlacza. Zauważ, że koszula z kołnierzykiem nie zajmuje całej szerokości walizki? Nie oznacza to, że inne przedmioty wskoczą na jego poziom. Powiedzmy, że ta koszula ma 60% szerokości walizki; nadal blokowałoby to dołączenie innych elementów na najwyższym poziomie.
Dlatego na zdjęciu jest pomarańczowa obwódka. ZA Blok wyświetlacza element automatycznie doda margines wokół niego, jeśli nie zajmie całej poziomej przestrzeni.
Starannie zapakowane koszulki
Większość twojej walizki jest prawdopodobnie pełna reszty ubrania na podróż. Ze względu na prostotę ograniczymy to tylko do T-shirtów. W Internecie toczy się wielka debata na temat tego, czy składanie lub zwijanie jest bardziej wydajne. Jestem typową osobą.
W każdym razie, aby zmieścić jak najwięcej przedmiotów, ustawiasz koszulki obok siebie. To jest dokładnie to wyświetlacz: inline-block jest przeznaczony dla. Elementy te mogą znajdować się obok siebie na tej samej linii, jak również obok wyświetlacz: inline elementy.
w odróżnieniu wyświetlacz: inline elementy, plik inline-block element zostanie przeniesiony do następnej linii, jeśli nie zmieści się w swoim zawierającym div obok drugiego inline-block elementy. Aby koszulka przeniosła się do następnego rzędu, należy ją przeciąć na pół, a pozostałą połowę wykorzystać do rozpoczęcia nowego rzędu. Blok inline elementy nie mogą się dzielić na pół, jeśli nie mieszczą się w linii.
Skarpetki wypełniające luki
Wróć do oryginalnego kodu HTML, a zauważysz, że jest jedna skarpetka div> między ośmioma koszulkami. Ale spójrz na poziomy widok walizki po prawej stronie. Jeśli jest jedna skarpetka div>, w jaki sposób może kończyć środkowy rząd i rozpoczynać dolny rząd? Taki jest cel wyświetlacz: inline!
Na inline element przejdzie do następnej linii, jeśli przekroczy szerokość div (w ten sposób różni się od inline-block lub blok). Od naszych skarpet div jest pełen skarpetek, które są przypadkowo upchane w szczeliny, może łatwo zacząć wypełniać lukę po prawej stronie środkowego rzędu i rozlać się, aby rozpocząć dolny rząd.
Aby tak się stało, nie trzeba będzie przecinać skarpet na pół. Dlatego mogą się nimi stać inlinepodczas gdy koszulki mogą być tylko inline-block. Jeśli koszulki w środkowym rzędzie zajmowały tylko 60 procent szerokości, skarpetki div> przesunąłby się w górę, aby wypełnić całą przestrzeń w pozostałej części rzędu.
Udanej podróży
Oto ostateczny CSS dla naszej walizki:
.delicate {display: block; szerokość: 60%; } .tshirt {display: inline-block; szerokość: 20%; } .socks {display: inline; }
Oto kilka alternatywnych scenariuszy ilustrujących różne zastosowania wyświetlacza. Gdyby delikatesy na wierzchu miały wyświetlacz: inline-block, pasowałyby tuż obok T-shirtów. Niektóre koszulki przesunęłyby się na górną linię, a reszta odpowiednio się dostosowała. Nie byłoby wygodnego bufora po lewej i prawej stronie koszuli z kołnierzykiem.
Gdyby każda koszulka miała Blok wyświetlacza, miałbyś ogromny stos koszulek jeden na drugim, po jednym w każdym wierszu. Gdyby skarpetki miały wyświetlacz: inline-block, wszystkie siedziałyby w dolnym rzędzie zamiast przepływać między dwoma rzędami. Niektóre koszulki były zsuwane do innego rzędu, tworząc czwartą linię. Po prawej stronie środkowego rzędu koszulek byłaby przerwa.
Dzięki metodzie, którą tutaj opisałem, otrzymujemy starannie zapakowaną walizkę, która najlepiej wykorzystuje dostępną przestrzeń.
Ten artykuł pierwotnie ukazał się w magazyn sieciowy wydanie 289; kup tutaj!
