display

Każdy element na stronie internetowej jest prostokątnym pudełkiem. Właściwość display w CSS określa właśnie jak zachowuje się to prostokątne pudełko. Istnieje tylko kilka wartości, które są powszechnie używane:

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 <div> and <section> 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ść „User Agent Stylesheets” (domyślne style, które przeglądarka stosuje do wszystkich stron) ustawia wiele elementów na „block”. Prześledźmy każdy z nich, a następnie omówmy niektóre z innych, mniej powszechnych wartości.

Inline

Domyślna wartość dla elementów. Pomyśl o elementach takich jak <span><em>, lub <b> i o tym jak zawijanie tekstu w tych elementach wewnątrz ciągu tekstu nie łamie przepływu tekstu.

Element <em> ma czerwone obramowanie o szerokości 1px. Zauważ, że jest on umieszczony w linii z resztą tekstu.

Element inline akceptuje marginesy i wypełnienia, ale element nadal jest umieszczony w linii, jak można się spodziewać. Margin i padding będą tylko odpychać inne elementy poziomo, a nie pionowo.

Element inline nie zaakceptuje height i width. Po prostu je zignoruje.

Inline Block

Element ustawiony na inline-block jest bardzo podobny do inline w tym, że będzie ustawiony zgodnie z naturalnym przepływem tekstu (na „linii bazowej”). Różnica polega na tym, że jesteś w stanie ustawić width i height, które będą respektowane.

Blok

Niektóre elementy są ustawiane na block przez arkusz stylów UA przeglądarki. Są to zazwyczaj elementy kontenerowe, takie jak <div><section> i <ul>. Również „bloki” tekstowe, takie jak <p> i <h1>. Elementy poziomu bloków nie siedzą w linii, ale przełamują się obok nich. Domyślnie (bez ustawiania szerokości) zajmują tyle miejsca w poziomie, ile tylko mogą.

Wstęp

Po pierwsze, ta właściwość nie działa w Firefoksie. Mówi się, że specyfikacja dla niej nie jest wystarczająco dobrze zdefiniowana. Aby zacząć to rozumieć, to tak, jakbyś chciał, aby element nagłówka znajdował się w linii z tekstem pod nim. Pływanie go nie będzie działać, ani nic innego, ponieważ nie chcesz, aby nagłówek był dzieckiem elementu tekstowego poniżej niego, chcesz, aby był to jego własny niezależny element. W „wspierających” przeglądarkach wygląda to tak:

Flexbox

Właściwość display jest również używana dla nowych metod układu, takich jak Flexbox.

.header { display: flex;}

Istnieją pewne starsze wersje składni flexbox, więc proszę zapoznać się z tym artykułem, aby poznać składnię flexbox z najlepszym wsparciem przeglądarki. Koniecznie zobacz ten kompletny przewodnik po Flexbox.

Rodzaj przepływu

Wartość wyświetlania flow-root tworzy nowy „kontekst formatowania bloku”, ale poza tym jest jak block. Nowy BFC pomaga w takich rzeczach, jak czyszczenie pływaków, usuwając potrzebę hacków, aby to zrobić.

.group { display: flow-root;}

body { display: grid;}

div { display: table; display: table-cell; display: table-column; display: table-colgroup; display: table-header-group; display: table-row-group; display: table-footer-group; display: table-row; display: table-caption;}

<div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> Gross but sometimes useful. </div> </div></div>