CSS vysvětlil krabicový model s příklady.

Dnes se chystám vysvětlit model boxu pomocí funkcí CSS pozadí klipu a pozadí původu. Jaké jsou klipy na pozadí a funkce na pozadí? Proč se používají a jaký je rozdíl mezi nimi?

To je otázka, která přechází z počátečních myslí na průměrné vývojáře webu. Některé z nich jsou s tím trochu obeznámeny a jiné přemýšlejí, kde lze tyto 2 funkce použít.

Než pochopíte tyto 2 funkce, musíte porozumět krabicovému modelu CSS. Začněme tedy tímto.

Nejprve vytvořte div a vložte do něj štítek „p“,

Zde je nějaký obsah ...

a pak mu dal nějaké styly.

div {background: # 666; šířka: 300px; výška: 250px; } p {šířka: 200px; pozadí: červená; }

Očividně jsme do prvku div nevložili žádná výplně ani omezení, takže prvek div stále neobsahuje pole ani pole a celé pole je obsahové pole.

Jak je vidět na obrázku níže.

Můžete se otevřít otevřením softwaru Chrome

Nyní dejte div 50px prostor shora, dolů, vlevo, vpravo.

div {background: # 666; šířka: 300px; výška: 250px; výplň: 50px; // vyplňte horní, dolní, levou, pravou}

Nyní dostaneme 50px výplň a uvnitř obsahového pole, jak je vidět na obrázku níže.

Nyní máme konečně 50px krabici

Nyní odeberte šířku z prvku „p“ tak, aby byla převzata celá šířka rámečku obsahu.

p {pozadí: červená; }

Výsledek můžete vidět na obrázku níže.

Prvek 'P' se rozbalí a získá tak celou šířku komponenty

Nyní řekněme, že přidáte tapetu do „div“ a nastavíte tapetu „uvnitř“ tak, aby odpovídala její velikosti do pole, a také jí dáte ohraničení, protože neexistuje hranice ohraničení.

div {background: # 666 url ('https://bit.ly/2gzkSPX') se neopakuje; background-size: obsahuje; rámeček: 10px plná černá; šířka: 300px; výška: 250px; výplň: 50px; }

Bude to vypadat jako na obrázku níže.

Můžete to také zkontrolovat tak, že se obrátíte na výrobce softwaru a kliknete na model boxu, jak je znázorněno na obrázku

Ve výchozím nastavení je začátek div vložen do výplňového pole, obrázek začíná na hranici a zobrazí se v obsahovém poli, protože je obsahové pole v poli výplně.

pozadí: polstrování; / * výchozí hodnota * /

Například chceme začít s vyplňovacím rámečkem obrázku, ale chceme jen odhalit část obrazu v obsahovém poli a pak nastavit tapetu div do obsahového pole.

div {background: # 666 url ('https://bit.ly/2gzkSPX') se neopakuje; background-size: obsahuje; background-clip: content-box; rámeček: 10px plná černá; šířka: 300px; výška: 250px; výplň: 50px; }

Výsledky můžete vidět na obrázku níže, protože je viditelná pouze jedna část obrázku v obsahovém poli, ale obrázek začíná vyplněním, protože výchozí je „box-orgin“.

Zjevně je viditelná pouze část obrázku v obsahovém poli a zbytek je skrytý

Nyní pojďme otevřít část, kde se obrázek na pozadí dostane do padd-boxu, proto musíme vrátit tapetu div do padd-boxu, což byla před změnou výchozí hodnota.

div {background: # 666 url ('https://bit.ly/2gzkSPX') se neopakuje; background-size: obsahuje; klip na pozadí: padding-box; rámeček: 10px plná černá; šířka: 300px; výška: 250px; výplň: 50px; }

Jak můžete vidět z výsledků níže, nyní vidíme také část obrázku, která se dostane do maskovací schránky, protože jsme nastavili klip na pozadí do padd boxu.

Nyní můžeme také vidět část obrázku v rámečku obrázku

Nyní se ujistěte, že naše tapeta div začíná rámečkem ohraničení, a proto musíme pozadí „div“ dát původ ohraničení. Nejprve zvětšme velikost hranice, abychom viděli rozdíl.

div {background: # 666 url ('https://bit.ly/2gzkSPX') se neopakuje; background-size: obsahuje; pozadí původu: ohraničení; klip na pozadí: padding-box; rámeček: 20px plná černá; / * Šířka nyní 20px * / Šířka: 300px; výška: 250px; výplň: 50px; }

Jak vidíte na obrázku níže, protože obrazy na pozadí začínají nyní v okrajové oblasti, malá část obrazu je pokryta černým okrajem, jinými slovy část obrazu je za černým okrajem.

Nyní obrázek začíná zaškrtávacím políčkem

Teď, abych dokázal můj názor, že obraz začíná rámečkem orámování, a proto malá část obrázku je za černým rámečkem, udělejme okraj trochu rozmazaný, takže může vyblednout a uvidíme, která část obrázku. za hranicí.

div {background: # 666 url ('https://bit.ly/2gzkSPX') se neopakuje; background-size: obsahuje; pozadí původu: ohraničení; klip na pozadí: padding-box; hranice: 20px pevná rgba (0,0,0,0,5); / * šířka pomocí rgba () * /: 300px; výška: 250px; výplň: 50px; }
Zde můžete vidět obrázek za slabým okrajem

Nyní můžete vidět část obrázku za rámečkem, což dokazuje můj názor, že obraz začíná u rámečku, protože jsme pozadí pozadí nastavili do rámečku.

Nyní, když jste se naučili rozdíl mezi pozadím na pozadí a klipem na pozadí, a také víte o krabicovém modelu CSS, je čas se tam dostat a vytvořit s ním něco skvělého. # Dobré jídlo

Pokud jste vynechali můj předchozí článek o přístupu na internet, zde je odkaz, takže si jej přečtěte. KLIKNĚTE ZDE