CSS ha spiegato il modello a scatola con esempi.

Oggi spiegherò il modello box usando le funzionalità CSS di background clip e background-origin. Quali sono le clip di sfondo e le funzionalità di sfondo? Perché vengono utilizzati e la differenza tra ciascuno di essi?

Bene, questa è una domanda che si sposta dalle menti start-up agli sviluppatori web medi. Alcuni di loro hanno una certa familiarità con questo, e altri si chiedono dove possano essere utilizzate queste 2 funzionalità.

Bene, prima di comprendere queste 2 proprietà, è necessario comprendere il modello di casella CSS. Quindi, cominciamo con questo.

Per prima cosa crea un div e posiziona l'etichetta "p" al suo interno,

Ecco alcuni contenuti ...

e poi dagli alcuni stili.

div {background: # 666; larghezza: 300px; altezza: 250 px; } p {larghezza: 200px; sfondo: rosso; }

Apparentemente, non abbiamo inserito riempitivi o limiti sull'elemento div, quindi l'elemento div non contiene ancora caselle o campi e l'intera casella è una casella di contenuto.

Come mostrato nella figura sotto.

Puoi aprirti aprendo il software Chrome

Ora dai al div uno spazio di 50 px dall'alto, dal basso, a sinistra, a destra.

div {background: # 666; larghezza: 300px; altezza: 250 px; riempimento: 50px; // riempi in alto, in basso, a sinistra, a destra}

Ora otteniamo uno spazio di riempimento di 50 px e all'interno della casella del contenuto, come mostrato nell'immagine seguente.

Ora finalmente abbiamo una scatola da 50px

Ora rimuovi la larghezza dall'elemento "p" in modo che venga presa l'intera larghezza della casella dei contenuti.

p {sfondo: rosso; }

Puoi vedere il risultato nell'immagine qui sotto.

L'elemento 'P' si espande per ottenere l'intera larghezza del componente

Ora, supponiamo di aggiungere uno sfondo a "div" e di impostare lo sfondo "dentro" per adattarlo alle dimensioni nella casella, e anche di dargli un bordo perché non c'è bordo.

div {background: # 666 url ('https://bit.ly/2gzkSPX') non viene ripetuto; dimensione dello sfondo: contiene; bordo: 10px nero solido; larghezza: 300px; altezza: 250 px; riempimento: 50px; }

Apparirà quindi come sotto l'immagine.

Puoi anche verificarlo andando al produttore del software e facendo clic sul modello della scatola come mostrato in figura

Per impostazione predefinita, l'origine del div è incorporata nella casella di riempimento, l'immagine inizia al limite e appare nella casella del contenuto quando la casella del contenuto si trova nel campo di riempimento.

sfondo: padding-box; / * valore predefinito * /

Ad esempio, vogliamo iniziare con la casella di riempimento dell'immagine, ma vogliamo solo rivelare la parte dell'immagine nella casella del contenuto, quindi impostare lo sfondo div nella casella del contenuto.

div {background: # 666 url ('https://bit.ly/2gzkSPX') non viene ripetuto; dimensione dello sfondo: contiene; background-clip: content-box; bordo: 10px nero solido; larghezza: 300px; altezza: 250 px; riempimento: 50px; }

Puoi vedere i risultati nell'immagine qui sotto, poiché è visibile solo una parte dell'immagine nella casella del contenuto, ma l'immagine inizia con la casella di riempimento perché "box-orgin" è l'impostazione predefinita.

Apparentemente, solo la parte dell'immagine nella casella del contenuto è visibile e il resto è nascosto

Ora apriamo la parte in cui l'immagine di sfondo entra nel padd-box, per questo dobbiamo restituire lo sfondo div al padd-box, che era il valore predefinito prima di cambiarlo.

div {background: # 666 url ('https://bit.ly/2gzkSPX') non viene ripetuto; dimensione dello sfondo: contiene; clip di sfondo: padding-box; bordo: 10px nero solido; larghezza: 300px; altezza: 250 px; riempimento: 50px; }

Come puoi vedere dai risultati qui sotto, ora vediamo anche la parte dell'immagine che si trova nel mantello, perché abbiamo impostato la clip di sfondo sul padd box.

Ora possiamo anche vedere la parte dell'immagine nella finestra dell'immagine

Ora, assicuriamoci che il nostro sfondo div inizi con il riquadro, e per questo, dobbiamo dare allo sfondo "div" l'origine del riquadro. Innanzitutto, aumentiamo le dimensioni del bordo per vedere la differenza.

div {background: # 666 url ('https://bit.ly/2gzkSPX') non viene ripetuto; dimensione dello sfondo: contiene; origine sfondo: riquadro; clip di sfondo: padding-box; bordo: 20px nero solido; / * Larghezza ora 20 px * / Larghezza: 300 px; altezza: 250 px; riempimento: 50px; }

Come puoi vedere nell'immagine qui sotto, poiché le immagini di sfondo iniziano ora nell'area del bordo, una piccola porzione dell'immagine è coperta da un bordo nero, in altre parole una parte dell'immagine è dietro il bordo nero.

Ora l'immagine inizia con la casella di controllo

Ora, per dimostrare il mio punto che l'immagine inizia con un riquadro e quindi una piccola porzione dell'immagine è dietro il bordo nero, rendiamo il bordo un po 'sfocato in modo che possa sbiadire e possiamo vedere quale parte dell'immagine. oltre il confine.

div {background: # 666 url ('https://bit.ly/2gzkSPX') non viene ripetuto; dimensione dello sfondo: contiene; origine sfondo: riquadro; clip di sfondo: padding-box; bordo: 20px solido rgba (0,0,0,0,5); / * larghezza usando rgba () * /: 300px; altezza: 250 px; riempimento: 50px; }
Qui puoi vedere l'immagine dietro il bordo debole

Ora puoi vedere la parte dell'immagine dietro il bordo, e questo dimostra che l'immagine inizia dal bordo, perché impostiamo lo sfondo dello sfondo alla finestra del bordo.

Ora che hai imparato la differenza tra lo sfondo e la clip di sfondo e conosci anche il modello box CSS, è ora di arrivarci e creare qualcosa di eccezionale con esso. #Goodluck

Se ti sei perso il mio precedente articolo sull'accesso a Internet, ecco il link, quindi non dimenticare di leggerlo. CLICCA QUI