mostrar propiedades comunes
Los valores de atributo comunes de visualización son bloque, en línea, bloque en línea, ninguno y HTML5 agregado flex.
display: block , este elemento se muestra como un elemento de nivel de bloque, no ocupa una fila y otros elementos se pueden yuxtaponer, puede establecer directamente el ancho y la altura, sin establecer el ancho y la altura, el ancho predeterminado es el 100% del elemento principal, el margen y el relleno se configuran en cuatro direcciones de arriba, abajo, izquierda y derecha Son validos
Los elementos comunes a nivel de bloque son h1 ~ h6, div, p, ul, ol, dl, tabla y encabezado de nuevas etiquetas HTML5, pie de página, sección, navegación
display: en línea , este elemento se muestra como un elemento en línea , organizado lado a lado con otros elementos, cuando el ancho y la altura no se pueden establecer directamente, el ancho y la altura son compatibles con el contenido, la configuración del margen solo es válida en la dirección izquierda y derecha, y la parte superior e inferior no son válidas, y la configuración del relleno es válida en la parte superior derecha, inferior izquierda
Los elementos en línea comunes son a, span, img, label, input, textarea, select
display: inline-block , este elemento se muestra como un elemento de bloque en línea , dispuesto lado a lado con otros elementos, puede establecer directamente el ancho y la altura, el margen y el relleno son válidos para las cuatro direcciones de arriba, abajo, izquierda y derecha
display: none , hide this element, se puede usar para controlar la conmutación explícita e implícita del elemento.
Varios métodos para ocultar elementos.
1 、 pantalla: ninguno
El elemento no es visible y el elemento oculto ya no ocupa espacio, no responde a la interacción del usuario, como si el elemento estuviera completamente ausente, lo que hará que cambie el diseño de la página.
2 、 opacidad: 0
Solo oculta el elemento visualmente, y el elemento en sí sigue ocupando su propia posición y puede responder a la interacción del usuario. Existe una capa de efecto visual entre ocultarse y no ocultarse.
3 、 visibilidad: oculta
Al igual que la opacidad, está oculto visualmente pero aún ocupa la posición original, pero no puede responder a la interacción del usuario. Es adecuado para el caso en que el diseño de la página no quiera cambiar después de que el elemento esté oculto.
4 、posición: absoluta; izquierda: -9999px;或者margen-izquierda: -9999px;
Retire el elemento de la pantalla para lograr el efecto oculto, pero no es necesario ser demasiado rudo.
posición
Los valores de propiedad comunes de posición son relativos, absolutos y fijos, y el valor predeterminado es estático.
positon: relative es el posicionamiento relativo, relativo a la posición original del elemento, sin abandonar el flujo del documento.
posición: absoluto es el posicionamiento absoluto, relativo al primer elemento principal cuya posición no es estática, si todos los elementos principales son estáticos, se posicionará en relación con el documento y dejará el flujo del documento.
posición: fijo es el posicionamiento fijo, el posicionamiento relativo al navegador, dejará el flujo de documentos, generalmente utilizado para arreglar la barra de navegación superior e inferior y la barra de funciones laterales.
El flujo de documentos se refiere a la disposición de los elementos de arriba a abajo y de izquierda a derecha durante el diseño de la página. Hay tres situaciones que harán que el elemento salga del flujo de documentos: flotante: izquierda / derecha, posición: absoluta y posición: fija,
El flotador y la posición son ligeramente diferentes del flujo de documentos.
Al igual que dos divisiones hermanas, cuando la división izquierda se separa de la secuencia de documentos y la posición se separa de la secuencia de documentos, los resultados obtenidos son diferentes.
Al usar float, el div izquierdo se envolverá con el texto del div derecho
<estilo> * { margen : 0 ; } .a { flotante : izquierda ; fondo : # c7a337 ; } .b { fondo : # 6C6E85 ; } </style> <div class = "a"> 11 </div> <div class = "b"> <p> 222 </p> <p> 22222 </p> </div>
Al usar la posición, el div izquierdo se superpondrá al div derecho
<estilo> * { margen : 0 ; } .a { posición : absoluta ; izquierda : 0 ; fondo : # c7a337 ; } .b { fondo : # 6C6E85 ; } </style> <div class = "a"> 11 </div> <div class = "b"> <p> 222 </p> <p> 22222 </p> </div>
Esto se debe a que aunque el flotador está separado del flujo de documentos pero no del flujo de texto, la posición está completamente separada del flujo de documentos y del flujo de texto.
El flujo de documentos es relativo al modelo de cuadro, mientras que el flujo de texto es relativo al párrafo de texto.