10. Modelo de caja
El modelo de caja CSS es esencialmente una caja que encapsula los elementos HTML circundantes, incluidos: márgenes, bordes, relleno y contenido real. Todos los elementos HTML se pueden considerar como cajas, el modelo de caja nos permite colocar elementos en el espacio entre otros elementos y los bordes de los elementos circundantes. El ancho real de un elemento se compone de ancho y alto del contenido + margen interno de relleno + borde de borde + margen de margen exterior.
La siguiente imagen ilustra el modelo de caja:
1.content : width establece el ancho del contenido, height establece la altura del contenido.
2. borde: establezca un borde, a continuación se describen varias formas de establecer un borde: método
general: borde: 10px con puntos rojos, es decir, tamaño, línea, línea.
| línea | Explicación |
|---|---|
| punteado | Linea punteada |
| estropeado | linea punteada |
| sólido | línea sólida |
Establecer por separado: borde inferior: 10px amarillo sólido;
| Línea fronteriza | Explicación |
|---|---|
| borde superior | Línea de borde superior |
| borde inferior | Borde inferior |
| borde izquierdo | Línea del borde izquierdo |
| borde derecho | Línea de borde derecho |
Ajuste dividido:
| Atributos | Posición de la línea fronteriza | Posición de la línea fronteriza | Posición de la línea fronteriza | Posición de la línea fronteriza | Posición de la línea fronteriza |
|---|---|---|---|---|---|
| Estilo de línea de borde | parte superior | fondo | izquierda | derecho | |
| Estilo de línea de borde | estilo | borde-estilo-superior | estilo de borde inferior | borde-estilo-izquierdo | estilo de borde derecho |
| Estilo de línea de borde | color | borde-color-superior | borde-color-inferior | color de borde izquierdo | color de borde derecho |
| Estilo de línea de borde | anchura | border-top-width | border-bottom-width | border-left-width | borde-ancho-derecho |
3.acolchado : el margen interior
La distancia desde el borde hasta el contenido.
Método de configuración: el
primero:
| Línea fronteriza | Explicación |
|---|---|
| acolchado superior | Margen superior |
| padding-right | Margen derecho |
| bpadding-left | Margen izquierdo |
| fondo acolchado | Margen derecho |
El segundo tipo:
relleno: 50 px; el
relleno circundante es 50 px; el
tercer tipo:
relleno: 50 px 100 px; el
relleno superior e inferior es 50 px, el relleno izquierdo y derecho es 100 px . El
cuarto tipo:
relleno: 10 px 20 px 30 px 40 px; el
margen superior es 10 px El margen derecho es de 20px, el margen inferior es de 30px y el margen izquierdo es de 40px.
4. Margen: el margen exterior
Método de configuración: el
primero:
| Línea fronteriza | Explicación |
|---|---|
| margen superior | Margen superior |
| margen derecho | Margen derecho |
| margen izquierdo | Margen izquierdo |
| margen inferior | Margen derecho |
El segundo tipo:
margen: 100 px; los márgenes superior,
inferior, izquierdo y derecho son 100 px; el
tercer tipo:
margen: 50 px 100 px; los
márgenes superior e inferior son 50 px, los márgenes izquierdo y derecho son 100 px; el
tercer tipo:
margen: 50 px 100 px 150 px; el
margen superior es 50 px, márgenes izquierdo y derecho 100 px, margen inferior 150 px .
Cuarto:
margen: 50 px 100 px 150 px 200 px;
margen superior 50 px, margen derecho 100 px, margen inferior 150 px, margen izquierdo 200 px
Nota:
El margen en la dirección vertical se superpondrá y tomará el valor
máximo.Los elementos en la línea solo tienen el margen izquierdo y derecho, y el
ancho y alto superior e inferior no están habilitados para los elementos en la línea.
11. Antecedentes
| Nombre del Atributo | Explicación |
|---|---|
| color de fondo | color de fondo |
| imagen de fondo | Imagen de fondo |
| repetición de fondo | Repetición de fondo |
| posición de fondo | Posición de fondo |
1.color de fondo
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2.imagen de fondo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;height: 100px;
background-image: url(images/icon-r.png);
}
</style>
</head>
<body>
<div>
你好
</div>
</body>
</html>
Nota:
No hay repetición de imagen aquí. La imagen se repite en el eje xy el eje y del contenedor 100 * 100.
3.background-repeat
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
}
.div2 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: repeat-x;
}
.div3 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
</body>
</html>
Nota:
El primer div aquí se establece en norepeat, es decir, la imagen de fondo solo se repite una vez
en el contenedor 100 100. El segundo div se establece en repeat-x, es decir, el fondo se repite en el eje x. El segundo div se establece en repeat-y, es decir, el fondo se repite en el eje Y. La configuración predeterminada es no repetir los ejes X e Y del contenedor 100.
4.posicion de fondo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
background-position: left;
background-color: #3B639F;
}
.div2 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
background-position: right top;
background-color: #55ffff;
}
.div3 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
background-position: center center;
background-color: #00ff7f;
}
.div4 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
background-color: #ffff7f;
background-position: 10px 70px;
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
<div class="div4">
div4
</div>
</body>
</html>
Nota:
La imagen de fondo del primer div se establece a la izquierda en la dirección horizontal y se centra de forma predeterminada en la dirección vertical.
La imagen de fondo del segundo div se establece a la derecha en la dirección horizontal, y
la imagen de fondo del tercer div se establece en la dirección vertical. La dirección horizontal está centrada y la dirección vertical está centrada
. La imagen de fondo del cuarto div se establece en 10 px desde la izquierda en la dirección horizontal y 70 px desde la parte superior en la dirección vertical.
5. Taquigrafía de
fondo : fondo: url dorada () sin repetición centro centro
color dirección repetida alineación horizontal y alineación vertical
11. Tres elementos y flotador
Primero explique que cualquier elemento en html pertenece a uno de los elementos en línea, elementos de bloque o bloques en línea, y los atributos de los elementos se pueden cambiar mediante la visualización en css. Aquí hay tres elementos:
1. Elementos en línea :
los más comunes son: span a em ib em big small strong sub sup textarea u select label
Atributo predeterminado: display: inline;
regla: solo se puede establecer el margen izquierdo y derecho, no el ancho y alto y la disposición horizontal del margen hacia arriba y hacia abajo
2. Elementos de bloque:
los más comunes son: p h1 ~ h6 div dl dd dt forma hr ol ul li tabla
Atributos predeterminados: display: block;
regla: puede establecer la disposición vertical de ancho, alto y margen
3. Elementos de bloque en línea:
comunes: img
Atributo predeterminado de entrada : display: inline-block;
regla: puede establecer la disposición horizontal de ancho, alto y margen
Hablemos de flotante:
1. Método de configuración: float: left; o float: right;
2. El resultado después de configurar float:
- Sacará el elemento del flujo de documentos
- Tanto el elemento padre como el elemento hermano pensarán que el elemento ocupará su posición sin almacenar el elemento hermano, y el texto permanecerá en su posición.
- Varios elementos flotantes se organizarán horizontalmente de forma predeterminada. Si el ancho del elemento principal no se ajusta, se ajustará
- Si los elementos secundarios son flotantes, la altura del elemento principal desaparece.
- El elemento en línea se convertirá en un elemento de bloque después de que esté configurado para flotar (la razón es que el elemento en línea está configurado para flotar y dejar el flujo del documento)
Cómo borrar el flotador:
1. Establezca manualmente una altura
para el elemento principal 2. Establezca un desbordamiento: oculto para
el elemento principal 3. Establezca el último elemento del elemento principal para que no flote, más claro: ambos;
acerca de la flotación, a menudo encontrará Entonces, aquí habrá una solución detallada separada sobre flotación.