CSS explicó el modelo de caja con ejemplos.

Hoy voy a explicar el modelo de caja usando las características CSS clip de fondo y origen de fondo. ¿Cuáles son el clip de fondo y las características de fondo? ¿Por qué se usan y la diferencia entre cada uno de ellos?

Bueno, esta es una pregunta que pasa de las mentes iniciales a los desarrolladores web promedio. Algunos de ellos están algo familiarizados con esto, y otros se preguntan dónde se pueden usar estas 2 características.

Bueno, antes de comprender estas 2 características, debe comprender el modelo de caja CSS. Entonces, comencemos con esto.

Primero crea un div y coloca la etiqueta "p" dentro de él,

Aquí hay algo de contenido ...

y luego darle algunos estilos.

div {background: # 666; ancho: 300 px; altura: 250 px; } p {ancho: 200px; fondo: rojo; }

Aparentemente no pusimos ningún relleno o límite en el elemento div, por lo que el elemento div aún no tiene un cuadro o campos para llenar, y todo el cuadro es un cuadro de contenido.

Como se muestra en la imagen a continuación.

Puede abrirse abriendo el software Chrome

Ahora dele al div un espacio de 50 px desde arriba, abajo, izquierda, derecha

div {background: # 666; ancho: 300 px; altura: 250 px; relleno: 50px; // rellena arriba, abajo, izquierda, derecha}

Ahora obtenemos un campo de relleno de 50 píxeles y dentro del cuadro de contenido como se muestra en la imagen a continuación.

Ahora finalmente tenemos una caja de 50 px

Ahora quite el ancho del elemento "p" para que se tome el ancho completo del cuadro de contenido.

p {fondo: rojo; }

Puedes ver el resultado en la imagen a continuación.

El elemento 'P' se expande para obtener el ancho completo del componente

Ahora, supongamos que agrega un fondo de pantalla a "div" y establece el fondo de pantalla "dentro" para que se ajuste a su tamaño en el cuadro, y también le da un borde porque no hay borde de límite.

div {background: # 666 url ('https://bit.ly/2gzkSPX') no se repite; tamaño de fondo: contiene; borde: 10px negro sólido; ancho: 300 px; altura: 250 px; relleno: 50px; }

Luego se verá como la imagen de abajo.

También puede verificar esto yendo al fabricante del software y haciendo clic en el modelo de cuadro como se muestra en la imagen

De forma predeterminada, el origen del div está incrustado en el cuadro de relleno, la imagen comienza en el límite y aparece en el cuadro de contenido como el cuadro de contenido está en el campo de relleno.

fondo: cuadro de relleno; / * valor predeterminado * /

Por ejemplo, queremos comenzar con el cuadro de relleno de imagen, pero solo queremos revelar la parte de la imagen en el cuadro de contenido, luego establecer el fondo de pantalla div en el cuadro de contenido.

div {background: # 666 url ('https://bit.ly/2gzkSPX') no se repite; tamaño de fondo: contiene; clip de fondo: caja de contenido; borde: 10px negro sólido; ancho: 300 px; altura: 250 px; relleno: 50px; }

Puede ver los resultados en la imagen a continuación, ya que solo una parte de la imagen en el cuadro de contenido es visible, pero la imagen comienza con el cuadro de relleno, ya que "box-orgin" es el valor predeterminado.

Aparentemente, solo la parte de la imagen en el cuadro de contenido es visible y el resto está oculto

Ahora abramos la parte donde la imagen de fondo entra en el padd-box, para eso necesitamos devolver el fondo de pantalla div al padd-box, que era el valor predeterminado antes de cambiarlo.

div {background: # 666 url ('https://bit.ly/2gzkSPX') no se repite; tamaño de fondo: contiene; clip de fondo: cuadro de relleno; borde: 10px negro sólido; ancho: 300 px; altura: 250 px; relleno: 50px; }

Como puede ver en los resultados a continuación, ahora también vemos la parte de la imagen que se coloca en el cuadro de capa, ya que hemos colocado el clip de fondo en el cuadro de padd.

Ahora también podemos ver la parte de la imagen en el cuadro de imagen

Ahora, asegurémonos de que nuestro fondo de pantalla div comience con el cuadro de borde, y para eso, necesitamos darle al fondo "div" el origen del cuadro de borde. Primero, aumentemos el tamaño del borde para ver la diferencia.

div {background: # 666 url ('https://bit.ly/2gzkSPX') no se repite; tamaño de fondo: contiene; origen de fondo: cuadro de borde; clip de fondo: cuadro de relleno; borde: 20px negro sólido; / * Ancho ahora 20px * / Ancho: 300px; altura: 250 px; relleno: 50px; }

Como puede ver en la imagen a continuación, dado que las imágenes de fondo ahora comienzan en el área del borde, una pequeña porción de la imagen está cubierta con un borde negro, en otras palabras, una parte de la imagen está detrás del borde negro.

Ahora la imagen comienza con la casilla de verificación

Ahora, para demostrar mi punto de vista de que la imagen comienza con un cuadro de borde y, por lo tanto, una pequeña porción de la imagen está detrás del borde negro, hagamos que el borde se vuelva un poco borroso para que pueda desvanecerse y podamos ver qué parte de la imagen. más allá de la frontera

div {background: # 666 url ('https://bit.ly/2gzkSPX') no se repite; tamaño de fondo: contiene; origen de fondo: cuadro de borde; clip de fondo: cuadro de relleno; borde: 20px rgba sólido (0,0,0,0,5); / * ancho usando rgba () * /: 300px; altura: 250 px; relleno: 50px; }
Aquí puedes ver la imagen detrás del borde débil

Ahora, ahora puede ver la parte de la imagen detrás del borde, y esto prueba mi punto de que la imagen comienza con el borde, porque establecemos el fondo de fondo en la ventana del borde.

Ahora que ha aprendido la diferencia entre el fondo y las imágenes prediseñadas y también sabe sobre el modelo de caja CSS, es hora de llegar allí y crear algo genial con él. #Goodluck

Si te perdiste mi artículo anterior sobre acceso a Internet, aquí está el enlace, así que no olvides leerlo. HAGA CLIC AQUÍ