CSS: diferencias de pantalla

Question

Cuál es la diferencia entre pantalla: bloque y pantalla: en línea

Answer 1

Los elementos del bloque normalmente se apilarán verticalmente mientras que los elementos en línea se alinearán horizontalmente.

Dos divisiones se apilarán una encima de la otra, pero si las configura para mostrar: en línea, estarán una al lado de la otra horizontalmente. Vise-versa con etiquetas Span.

Answer 2

pantalla: el bloque
hará que el objeto fuerce a otros objetos dentro de un contenedor a una nueva línea.

pantalla: en línea
intenta mostrar el objeto en la misma línea que otros objetos.

pantalla: bloque de visualización

 
Item 1 
Item 2 
Item 3 

: inline

 
Item 1 Item 2 Item 3 

Answer 3

display: block significa que el elemento se muestra como un bloque, como párrafos y cabeceras han sido siempre. Un bloque tiene algunos espacios en blanco arriba y abajo y no tolera elementos HTML al lado, excepto cuando se ordena de otra manera (por ejemplo, al agregar una declaración de flotación a otro elemento). pantalla: en línea significa que el elemento se muestra en línea, dentro del bloque actual en la misma línea. Solo cuando está entre dos bloques, el elemento forma un "bloque anónimo", que sin embargo tiene el ancho más pequeño posible.

Answer 4

El bloque utiliza todo el ancho disponible, con una nueva línea antes y después. Inline usa solo el ancho que necesita sin forzar nuevas líneas.

Answer 5

sí,

display: block hace que el elemento se comporte como un bloque, por ejemplo: <p>

display: inline hacen en línea y diseño de elemento.

estos se pueden aplicar a elementos que por defecto son del tipo de pantalla opuesta.

Valores posibles

* none - no display at all. 
* inline - An inline box. 
* block - A block box. 
* inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy. 
* run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing. 
* list-item - the equivalent of the default styling of the HTML li element. 
* table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE. 
* inline-table - an inline-level table. Not supported by IE. 
* table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE. 
* table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE. 
* table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE. 
* table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE. 
* table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE. 
* table-column - the equivalent of the default styling of the HTML col element. Not supported by IE. 
* table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE. 
* table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE. 

* source

Answer 6

Hay dos tipos principales de dibujo contexto en el CSS que se puede asignar a los elementos. Uno, display: block, crea cajas posicionables. El otro, display: inline, fluye el contenido como una serie de líneas dentro de un cuadro.

Por defecto, un bloque ocupa todo el espacio horizontal, por lo que una serie de bloques se mostrarán uno debajo del otro, apilados verticalmente. A medida que los elementos en línea fluyen en líneas, se representan horizontalmente, como una palabra después de la otra.

En general, utiliza el bloque para diseñar una página, mientras que en línea está reservado para el contenido de texto que se encuentra en trozos de texto, por ejemplo, enlaces.

También hay otros tipos de contexto de dibujo, por ejemplo, display: table, sin embargo, estos se usan con menos frecuencia debido a su naturaleza especializada y/o falta de soporte del navegador.

Más detalles está disponible en the CSS 2.1 specification.

Answer 7

Es importante tener en cuenta que a los elementos en línea no se les puede asignar su propio ancho, alto o espacio en blanco vertical (margen/relleno superior/inferior).

Si está tratando de hacer que los elementos de bloque se comporten como elementos en línea (donde se apilan uno al lado del otro), debe usar float. Los flotadores se apilarán junto a otros flotadores en la misma dirección. Además, cualquier elemento en línea que se da float se convertirá automáticamente en un bloque.

Answer 8

Un documento HTML se considera un flujo, piense en una pila de elementos HTML apilados hasta la parte superior.

Un bloque se define en el flujo como un cuadro (por defecto tan grande como la página) y se empuja tanto como sea posible hacia la parte superior sin superponer otro bloque. Ejemplos: div, p, table.

Un elemento en línea no define un cuadro (es por eso que no puede establecer su ancho y alto), se agregará a otros elementos en línea en el bloque actual. Ejemplos: span, código, a.

Answer 9

display: block 

El elemento ocupará todo el contenedor de su elemento primario. Normalmente comienza en una nueva línea.

display: inline-block 

Esto creará un elemento en línea que solo ocupará tanto espacio como sea necesario. Puede comenzar en cualquier lugar de la línea.

Ejemplo de uso: Al crear una barra de menú en la parte superior de la página (a la envoltura de elementos de menú a menudo se le asigna display: inline-block)