¿Cómo mover un elemento a nivel de bloque hacia abajo sin ocupar la posición correspondiente? Al crear diseños de página, los elementos html generalmente se dividen en dos tipos: elementos a nivel de bloque y elementos en línea. 1. Elementos a nivel de bloque: de forma predeterminada, cada elemento a nivel de bloque ocupa una línea de altura. Después de agregar un elemento a nivel de bloque a una fila, generalmente no puede agregar otros elementos (excepto después de flotar). Cuando dos elementos a nivel de bloque se editan consecutivamente, se ajustan automáticamente a la página. Los elementos a nivel de bloque a menudo se pueden anidar con elementos a nivel de bloque o elementos en línea; los elementos a nivel de bloque a menudo aparecen como contenedores para la estructura organizacional, pero este no siempre es el caso. Algunos elementos a nivel de bloque, como los que solo pueden contener elementos a nivel de bloque. Otros elementos a nivel de bloque pueden contener elementos a nivel de fila, como . , mientras que otros pueden contener elementos tanto a nivel de bloque como a nivel de fila. DIV es el elemento a nivel de bloque más utilizado, y el estilo de elemento display:block son todos los elementos a nivel de bloque. Siempre se muestran en forma de bloques, dispuestos verticalmente en secuencia con sus hermanos al mismo nivel, con los lados izquierdo y derecho llenos. 2. Elementos en línea: los elementos en línea también se denominan elementos en línea, elementos incrustados, etc. ;Los elementos en línea son generalmente elementos básicos basados en el nivel semántico y solo pueden contener texto u otros elementos en línea, como el elemento en línea "a". Por ejemplo, el elemento SPAN, el elemento IFRAME y el estilo de elemento display: inline son todos elementos en línea. Por ejemplo, elementos como las palabras se organizan horizontalmente entre letras y se colapsan automáticamente hacia el extremo derecho. 3. Características del elemento bloque 1. Comience siempre desde una nueva línea; ② Se pueden controlar la altura, la altura de la línea, los márgenes y el relleno. ③ El ancho predeterminado es 100 de su contenedor, a menos que se establezca el ancho. 4. Puede acomodar elementos en línea y otros elementos de bloque4. Características de los elementos en línea1. Está en la misma línea que otros elementos; ② La altura, la altura de la línea, los márgenes y el relleno no se pueden cambiar ③ El ancho es el ancho de su texto o imagen y no se puede cambiar ④ Los elementos en línea solo pueden acomodar texto u otros elementos en línea; . Tenga en cuenta que configurar el ancho de la siguiente manera no tiene ningún efecto. Establecer la altura no es válido y se puede establecer según la altura de la fila. La configuración de márgenes solo es efectiva para los márgenes izquierdo y derecho, no para los márgenes superior e inferior. La configuración del relleno solo es efectiva para el relleno izquierdo y derecho, no para el relleno superior e inferior. Tenga en cuenta que el alcance del elemento se expande, pero no tiene ningún efecto en el contenido que rodea al elemento. 5. Dirección de elemento de bloque común – Referencia de bloque de dirección – Centro de referencia de bloque – Directorio de bloque de alineación – División de lista de directorio – Nivel de bloque común Fácil, también la etiqueta principal de CSSlayout DL – Conjunto de campos de lista de definición – Formulario de grupo de control de formulario – Formulario de interacción h 1 – título H2 – subtítulo H3 – encabezado de tercer nivel H4 – encabezado de cuarto nivel H5 – encabezado de quinto nivel H6 – encabezado de sexto nivel HR – la línea de separación horizontal es índice – menú de solicitud de entrada – lista de menú sin marcos – contenido opcional del marco, (Muestra el contenido de este bloque para navegadores no compatibles. Elementos en línea normales A – abreviatura de anclaje – acrónimo de abreviatura – B – negrita (no recomendado). bdo – bidioverridebig – – fuente grande BR – cita de salto de línea – – código de referencia – código de computadora ( requerido al citar el código fuente) dfn – definir campo EM – fuente de énfasis – configuración de fuente (no recomendado) I – cursiva img – entrada de imagen – cuadro de entrada kbd – definir etiqueta de texto del teclado – etiqueta de tabla Q – Referencia breve S – Subrayado (no recomendado ) samp – Definir selección de código de computadora de muestra – Selección de proyecto pequeño – Rango de texto de fuente pequeña – Contenedor en línea de uso común, define bloques en el texto tachado – Guión intermedio fuerte – Negrita Enfatismo en el cuerpo sub--subíndice sup--superíndice área de texto--entrada de texto multilínea cuadro TT-teletexto u-underline VII. ¿Cuál es la diferencia entre elementos en línea y elementos a nivel de bloque? Diferencia 1: ¿Los elementos a nivel de bloque ocupan una fila y el ancho no se llenará automáticamente? ocupa una fila y su ancho cambiará con el contenido: los elementos a nivel de bloque pueden establecer el ancho y el alto; los elementos en línea no pueden establecer el ancho y la altura; tres elementos a nivel de bloque pueden establecer márgenes en línea; elementos en línea; margen derecho; relleno izquierdo; relleno derecho;
Pero el borde vertical inferior; el margen superior; el relleno inferior no puede tener efecto. Diferencia cuatro: nivel de bloque: visualización: bloque; en línea: visualización: en línea; modificando el atributo de visualización, puede cambiar entre elementos a nivel de bloque y referencias de elementos en línea: