Varje element på en webbsida är en rektangulär ruta. Visningsegenskapen i CSS avgör hur den rektangulära rutan beter sig. Det finns bara en handfull värden som ofta används:
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 */ )
Standardvärdet för alla element är inline. De flesta "User Agent-formatmallar" (standardformaten som webbläsaren använder på alla webbplatser) återställer många element till "blockera". Låt oss gå igenom var och en av dem och sedan täcka några av de andra mindre vanliga värdena.
I kö
Standardvärdet för element. Tänk på element som , eller, och hur inslagning av text i dessa element i en textsträng inte bryter textflödet.
I elementet har en 1px röd kant. Lägg märke till att den sitter rätt inline med resten av texten.
Ett inbyggt element accepterar marginal och stoppning, men elementet sitter fortfarande inline som du förväntar dig. Marginal och stoppning skjuter bara bort andra element horisontellt, inte vertikalt.
Ett inbyggt element accepterar inte heightoch width. Det kommer bara att ignorera det.
Inline Block
Ett element som är inställt på inline-blockär mycket likt inline genom att det kommer att sättas in med det naturliga flödet av text (på "baslinjen"). Skillnaden är att du kan ställa in en widthoch heightvilken kommer att respekteras.
Blockera
Ett antal element ställs in blockav webbläsarens UA-formatmall. De är oftast behållarelement, som , och
. Text även "block" som
och
. Blocknivåelement sitter inte inbyggda utan bryter förbi dem. Som standard (utan att ställa in en bredd) tar de så mycket horisontellt utrymme som möjligt.
De två elementen med de röda gränserna är
s som är blocknivåelement. Den del mellan dem inte sitta inline eftersom blocken bryta ner under inline element.
Springa in
För det första fungerar den här egenskapen inte i Firefox. Ordet är att specifikationen för den inte är tillräckligt väl definierad. För att börja förstå det är det som om du vill att ett sidhuvudelement ska ligga inbyggt med texten nedanför. Att sväva med det fungerar inte och inte heller något annat, eftersom du inte vill att rubriken ska vara ett barn av textelementet under det, du vill att det ska vara ett eget oberoende element. I "stödjande" webbläsare är det så här:
Räkna inte med det, dock.
Flexbox
Den displayegenskapen är också användas för nya konstlade layout metoder som Flexbox.
.header ( display: flex; )
Det finns några äldre versioner av flexbox-syntax, så se den här artikeln för syntax när du använder flexbox med bästa webbläsarstöd. Se till att du ser den här kompletta guiden till Flexbox.
Flow-Root
Det flow-rootvisade värdet skapar ett nytt ”block formatering sammanhang”, men är i övrigt som block. En ny BFC hjälper till med saker som att rensa flottörer, vilket tar bort behovet av hack för att göra det.
.group ( display: flow-root; )
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
Krom
Firefox
IE
Kant
Safari
58
53
Nej
79
13
Mobil / surfplatta
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Rutnät
Rutnätslayouten kommer också initialt att ställas in av visningsegenskapen.
body ( display: grid; )
Här är vår guide om rutnätlayout, som innehåller ett webbläsarsupportdiagram.
Ingen
Tar helt bort elementet från sidan. Observera att medan elementet fortfarande finns i DOM tas det bort visuellt och på något annat tänkbart sätt (du kan inte flikka till det eller dess barn, det ignoreras av skärmläsare osv.).
Tabellvärden
Det finns en hel uppsättning visningsvärden som tvingar element som inte är tabeller att bete sig som tabellelement, om du behöver det. Det är sällsynt, men det låter dig ibland vara "mer semantisk" med din kod medan du använder tabellernas unika positioneringskrafter.
