Modelo de caja
1. El borde de la línea delgada del borde de la tabla
: colapso: colapso significa que los bordes adyacentes se fusionan
2. El borde del cuadro afectará el tamaño del cuadro.
Solución: una es medir el tamaño del cuadro sin medir el borde , y la otra es incluirlo al medir Para el borde, use el ancho / alto para restar el borde
3. El relleno afectará el tamaño de la caja.
Solución: Para asegurar que el tamaño de la caja y la representación son iguales, deje que el ancho / alto reste el tamaño del margen adicional. La
ventaja es: el número de palabras en una barra de navegación no es el mismo, no necesitamos dar el ancho de un cuadro, solo damos el relleno valor directamente.
Pero si la caja en sí no especifica el ancho / alto, el relleno no admitirá el tamaño de la caja
4. Nivel de caja a nivel de bloque Se deben cumplir dos condiciones para el centrado. Una es que la caja debe especificar el ancho, y los márgenes izquierdo y derecho del cuadro están configurados en automático. La
forma común de escribir es
margin-left：auto;margin-right:quto;
margin:auto;
margin:0 auto;
5. Los elementos en línea y los elementos de bloque en línea están centrados horizontalmente.
Agregue text-align: center al padre.
6. Colapso
del margen exterior El colapso del margen exterior, también conocido como fusión del margen, se refiere a dos adyacentes (hermanos o padre- relaciones secundarias) en el flujo normal Los márgenes exteriores de los elementos a nivel de bloque se combinan en un único margen exterior, pero solo los márgenes exteriores superior e inferior colapsarán, y los márgenes exteriores izquierdo y derecho no tendrán este problema. (La fusión de los márgenes exteriores verticales de elementos de bloque adyacentes)
1. Relación padre-hijo (defina el borde superior del elemento padre o defina el margen interior superior para el padre o agregue desbordamiento: oculto para el padre)
2. Relación entre hermanos (solución: solo un valor de Agregar margen a la casilla)
Si hay margin-top y margin-buttom al mismo tiempo, se sumarán uno positivo y uno negativo, los dos negativos tomarán el mayor valor absoluto y el dos positivos tomarán el valor más grande
7. Limpiar los márgenes internos y externos
Los elementos de la página web tienen muchos guionistas internos y externos predeterminados, y los diferentes navegadores tienen diferentes valores predeterminados, por lo que primero debemos conocer los márgenes internos y externos de la página antes de diseñar
*{
padding 0；
margin:0:}
Nota: Para cuidar la compatibilidad, intente establecer solo los márgenes izquierdo y derecho, no los márgenes superior e inferior (incluso si está configurado, no tendrá un buen efecto), pero es suficiente convertir a bloque -Elementos de nivel y en línea.
8. Borde redondeado borde
-radio: longitud; (esto es una abreviatura)
Escritura directa: borde-radio: 1, 2, 3, 4
dos valores, los tres valores se
pueden escribir por separado o en el borde superior El
principio de - letf-radius es que la intersección del círculo y el borde forma una esquina redondeada. El
parámetro puede tener la forma de un número o un porcentaje.
Si es un cuadrado, establézcalo en la mitad del ancho o alto, o escríbalo directamente al 50%.
Si es un rectángulo, ajústelo a la mitad de la altura. Puede hacer
9. Sombra de cuadro
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow: requerido, la posición de la sombra horizontal, los valores negativos están permitidos (los valores positivos van a la derecha, los valores negativos van a la izquierda)
v-shadow: requerido, la posición de las sombras verticales , se permiten valores negativos
difuminar: opcional, difuminar distancia de
extensión: opcional, el tamaño de la sombra
color: el color de la sombra
insertada: cambiar la sombra exterior (inicio) a la sombra interior El
valor predeterminado es la sombra exterior, pero si es un principio, no es necesario escribir, no funcionará
y el cuadro de sombra no ocupará espacio, y no afectará la disposición de otros cuadros.
Aplicación, al pasar por el cuadro, establecer la sombra
10. Texto sombra
box-shadow:h-shadow v-shadow blur color
Ideas de diseño de página
1. Confirme el diseño de la
página (área visible) 2. Analice los módulos de fila en la página y los módulos de columna de
cada módulo de fila 3. Los módulos de columna de cada fila suelen tener un diseño flotante, primero determine el tamaño de las columnas indivisas y luego determinar la posición de la columna
4. Para hacer una página HTML, primero hay una estructura, seguida de un estilo. La estructura es siempre la más importante
1. Atención a la barra de navegación: en
el desarrollo real, no usaremos el enlace a directamente, sino que usaremos li para incluir el enlace. Uso
: La estructura de li + a es más clara.
Si usa a directamente, los motores de búsqueda pueden reconocer fácilmente que hay palabras clave apiladas. La sospecha, existe el riesgo de ser degradado por los motores de búsqueda, lo que afectará el ranking del sitio web.
No se puede dar ancho a la barra de navegación, y se puede agregar otro texto después de ella. Porque el texto no es lo mismo, es mejor agregar relleno a los enlaces izquierdo y derecho para abrir el cuadro en lugar de especificar el ancho
2. El botón tiene un borde y debe quitarse
. 3. Habrá un espacio en el medio del elemento de bloque y debe flotar.
4. Si la casilla agregada al elemento principal no cabe en un fila, puede ajustar el margen derecho para hacer el último padre El margen derecho de los elementos secundarios del elemento excede
flotador
Todos los elementos pueden flotar. Los elementos flotantes tienen las características de los elementos de bloque en línea. Si se convierten en elementos flotantes, no es necesario establecer el bloque y el bloque en línea, simplemente establezca el ancho y la altura para
borrar el flotante.
display: table
Este elemento se mostrará como una tabla a nivel de bloque (similar a
Clear float
Por qué clear float① El
padre no tiene altura. ② La caja del niño flota. ③ Si el siguiente diseño se ve afectado, debemos borrar el flotador.
El flotador claro es la esencia: después de despejar la influencia traída por la flotación, la flotación y el despeje, el padre de la caja detectará automáticamente la altura de la subcaja, no afectará el flujo de la siguiente
política estándar es cerrado flotante, flotante El impacto se limitará a los elementos del Padre en el interior
: etiquetado adicional, pseudoelementos dobles, pseudoelementos, desbordamiento La
ley de etiquetado adicional, también conocida como pared, es una recomendación del W3C.
El método de etiqueta adicional agrega una etiqueta vacía al final del elemento flotante. P.ej U otras etiquetas (por ejemplo,
etc.).
Ventajas: fácil de entender, fácil de escribir
Desventajas: agregar una serie de etiquetas sin sentido, estructura deficiente
Nota: El requisito de esta nueva etiqueta vacía debe ser un elemento a nivel de bloque.
Puede agregar un atributo de desbordamiento al padre y establecer su valor de atributo en oculto, automático o de desplazamiento.
El niño no enseña, el padre, la nota es agregar el código al elemento principal
ventajas: el código es simple
Desventajas: no se puede mostrar la sección de desbordamiento
: después de una etiqueta adicional, hay una versión mejorada de la ley. También agregue
.clearfix: after {
content: "";
display: block;
height: 0;
clear: both;
visible: hidden;
}
.clearfix {/ * IE6, 7 exclusivo * /
* zoom: 1;
}
ventajas: sin aumento etiquetas,
desventajas de estructura más simple : cuidar la versión baja del navegador
representa el sitio web: Baidu, Taobao, Netease
doble pseudo-elemento, se agrega el elemento principal
.clearfix: el antes, .clearfix: el Después {
Contenido: "" ;
la pantalla: Table;
} .clearfix: {Después de
Clear: both; .clearfix {}
* Zoom:. 1;
}
ventajas: código más conciso
desventajas: versión de bajo cuidado del navegador
en nombre del sitio Web: mijo, Tencent