CSS Boxmodell huet mat Beispiller erkläert.

Haut wäert ech d'Boxmodell mat der Hëllef vun CSS Background-Clip an Hannergrond-Hierkonft Eegeschafte erklären. Wat sinn Hannergrondklipp an Eegeschaften am Hannergrond? Fir wat si benotzt ginn an den Ënnerscheed tëscht all eenzel?

Gutt, dat ass eng Fro déi duerch de Geescht vum Ufänger bis Mëttelstuf vun de Webentwéckler leeft. E puer vun hinne sinn e bësse vertraut an anerer froe sech nach ëmmer wou se dës 2 Eegeschafte benotze kënnen.

Gutt, ier Dir dës 2 Properties ka verstoen, musst Dir den CSS Box-Modell verstoen. Also, fänke mer domat un.

Éischt erstellt en "div" a setzt e "p" Tag esou bäi,

e puer Inhalt hei…

an da gitt et e puer Stiler.

Wéi Dir kënnt gesinn datt mir kee Padding oder Grenz un "div" Element ginn hunn sou datt "div" Element nach kee Paddingbox oder Grenzbox huet an eng ganz Box gëtt als Inhaltkëscht.

Wéi an dësem Bild hei ënnen gewisen.

Dir kënnt Iech selwer iwwerpréiwen andeems Chrome Chrom Entwéckler Tool opmaacht

Elo, gitt "div" e bësse Padding vu 50px vun uewen, ënnen, lénks, riets.

div {
 Hannergrond: # 666;
 Breet: 300px;
 Héicht: 250px;
 padding: 50px; // Padding vun uewen, ënnen, lénks, riets
}

Elo hu mir Paddingbox vun 50px & Inhaltsbox ass bannen Paddingbox wéi an dësem Bild hei ënnen gewisen.

Elo hu mir endlech e Paddingbox vun 50px

Loosst eis d'Breet vum "p" Element erofhuelen, sou datt et expandéiert fir déi voll Breet vun der Inhaltsbox ze huelen.

p {
 Hannergrond: rout;
}

Dir kënnt d'Resultat am Bild hei drënner gesinn.

'P' Element erweidert fir déi voll Breet vun Inhalterbox ze huelen

Elo, loosst eis soen datt Dir en Hintergrundbild "div" setzt an seng Hannergréisst op "enthält" setzt fir datt se d'Gréisst an der Këscht upasst an Dir gitt et och e puer Grenz well ouni Grenz keng Grenzkëscht ass.

div {
 Hannergrond: # 666 url ('https://bit.ly/2gzkSPX') nee-widderhuelen;
 Hannergrondgréisst: enthalen;
 Grenz: 10px zolidd schwaarz;
 Breet: 300px;
 Héicht: 250px;
 padding: 50px;
}

Da geséit et sou aus wéi am Bild hei ënnen.

Dir kënnt et och iwwerpréift andeems Dir an de Chrom Entwécklerinstrument geet an iwwer Boxmodell schweist wéi am Bild gewisen

Par défaut ass den Hannergrond-Hierkonft vum div op Paddingbox agestallt an dat heescht datt d'Bild aus der Grenzbox fänkt, a gëtt och an Inhalterbox sichtbar well Inhaltbox an der Paddingbox ass.

Hannergrond-Hierkonft: Polsterbox; / * Standardwert * /

Loosst eis soen datt mir e Bild vun der Paddingbox wëllen starten, awer mir wëllen nëmmen deen Deel vum Bild dat an den Inhaltsbox uweist dann musse mir den Hannergrond-Clip op Inhalt-Box setzen.

div {
 Hannergrond: # 666 url ('https://bit.ly/2gzkSPX') nee-widderhuelen;
 Hannergrondgréisst: enthalen;
 background-Clip: Inhaltsbox;
 Grenz: 10px zolidd schwaarz;
 Breet: 300px;
 Héicht: 250px;
 padding: 50px;
}

Dir kënnt d'Resultater am Bild hei drënner gesinn datt nëmmen deen Deel vum Bild deen an engem Inhaltsbox ass siichtbar ass awer d'Bild fänkt aus der Paddingbox aus well dat ass de Standardwäert vun "background-orgin".

Wéi Dir kënnt gesinn datt nëmmen deen Deel vum Bild sichtbar ass am Inhaltsbox a Rescht ass verstoppt

Elo, loosse mer och den Deel vum Hannergrondbild dat an der Paddingbox kënnt, fir datt mir den Hannergrond-Clip zréck op padding-Box setzen, wat de Standardwäert war ier mer et geännert hunn.

div {
 Hannergrond: # 666 url ('https://bit.ly/2gzkSPX') nee-widderhuelen;
 Hannergrondgréisst: enthalen;
 Hannergrond-Clip: Polsterbox;
 Grenz: 10px zolidd schwaarz;
 Breet: 300px;
 Héicht: 250px;
 padding: 50px;
}

Dir kënnt d'Resultater hei drënner gesinn datt elo deen Deel vum Bild dat an Paddingbox kënnt ass och sichtbar well mir Hannergrond-Clip zréck op Paddingbox hunn agestallt.

Elo kënne mir och den Deel vum Bild gesinn deen an der Paddingbox ass

Elo, loosst eis sécher datt eis Div Hannergrondbild vun der Grenzkëscht fänkt an dofir musse mir eisen "div" en Hannergrond-Urspronk vun der Grenzkëscht ginn. Awer éischtens, loosst eis d'Gréisst vun der Grenz erhéijen fir den Ënnerscheed ze bemierken.

div {
 Hannergrond: # 666 url ('https://bit.ly/2gzkSPX') nee-widderhuelen;
 Hannergrondgréisst: enthalen;
 Hannergrond-Hierkonft: Grenz-Këscht;
 Hannergrond-Clip: Polsterbox;
 Grenz: 20px zolidd schwaarz; / * Grenzbreet ass elo 20px * /
 Breet: 300px;
 Héicht: 250px;
 padding: 50px;
}

Wéi Dir am Bild hei drënner kënnt gesinn, well Hannergrondbild elo vun der Grenzkëscht ufänkt, dofir ass e klengen Deel vum Bild duerch schwaarz Grenz bedeckt, an anere Wierder en Deel vum Bild ass hannert der schwaarzer Grenz.

Elo fänkt d'Bild aus der Grenzbox un

Elo fir mäi Punkt ze beweisen datt d'Bild vun der Grenzkëscht beginn an dat ass firwat e klengen Deel vum Bild hannert der schwaarzer Grenz ass, loosst eis d'Grenz e puer Opazitéit ginn, sou datt et erausgeet a mir kënnen deen Deel vum Bild gesinn ass hannert der Grenz.

div {
 Hannergrond: # 666 url ('https://bit.ly/2gzkSPX') nee-widderhuelen;
 Hannergrondgréisst: enthalen;
 Hannergrond-Hierkonft: Grenz-Këscht;
 Hannergrond-Clip: Polsterbox;
 Grenz: 20px zolidd rgba (0,0,0,0,5); / * benotzt rgba () * /
 Breet: 300px;
 Héicht: 250px;
 padding: 50px;
}
Hei kënnt Dir d'Bild hannert fading Grenz gesinn

Hei geet et, Dir kënnt elo den Deel vum Bild gesinn, deen hannert der Grenz läit an dat beweist och mäi Punkt, datt elo d'Bild vun der Grenzkëscht fänkt well mir Hannergrënn fir d'Grenzkëscht setzen.

Elo wou Dir den Ënnerscheed tëscht Hannergrond-Origin & Background-Clip wësst an Dir och iwwer CSS Box-Modell wësst, Et ass Zäit fir Iech e puer beandrockend Saachen ze bauen. #Goodluck

Wann Dir mäi virdrun Artikel iwwer Web Accessibilitéit verpasst hutt, hei ass de Link hei, vergiesst et net ze liesen. KLICKT HEI