El atributo de visualización es uno de los atributos más importantes en CSS. Se utiliza principalmente para controlar el diseño de los elementos. A través del atributo de visualización, puede establecer si se muestra el elemento y cómo.
1. El papel del atributo de visualización.
1. El atributo de visualización puede establecer el tipo de visualización interna y externa del elemento.
(1) Tipo de pantalla externa:
a. Los tipos de elementos de visualización externa incluyen bloque, en línea, etc.
b. El tipo de pantalla externa determinará el desempeño del elemento en el diseño fluido.
(2) Tipo de pantalla interna:
Los tipos de pantalla interna incluyen diseño flexible, diseño de cuadrícula, diseño fluido, etc.
El tipo de visualización interna de un elemento controla cómo se distribuyen sus elementos secundarios.
2. Diseño fluido (flujo de documentos o flujo regular):
"Flujo de documentos" o "diseño fluido" es la forma en que los elementos "en bloque" y "en línea" se muestran en la página antes de realizar cambios en el diseño (de forma predeterminada).
En pocas palabras, es un método de composición tipográfica que estipula cómo se escriben y muestran los elementos a nivel de bloque y en línea en la página.
(1) En diseño de flujo: método de diseño de elementos a nivel de bloque:
Los cuadros a nivel de bloque están dispuestos verticalmente en orden, comenzando en la parte superior del bloque que los contiene.
La distancia vertical entre cajas del mismo nivel vendrá determinada por el atributo "margen".
El espacio vertical entre dos cajas adyacentes a nivel de bloque se colapsará según el principio de plegado de márgenes.
(2) En diseño fluido: método de diseño de elementos en línea:
Las cajas se organizarán horizontalmente en orden comenzando desde la parte superior del bloque contenedor.
Sólo se conservan los márgenes horizontales, los bordes y el relleno.
Los cuadros se pueden alinear verticalmente de diferentes maneras: abajo o arriba, o alineados con el texto en la parte inferior.
2. Tipo de pantalla externa del elemento
1. splay especifica el tipo de visualización del elemento a través de los siguientes valores de atributo
(1) nivel de bloque de bloque
(2) bloque en línea bloque en línea
(3) en línea
2. Los tipos de visualización de elementos se dividen en: nivel de bloque y en línea, etc.
3. Los elementos en línea (en línea) se dividen en: elementos en línea en línea y elementos de bloque en línea en bloque en línea
(1) elementos dibloque a nivel de bloque
1. Los elementos comunes a nivel de bloque son:
<p>, <div>, <ul>, <ol>, <li>, <h1>~<h6>, <dl>, etc.
2. Características de los elementos a nivel de bloque:
(1) Línea exclusiva
(2) Puede establecer los atributos de ancho y alto.
(3) Si no se establece el ancho, el ancho predeterminado es el ancho del área de contenido del elemento principal.
(4) Se puede colocar cualquier tipo de elementos en elementos a nivel de bloque, pero otros elementos de bloque no se pueden colocar en etiquetas de elementos de texto.
(5) Las etiquetas p y div no se pueden colocar en la etiqueta p.
(6) Las etiquetas p y div no se pueden colocar en etiquetas h1-h6.
(2) elementos de bloque en línea de bloque en línea
1. Los siguientes elementos tienen las características de elementos de bloque en línea:
<img>, elementos de formulario, <video>, <audio>, etc. Estos elementos se denominan esencialmente elementos reemplazables (clasificados como elementos en línea)
2. Características de los elementos de bloque en línea:
(1) Los elementos de bloque en línea adyacentes (o en línea) se mostrarán en una línea. Si no se pueden colocar, pasarán a otra línea.
(2) Habrá espacios en blanco entre los elementos de bloque en línea adyacentes.
(3) Se pueden establecer los atributos de ancho y alto. El ancho predeterminado de un elemento es el ancho de su propio contenido.
(3) elementos en línea en línea (en línea)
1. Los elementos en línea comunes incluyen:
<a>, <fuerte>, <intervalo>, <i>, <del>, etc.
2. Características de los elementos en línea:
Los elementos en línea adyacentes se mostrarán en una línea. Si no pueden caber, se mostrarán en una nueva línea.
Establecer las propiedades de ancho y alto no es válido. Su ancho y alto se expanden según el tamaño de su contenido.
Solo se puede colocar texto u otros elementos en línea dentro de elementos en línea.
3. Nota:
La etiqueta <a> no se puede colocar dentro de la etiqueta <a>, pero los elementos a nivel de bloque se pueden colocar dentro de la etiqueta <a>.
En el desarrollo real, la etiqueta <a> se convertirá en un elemento a nivel de bloque en algunos casos.
Comparación de tres tipos de elementos.
3. Conversión entre elementos en línea y elementos a nivel de bloque
Solo necesitamos agregar el valor del atributo de visualización correspondiente al elemento correspondiente para convertir el elemento al tipo de elemento correspondiente.
(1) Utilice display: block; para convertir elementos en elementos a nivel de bloque.
Ejemplo:
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;background-color:#ACC;line-height:50px;text-align:center;text-decoration: none;}</style></head><body><ahref=>enlace de programación dotcpp</a></body></html>Resultados de ejecución:
(2) Utilice display: inline para convertir elementos en elementos en línea. Sin embargo, existen pocas aplicaciones para convertir elementos en elementos en línea.
(3) Utilice display: inline-block para convertir elementos en elementos de bloque en línea;
4. Método del elemento oculto
Reponer:
(1) Los valores de visualización distintos de ninguno son elementos de visualización.
(2) visibilidad:visible es el elemento de visualización;
Ejemplo:
El valor del atributo none de display se puede utilizar para ocultar elementos. Tiene una función similar a visibilidad: oculta;. La diferencia es que display: none mientras oculta el elemento, también ocultará la posición ocupada por el elemento. display: none; generalmente se usa junto con JavaScript para ocultar o mostrar un elemento. Aquí hay un ejemplo para demostrarlo:
<!DOCTYPEhtml><html><head><style>div{ancho:350px;alto:100px;color de fondo:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>Ocultar</button><script>funciónchan ge_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style.display=;obj.innerHTML=hide;}else{box.style. display=none;obj.innerHTML=display;}}</script></body></html>Resultados de ejecución:
5. La diferencia entre los dos métodos de ocultación.
6. Elimine el espacio en blanco predeterminado de los elementos de bloque en línea.
Los espacios se crean de forma predeterminada entre elementos de bloque en línea.
Razones de las lagunas:
(1) Cuando los elementos tienen formato como elementos en línea, el navegador procesará los espacios en blanco (espacios, retornos de carro, avances de línea, etc.) entre los elementos.
(2) De acuerdo con el método de procesamiento de espacios en blanco (el valor predeterminado es normal, que fusiona el exceso de espacios en blanco), el retorno de carro y el avance de línea en el código HTML original se convierten en espacios en blanco, por lo que aparecen espacios en blanco entre los elementos.
(3) El espacio entre estos elementos cambiará con el tamaño de la fuente.
Solución:
(1) Agregue el elemento principal y reescriba el tamaño de fuente del elemento secundario al mismo tiempo
El atributo de tamaño de fuente tiene herencia, por lo que el tamaño de fuente del elemento principal: 0 se heredará en el intervalo del elemento secundario y el elemento secundario debe restablecer el tamaño del tamaño de fuente.
(2) Agregar flotador al elemento
Después de agregar flotante a un elemento, se separará del flujo del documento. Cuando no se agrega la altura del elemento principal, habrá un problema de colapso de altura y es necesario solucionar el problema causado por el flotador.
(3) En el espacio entre imágenes, agregue display:block;
Después de agregar display:block, la imagen se convierte en un elemento a nivel de bloque y ocupa una línea exclusiva.