CSS legde het doosmodel uit met voorbeelden.

Vandaag ga ik het doosmodel uitleggen met behulp van CSS-achtergrondclip en achtergrondoorsprong-functies. Wat zijn de achtergrondclip en achtergrondfuncties? Waarom worden ze gebruikt en het verschil tussen elk?

Welnu, dit is een vraag die verschuift van startende geesten naar gemiddelde webontwikkelaars. Sommigen van hen zijn hier enigszins bekend mee en anderen vragen zich af waar deze 2 functies kunnen worden gebruikt.

Voordat u deze 2 functies begrijpt, moet u het CSS-boxmodel begrijpen. Laten we hiermee beginnen.

Maak eerst een div aan en plaats het "p" label erin,

Hier is wat inhoud ...

en geef hem dan wat stijlen.

div {achtergrond: # 666; breedte: 300px; hoogte: 250px; } p {breedte: 200px; achtergrond: rood; }

Blijkbaar hebben we geen vulmiddelen of limieten op het div-element geplaatst, dus het div-element heeft nog geen vak of velden om te vullen en het hele vak is een inhoudsvak.

Zoals weergegeven in de onderstaande afbeelding.

Je kunt jezelf openen door de Chrome-software te openen

Geef de div nu een ruimte van 50 px van boven, onder, links, rechts.

div {achtergrond: # 666; breedte: 300px; hoogte: 250px; vulling: 50px; // boven, onder, links, rechts

Nu krijgen we een vulruimte van 50 px en in het inhoudsvak, zoals weergegeven in de onderstaande afbeelding.

Nu hebben we eindelijk een doos van 50px

Verwijder nu de breedte van het "p" -element zodat de volledige breedte van het inhoudsvak wordt ingenomen.

p {achtergrond: rood; }

Het resultaat is te zien in onderstaande afbeelding.

Het 'P'-element zet uit om de volledige breedte van het onderdeel te verkrijgen

Laten we nu zeggen dat u een achtergrond toevoegt aan "div" en de achtergrond "binnen" instelt om de grootte ervan in het vak te passen, en u geeft het ook een rand omdat er geen grens is.

div {background: # 666 url ('https://bit.ly/2gzkSPX') wordt niet herhaald; achtergrondgrootte: bevat; rand: 10px effen zwart; breedte: 300px; hoogte: 250px; vulling: 50px; }

Het ziet er dan uit zoals op de onderstaande afbeelding.

U kunt dit ook controleren door naar de softwarefabrikant te gaan en op het doosmodel te klikken zoals weergegeven in de afbeelding

Standaard is de oorsprong van de div ingebed in het opvulvak, de afbeelding begint bij de grens en verschijnt in het inhoudsvak als het inhoudsvak zich in het vulveld bevindt.

achtergrond: padding-box; / * standaardwaarde * /

We willen bijvoorbeeld beginnen met het vak voor het vullen van afbeeldingen, maar we willen alleen het deel van de afbeelding in het inhoudsvak onthullen en vervolgens de div-achtergrond instellen in het inhoudsvak.

div {background: # 666 url ('https://bit.ly/2gzkSPX') wordt niet herhaald; achtergrondgrootte: bevat; background-clip: content-box; rand: 10px effen zwart; breedte: 300px; hoogte: 250px; vulling: 50px; }

U kunt de resultaten in de onderstaande afbeelding zien, aangezien slechts een deel van de afbeelding in het inhoudsvak zichtbaar is, maar de afbeelding begint met het invulvak, aangezien "box-orgin" de standaard is.

Blijkbaar is alleen het deel van de afbeelding in het inhoudsvak zichtbaar en de rest is verborgen

Laten we nu het deel openen waar de achtergrondafbeelding in de padd-box komt, daarvoor moeten we de div-achtergrond terugzetten naar de padd-box, wat de standaardwaarde was voordat we deze veranderden.

div {background: # 666 url ('https://bit.ly/2gzkSPX') wordt niet herhaald; achtergrondgrootte: bevat; achtergrondclip: padding-box; rand: 10px effen zwart; breedte: 300px; hoogte: 250px; vulling: 50px; }

Zoals je kunt zien aan de hand van de onderstaande resultaten, zien we nu ook het deel van de afbeelding dat in de mantelbox terechtkomt, omdat we de achtergrondclip in de paddbox hebben geplaatst.

Nu kunnen we ook het deel van de foto in het illustratiekader zien

Laten we er nu voor zorgen dat onze div-achtergrond begint met het randvak, en daarvoor moeten we de achtergrond van de "div" de oorsprong van het randvak geven. Laten we eerst de grootte van de rand vergroten om het verschil te zien.

div {background: # 666 url ('https://bit.ly/2gzkSPX') wordt niet herhaald; achtergrondgrootte: bevat; achtergrondoorsprong: grensvak; achtergrondclip: padding-box; rand: 20px effen zwart; / * Breedte nu 20px * / Breedte: 300px; hoogte: 250px; vulling: 50px; }

Zoals u kunt zien in de onderstaande afbeelding, aangezien de achtergrondafbeeldingen nu beginnen bij het grensgebied, is een klein deel van de afbeelding bedekt met een zwarte rand, met andere woorden een deel van de afbeelding bevindt zich achter de zwarte rand.

Nu begint de afbeelding met het selectievakje

Om nu te bewijzen dat de afbeelding begint met een randvak en daarom een ​​klein deel van de afbeelding zich achter de zwarte rand bevindt, laten we de rand een beetje wazig maken zodat deze kan vervagen en we kunnen zien welk deel van de afbeelding. over de grens.

div {background: # 666 url ('https://bit.ly/2gzkSPX') wordt niet herhaald; achtergrondgrootte: bevat; achtergrondoorsprong: grensvak; achtergrondclip: padding-box; border: 20px solid rgba (0,0,0,0,5); / * width met rgba () * /: 300px; hoogte: 250px; vulling: 50px; }
Hier ziet u de afbeelding achter de vage rand

Nu kun je nu het deel van de afbeelding achter de rand zien, en dit bewijst mijn punt dat de afbeelding begint met de rand, omdat we de achtergrondachtergrond hebben ingesteld op het randvenster.

Nu je het verschil hebt geleerd tussen achtergrond en illustraties en ook kennis hebt van het CSS-boxmodel, is het tijd om daar te komen en er iets geweldigs mee te maken. #Goodluck

Als je mijn vorige artikel over internettoegang hebt gemist, is hier de link, dus vergeet deze niet te lezen. KLIK HIER