Diseño de una página
# 1. ¿Cuál es el diseño de una página web? El diseño
puede entenderse como tipografía. Las herramientas de edición de texto que conocemos tienen sus propios métodos de tipografía, como word, nodpad ++, etc.
El diseño de la página web se refiere a cómo la herramienta del navegador presenta los elementos en la página web.
# 2. Tres formas de diseño / composición tipográfica de páginas web
2.1, flujo estándar
2.2, flujo flotante
2.3, flujo de posicionamiento
Segundo flujo estándar
El método de composición tipográfica de flujo estándar también se denomina: flujo de documentos / flujo normal El llamado flujo de documentos se refiere a la disposición del flujo de elementos de izquierda a derecha y de arriba a abajo en el proceso de composición tipográfica de elementos.
# 1 El diseño predeterminado del navegador es el diseño de transmisión estándar
CSS # 2 en el elemento en tres categorías: a saber,
una
fila a nivel de
bloque dentro de la fila a nivel de bloque
# 3 Hay dos tipos de composición tipográfica en el flujo estándar, uno es tipografía vertical, el otro es tipografía horizontal. Tipografía
vertical. Si el elemento es un elemento de nivel de bloque, entonces será tipografía vertical y
horizontalmente. Si el elemento es un elemento en línea o un nivel de bloque en línea Elementos, luego diseño horizontal
Tres arroyos flotantes
1. La secuencia flotante es un método de composición tipográfica que se desvía de la secuencia estándar. ¿Qué se desvía de la secuencia de documentos? ¿Qué es la mitad del flujo de documentos?
1.1 ¿Qué hay fuera del flujo de documentos?
1. Los elementos flotantes fuera del flujo de documentos significan
# 1, ya no se distingue entre en línea, nivel de bloque y nivel de bloque en línea, sin importar el nivel en el que el elemento pueda ser tipografiado horizontalmente
# 2, sin importar en qué nivel se puede establecer el ancho y la altura del elemento
. Como se mencionó, los elementos de la secuencia flotante son muy similares a los elementos de nivel de bloque en línea de la secuencia estándar.
2. El flujo de documentos no estándar del elemento flotante significa n
. ° 1. Cuando un elemento se aleja flotando, este elemento parece que se ha eliminado del flujo estándar. Este es el estándar del elemento flotante
# 2. Si el elemento anterior flota, pero el siguiente elemento no flota, entonces el elemento vertical se llenará automáticamente y el elemento flotante se sobrescribirá después de reiniciarlo.
punto importante:
1. Sólo existe un método de composición tipográfica para el flujo flotante, que es la composición tipográfica horizontal. Solo puede establecer un elemento alineado a la izquierda o alineado a la derecha. No hay alineación al centro, es decir, no hay valor al centro.
2. Una vez que se utiliza la secuencia flotante, margen: 0 automático; no válido
1.2 Entonces, ¿qué es la mitad del flujo de documentos?
Copiar el código
Breakaway se divide en: mitad escapada y completa escapada,
El desprendimiento completo significa que el espacio que ocupaba originalmente el elemento en el flujo normal de documentos se cerrará como si el elemento no existiera.
Y se llama adosado: porque la posición del elemento flotante después de flotar depende de su posición en el flujo estándar antes del flotador, y tiene cierta relación con el flujo estándar. Por ejemplo, el elemento flotante está en el flujo estándar antes de flotar. La segunda línea, luego de que flota, también está en la segunda línea del flujo flotante. No encontrará los elementos flotantes de otras filas a los que adherirse. Un ejemplo es: el flujo flotante es una película transparente cubierta en el flujo estándar. Después de flotar, se arrojará desde el flujo estándar a la película de flujo flotante. Su posición en esta película sigue siendo la misma dirección que los elementos flotantes en la posición de flujo estándar para adherirlos. Los criterios para unir son:
(1) Quién flota primero en la misma dirección, quién está al frente
(2) Flotando a la izquierda en diferentes direcciones encuentra flotante a la izquierda, flotando a la derecha encuentra flotante a la derecha
1.3 Ajuste de elementos flotantes
Cuando el ancho del elemento principal sea suficiente para mostrar todos los elementos, los elementos flotantes se mostrarán uno al lado del otro.
Cuando el ancho del elemento principal no sea suficiente para mostrar todos los elementos, el elemento flotante se pegará en el elemento anterior. Si no es suficiente, se pegará el elemento anterior.
Hasta que se pegue a la izquierda del elemento principal, se mostrará en esta línea independientemente de si el ancho es suficiente
1.4 Fenómeno circundante de palabra de elemento flotante
Ningún texto flotante, imágenes, hipervínculos y otros elementos darán lugar a elementos flotantes y los rodearán
1.5 Ejercicio de diseño de corriente flotante
#Nota: Cómo diseñar páginas web en desarrollo empresarial
# 1. Use un diseño de flujo estándar para el diseño vertical y use un diseño de flujo flotante para la dirección horizontal
# 2. Diseño
de arriba a abajo # 3. Diseño de afuera hacia adentro
# 4. Horizontal La dirección se puede dividir en una izquierda y una derecha, y luego un diseño adicional a la izquierda y a la derecha
1.6 La altura de los elementos flotantes (también conocido como colapso principal)
# 1. En el flujo estándar, la altura del contenido puede soportar la altura del elemento principal.
# 2. En el flujo flotante, el elemento flotante no puede soportar la altura del elemento principal. Cuando los elementos secundarios flotan, el La altura del contenido se convierte en 0 y el elemento principal parece estar contraído, por lo que también se denomina colapso principal.
1.7 flotador claro
Método flotante claro 1:
establezca una altura para el padre de esos elementos secundarios flotantes
# 1. Nota:
En el desarrollo empresarial, tal límite de altura fijo hará que el funcionamiento de la página sea inflexible, ¡no recomendado!
Método claro flotante dos:
claro: ninguno | izquierda | derecha | ambos
Nota: El atributo claro debe establecerse en el elemento de nivel de bloque y no flotante
# 1, valor:
ninguno: valor predeterminado. Los objetos flotantes están permitidos en ambos lados
izquierda: los objetos flotantes de la izquierda no están permitidos
derecha: los objetos flotantes de la derecha no están permitidos
ambos: los objetos flotantes de la izquierda y la derecha no están permitidos
# 2. Aprenda dos puntos:
1. Los elementos se cargan secuencialmente de arriba a abajo y de izquierda a derecha.
2. Claro: izquierda, trabaja sobre sí mismo sin afectar a otros elementos. Una vez que haya un elemento flotante a la izquierda, cambie a la siguiente línea para asegurarse de que el elemento de la izquierda no esté flotando y resuelva el problema de colapso principal basándose en esto.
#Nota 1: Los
elementos se cargan secuencialmente de arriba a abajo y de izquierda a derecha. Cuando el elemento de la derecha aún no se ha cargado, clear: right es inútil
#Nota 2:
La desventaja de este método es que cuando agregamos el atributo clear a un elemento, el atributo margin-top de este atributo puede volverse inválido. Por lo tanto, no se recomienda usar clear directamente.
Método de pared divisoria
# 1. Método de muro exterior
2.1 Agregar un elemento adicional a nivel de bloque entre las dos casillas
2.2 Establecer clear: both; atributos para este elemento adicional a nivel de bloque.
Nota: El
método de muro exterior permite que la segunda casilla use margin-top Atributos El
método del muro exterior no permite que el primer cuadro use el atributo margin-bottom, por lo que usualmente usamos la altura del muro como sustituto del margin
在企业开发中可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法
# 2. Método de pared interior
3.1 Agregue un elemento adicional a nivel de bloque al final de todos los subelementos en el primer cuadro.
3.2 Establezca claros: ambos; atributos para este elemento adicional a nivel de bloque.
Nota: El
método de pared interior puede hacer que el segundo El cuadro utiliza el atributo margin-top. El
método de la pared interior permite que el primer cuadro utilice el atributo margin-bottom
内墙法也可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法
# 3. ¿Cuál es la diferencia entre la ley del muro interior y la ley del muro exterior?
1. El método de la pared exterior no puede soportar la altura de la primera caja, mientras que la pared interior puede
2、在企业开发中清除浮动，内墙法与外墙法都不常用，因为添加一个无用的墙
在前端开发中推崇结构与样式分离，而隔墙法需要添加大量的没有意义的空标签div
El cuarto
método para borrar flotantes El principio esencial es el mismo que el método de la pared interior, pero debemos usar CSS para controlar el estilo cuando usamos el selector de pseudoelementos CSS, que se ajusta a la idea de desarrollo de front-end
#I, uso detallado. Header
: after {<- --- Agregue contenido al final del elemento con el nombre de clase "clearfix";
content: "."; <---- El contenido de "." Es solo un punto en inglés. Tampoco puedes escribir.
display: block; <---- El elemento agregado se convierte en un elemento a nivel de bloque.
borrar: ambos; <---- borrar los flotadores izquierdo y derecho.
visibilidad: oculta; <---- La visibilidad está configurada como oculta. Tenga en cuenta que es diferente de display: none ;.
visibilidad: oculta; todavía ocupa espacio, simplemente no puedo verlo;
altura de línea: 0; <---- altura de línea es 0;
altura: 0; <---- altura es 0;
tamaño de fuente: 0; < ---- El tamaño de fuente es 0;
}
.header { *zoom:1;} <----兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
<div class="header"></div>
#II、必须要写的是下面这三句话
content: '.';
display: block;
clear: both;
#III、新浪首页清除浮动的方法，也是采用伪元素
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
# 1, revise el selector de pseudoelementos (el nuevo selector de elementos en CSS3) La función del
selector de pseudoelementos es agregar un elemento secundario antes del contenido de la
etiqueta especificada o agregar un elemento secundario después del contenido de la etiqueta especificada
# 2. Formato: agregue subelementos al frente y al dorso de la etiqueta especificada.
Nombre de etiqueta :: antes de { nombre de atributo: valor; }
标签名称::after{
属性名称：值；
}
Cinco formas de limpiar flotadores:
desbordamiento: oculto, pero de hecho tiene otros usos además de limpiar flotadores
#1、可以将超出标签范围的内容裁剪掉
#2、清除浮动
#3、可以通过overflow：hidden，让里面的盒子设置margin-top属性后，外面的盒子不被顶下来，这样就不用为外边的盒子添加边框了
Flujo de cuatro posiciones
1. El posicionamiento relativo consiste en moverse en relación con su posición anterior en la transmisión estándar.
Formato:
posición: relativa
Debe usarse con los siguientes cuatro atributos
arriba: 20px;
izquierda: 30px;
derecha: 40px;
abajo: 50px;
1.1 Puntos a tener en cuenta sobre el posicionamiento relativo
Copie el código
# 1 En el posicionamiento relativo, el atributo de posicionamiento en la misma dirección solo puede usar una
parte superior / inferior, solo una
izquierda / derecha, solo una
# 2 El posicionamiento relativo no se desvía del flujo estándar y continuará estando en el flujo estándar Ocupar un espacio
# 3 Dado que el posicionamiento relativo no se desvía del flujo estándar, el posicionamiento relativo distingue los elementos
# 4 a nivel de bloque, en línea e intralínea porque el posicionamiento relativo no se desvía del flujo estándar y elementos posicionados relativamente Ocupará la posición en la secuencia estándar, por lo que cuando se establecen el margen / relleno
y otros atributos para el elemento relativamente posicionado , afectará el diseño de la secuencia estándar. Es decir, establecer el marin o relleno para la etiqueta relativamente posicionado, que se basa en la posición original de la etiqueta. Basado en compensación
1.2 Escenarios de aplicación del contrapunto relativo
# 1, usado para ajustar los elementos
# 2, use con el posicionamiento absoluto aprendido más adelante
2. El posicionamiento absoluto se refiere al posicionamiento relativo al cuerpo o un elemento ancestro en un flujo de posicionamiento
2.1 Punto de referencia para posicionamiento absoluto
Copie el código n
. ° 1. De forma predeterminada, todos los elementos absolutamente posicionados, independientemente de los elementos ancestros, usarán el cuerpo como punto de referencia
# 2. Si un elemento absolutamente posicionado tiene un elemento ancestro, y el elemento ancestro también es un flujo de posicionamiento, entonces el elemento absolutamente posicionado usará el elemento ancestro del flujo de posicionamiento como punto de referencia
2.1 Siempre que sea el elemento ancestro del elemento absolutamente posicionado
2.2 El antepasado debe ser un flujo de posicionamiento. El flujo de posicionamiento aquí se refiere al posicionamiento absoluto, posicionamiento relativo y posicionamiento fijo (solo el posicionamiento estático en el flujo de posicionamiento no funciona)
2.3. Si un elemento absolutamente posicionado tiene un elemento ancestro, y varios elementos en el elemento ancestro son flujos de posicionamiento, entonces este elemento absolutamente posicionado tomará el elemento ancestro del flujo de posicionamiento más cercano como punto de referencia
2.1 Puntos a tener en cuenta sobre el posicionamiento absoluto
# 1. Los elementos absolutamente posicionados están fuera del flujo estándar, por lo que los elementos absolutamente posicionados no distinguen entre elementos a nivel de bloque / elementos en línea / elementos a nivel de bloque en línea
# 2, si un elemento absolutamente posicionado usa el cuerpo como punto de referencia, en realidad es Use el ancho y alto de la primera pantalla de la página web como punto de referencia, en lugar del ancho y alto de toda la página web como punto de referencia, se colocará en relación con el cuerpo y se desplazará con el desplazamiento de la página
# 3. Un elemento absolutamente posicionado ignorará el elemento ancestro Relleno
2.3 Posicionamiento absoluto centrado horizontalmente
# 1. Tenga en cuenta que cuando un cuadro está absolutamente posicionado, margin: 0 auto; deje que el cuadro en sí esté centrado
# 2. Si desea centrar un cuadro absolutamente posicionado, puede usar left: 50%; margin-left: -element width Half px;
2.4 Escenarios de aplicación de posicionamiento absoluto
# 1, usado para ajustar los elementos
# 2, usar con posicionamiento relativo
. Generalmente, el posicionamiento relativo y el posicionamiento absoluto aparecen juntos en el desarrollo empresarial, y rara vez se usan por separado ===> el hijo es el padre
, entonces, ¿por qué usar el hijo y el padre? Mira la foto de abajo
3. Posicionamiento fijo
Copie el código
# 1. Posicionamiento fijo (similar al posicionamiento absoluto y muy similar al fondo)
. El adjunto de fondo: fijo; permite que la imagen no se desplace con la barra de desplazamiento,
y el posicionamiento fijo permite una cierta Un elemento no se desplaza con la barra de desplazamiento
# 2. Nota
1. Posicionamiento fijo significa posicionamiento relativo a la ventana del navegador. Cómo se desplaza la página, la posición de este cuadro no cambia.
2. Los elementos de posicionamiento fijo están separados del flujo estándar y no ocuparán el espacio en el flujo estándar.
3. El posicionamiento fijo es lo mismo que el posicionamiento absoluto. No se distinguen en línea, nivel de bloque e intrabloque.
4. E6 no admite posicionamiento fijo.
Escenarios de aplicación de posicionamiento fijo
Anuncios acoplados de página web,
banner de encabezado de página (efecto de penetración)
4. Posicionamiento estático
# 1. ¿Qué es el posicionamiento estático?
De forma predeterminada, el atributo de posición del elemento en el flujo estándar es igual a estático, por lo que el posicionamiento estático es en realidad el flujo estándar predeterminado
5, índice z
Copiar código
# 1, atributo de índice z: utilizado para especificar la relación de cobertura
1.1 del elemento posicionado , el valor del índice z indica quién está presionando a quién. El valor mayor cubre el valor menor.
1.2、只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝
对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
1.3、z-index值没有单位，就是一个正整数。默认的z-index值是0。
1.4、如果大家都没有z-index值（默认所有元素z-index值为0），或者z-
index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了
的元素，永远能够压住没有定位的元素。
# 2. Nota: A partir del fenómeno padre (se aconseja al padre y el hijo es inútil), el
elemento padre no tiene un valor de índice z, entonces el índice z del elemento hijo es mayor, que cubre el
valor del índice z del elemento padre Lo mismo, entonces cuyo índice z del elemento padre es mayor, quién cubre a quién