Pochopení vlastnosti zobrazení CSS

Feb 4, 2026

jak

Je to půlnoc, a to divák Na vašich stránkách stále vypadá jako dětská hračka hrudníku. Všechny prvky jsou neuspořádaný nepořádek a pokaždé, když hrajete CSS. "S. Zobrazit majetek, uspořádají se do úplně jiného kousku nesmyslu.

Pokud jste jako já, budete pravděpodobně to vyřešit tím, že mumlání pod dechem a stávat se trvale agresivnější s klávesnicí. A i když tato strategie pro mě pracovala dříve, nedávno jsem se vydal na lepší způsob, jak porozumět Zobrazit vlastnictví.

Ukazuje se základy Zobrazit jsou mnohem jednodušší, než jsem si původně pomyslel. Ve skutečnosti používají stejné principy jako balení kufru. Jdu na to Displej: Block. , inline-blok a v souladu . Pokud jste uspořádali kufr řádným způsobem předtím, uvidíte paralelu. Pokud jste druh člověka, který bere všechny vaše oblečení v hapraze způsobem - no, je tu jen tolik, co můžu udělat pro vás.

Náš kufr bude obsahovat tři typy oblečení:

Delikáty, jako košile
Trička, která mohou být válcována
Ponožky nebo spodní prádlo, které mohou být plno do mezer

Pro odkaz, pokud jsme modelovali kufr v HTML, vypadalo by to takto:

 & lt; divá třída = 'kufr' & gt;

Jemné položky nahoře

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer — Lepovací košile sedí na hromadě oblečení pod ním. Je to jediná položka, která zaujímá vlastní vrstvu

Displej: Block. je výchozí pro většinu prvků HTML. To znamená, že prvek zabírá celý horizontální prostor v rámci svého kontejneru divák . Pokud je vedle jiných sourozeneckých prvků, spustí nový řádek a neumožňuje další prvky na jeho lince. Je to podobné jemným předmětům, které jste vložili na vrchol kufru. Jedná se o jemné nebo inteligentní výrobky, jako je košile. Nechcete, aby se vrásčit, takže se ujistíte, že nejsou tlačeni proti jiným oblečením.

To přináší jeden z nejtěžších částí Displej: Block. . Všimněte si, jak košile se objeví celou šířku kufru? To neznamená, že jiné položky budou skočit na svou úroveň. Řekněme, že tato košile je 60% šířky kufru; Stále by blokovalo další prvky, aby se připojili na nejvyšší úrovni.

To je důvod, proč je na obrázku oranžová hranice. A Displej: Block. Prvek automaticky přidá okraj kolem ní, pokud nezabírá celý horizontální prostor.

Úhledně zabalené trička

Here we can see the top and bottom rows of T-shirts, with four shirts in each — Zde můžeme vidět horní a dolní řádky triček, se čtyřmi košile v každém

Většina vašeho kufru je pravděpodobně plná zbytku vašeho oblečení pro vaši cestu. V zájmu jednoduchosti, budeme to snížit až na trička. Na internetu je velká debata, pokud jde o to, zda je efektivnější skládání nebo válcování. Jsem skládací člověk.

Každopádně, aby se vešly do většiny položek, řádáte trička vedle sebe. To je přesně to, co Displej: Inline-blok znamená. Tyto prvky mohou sedět vedle sebe na stejném řádku, stejně jako vedle Displej: Inline. elementy.

Na rozdíl od Displej: Inline. prvky, an inline-blok prvek se přesune na další řádek, pokud se nezapadne do jeho obsahujícího divák vedle druhého inline-blok elementy. Abyste měli tričko rozlití na další řadu, budete muset snížit na polovinu a použít zbývající polovinu pro spuštění nového řádku. Inline-blok Prvky se nesmějí rozdělit na polovinu, pokud se nehodí na řádek.

Ponožky, které vyplňují mezery

The socks are inline elements, which means they will fill the gaps around the T-shirts — Ponožky jsou inline prvky, což znamená, že zaplní mezery kolem trička

Zkontrolujte zpět na původní HTML a poznamenejte, že existují ponožky & lt, div a gt; mezi osmi tričkami. Ale podívejte se na horizontální pohled na kufr vpravo. Pokud existují ponožky & lt, div a gt; , Jak to může ukončit střední řadu a začít dolní řadu? To je účelem Displej: Inline. Dokázal se!

AN. v souladu Prvek bude rozlití na další řádek, pokud překročí šířku divák (tímto způsobem se liší od inline-blok nebo blok ). Od našich ponožek divák Je plný ponožek, které jsou náhodně plněné do mezer, může snadno začít plnit mezeru na pravé straně prostředního řádku a rozlití se spustí spodní řádek.

Na polovinu se bude muset snížit žádné ponožky. To je důvod, proč se mohou stát v souladu , zatímco trička mohou být pouze inline-blok . Pokud trička na střední řadě vzaly pouze 60% šířky, ponožky & lt, div a gt; by se pohyboval nahoru, aby zaplnil celý prostor na zbytek řádku.

Šťastnou cestu

Toto je finální CSS pro náš kufr:

 .delicate {
    Displej: blok;
    šířka: 60%;
}

.tričko{
    Displej: inline-blok;
    šířka: 20%;
}

.ponožky{
    Displej: Inline;
}

Zde je pár alternativní scénáře pro ilustraci různých použití zobrazení. Pokud měly lahůdky nahoře Displej: Inline-blok , zapadají do pravého podél triček. Některé trička by se pohybovaly až do horní linie a zbytek se odpovídajícím způsobem upravil. Vlevo a vpravo od košile se neexistuje žádná komfortní vyrovnávací paměť.

Pokud měl každý tričko displej-blok , Měli byste masivní stoh triček na sebe, jeden na řádek. Pokud měly ponožky Displej: Inline-blok , všichni by seděli na spodním řádku, spíše než tekoucí mezi oběma řadami. Některá trička by byla tlačena na jinou řadu, tvořící čtvrtou linii. Vpravo od střední řady trička by byla mezera.

S metodou, kterou jsem zde uvedl, skončíme s úhledně zabaleným kufrem, který využívá dostupného prostoru.

Tento článek se původně objevil Čistý časopis Vydání 289; koupit to tady Dokázal se!

Související články:

5 nejlepších zdrojů pro učení HTML a CSS
Sestavte komplexní rozložení s PSČ-FlexBox
28 Nesplacené příklady CSS

Pochopení vlastnosti zobrazení CSS

Jemné položky nahoře

Úhledně zabalené trička

Ponožky, které vyplňují mezery

Šťastnou cestu

jak - Nejoblíbenější články

Jak postavit blog s Jekyllem

Průvodce pro službu Google Cloud Vision

Jak malovat Elven Maiden

osvětlete 3D práci s Dome Světla

Generování nekonečných barevných paletů s Khroma

Přidejte efekt glitch na vaše webové stránky

5 tipů pro sochařství v double-rychlé době

Jak vytvořit manga s divokým West Twist

Kategorie