Każdy element na stronie internetowej to prostokątne pudełko. Właściwość display w CSS określa, jak zachowuje się prostokątne pudełko. Istnieje tylko kilka powszechnie używanych wartości:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Domyślną wartością dla wszystkich elementów jest inline. Większość „Arkuszy stylów agentów użytkownika” (domyślne style, które przeglądarka stosuje do wszystkich witryn) resetuje wiele elementów do „blokowania”. Przyjrzyjmy się każdemu z nich, a następnie omówmy inne, mniej powszechne wartości.
Inline
Wartość domyślna dla elementów. Pomyśl o elementy takie jak , czy iw jaki sposób zawijania tekstu w tych elementów w ciągu tekstu nie przerywa przepływ tekstu.
Element ma czerwone obramowanie 1px. Zauważ, że jest on umieszczony bezpośrednio w wierszu z resztą tekstu.
Element wbudowany akceptuje marginesy i dopełnienie, ale element nadal znajduje się w wierszu, jak można się spodziewać. Margines i wypełnienie będą wypychać inne elementy tylko w poziomie, a nie w pionie.
Element inline nie akceptuje heighti width. Po prostu to zignoruje.
Blok wbudowany
Element ustawiony na inline-blockjest bardzo podobny do elementu inline, ponieważ zostanie umieszczony w tekście z naturalnym przepływem tekstu (na „linii bazowej”). Różnica polega na tym, że możesz ustawić widthi, heightktóre będą przestrzegane.
Blok
Wiele elementów jest ustawianych blockw arkuszu stylów UA przeglądarki. Są zazwyczaj elementami kontenerów, jak , i
. Również „bloki” tekstu, takie jak
i
. Elementy z poziomu bloków nie są osadzone w linii, ale przebijają się obok nich. Domyślnie (bez ustawiania szerokości) zajmują tyle miejsca w poziomie, ile mogą.
Dwa elementy z czerwonymi obwódkami to
które są elementami blokowymi. Elementem pomiędzy nimi nie siedzieć inline ponieważ bloki rozbić poniżej elementów inline.
Docieranie
Po pierwsze, ta właściwość nie działa w przeglądarce Firefox. Mówi się, że specyfikacja nie jest wystarczająco dobrze zdefiniowana. Aby jednak zacząć to rozumieć, to tak, jakbyś chciał, aby element nagłówka znajdował się w tekście poniżej. Pływające go nie zadziała i nic innego też nie zadziała, ponieważ nie chcesz, aby nagłówek był elementem podrzędnym elementu tekstowego znajdującego się pod nim, chcesz, aby był niezależnym elementem. W przeglądarkach „obsługujących” wygląda to tak:
Nie licz na to jednak.
Flexbox
Ta displaywłaściwość jest również używana dla nowych metod układu wachlarzowego, takich jak Flexbox.
.header ( display: flex; )
Istnieje kilka starszych wersji składni flexbox, więc zapoznaj się z tym artykułem, aby dowiedzieć się, jak używać flexbox z najlepszą obsługą przeglądarek. Koniecznie przeczytaj ten kompletny przewodnik po Flexbox.
Flow-Root
Wartość flow-rootwyświetlana tworzy nowy „kontekst formatowania bloku”, ale poza tym jest podobna block. Nowy BFC pomaga w takich rzeczach, jak czyszczenie pływaków, eliminując potrzebę hackowania, aby to zrobić.
.group ( display: flow-root; )
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
Chrom
Firefox
TO ZNACZY
Brzeg
Safari
58
53
Nie
79
13
Telefon komórkowy / tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Krata
Układ siatki zostanie również początkowo ustawiony przez właściwość wyświetlania.
body ( display: grid; )
Oto nasz przewodnik po układzie siatki, który zawiera tabelę obsługi przeglądarek.
Żaden
Całkowicie usuwa element ze strony. Zwróć uwagę, że gdy element jest nadal w DOM, jest usuwany wizualnie i w każdy możliwy sposób (nie możesz użyć tabulatora do niego lub jego elementów potomnych, jest ignorowany przez czytniki ekranu itp.).
Wartości tabeli
Istnieje cały zestaw wyświetlanych wartości, które zmuszają elementy niebędące tabelami, aby zachowywały się jak elementy tabeli, jeśli zajdzie taka potrzeba. Jest to rzadkie, ale czasami pozwala na „bardziej semantyczne” podejście do kodu, wykorzystując jednocześnie wyjątkowe możliwości pozycjonowania tabel.
