tag - line in css
pantalla: en línea vs pantalla: bloque (12)
Cuál es la diferencia básica entre el siguiente CSS:
display:inline
y esto:
display:block
Usando estos por separado en un elemento, obtengo el mismo resultado.
Agregue un color de fondo al elemento y verá muy bien la diferencia entre el bloque en línea y el bloque, como lo explican los otros carteles.
Aquí hay una tabla de comparación
Puedes ver ejemplos aquí.
Pantalla: bloque Se comporta en gran medida de la misma manera que las etiquetas ''p'' y ocupa toda la fila y no puede haber ningún elemento junto a ella hasta que esté flotando. Pantalla: en línea Simplemente usa tanto espacio como se requiere y permite que otros elementos se alineen a su lado.
Use estas propiedades en caso de formularios y obtendrá una mejor comprensión.
un bloque o bloque en línea puede tener un ancho (por ejemplo, ancho: 400px) mientras que el elemento en línea no se ve afectado por el ancho. el elemento en línea puede abarcar la siguiente línea de texto (por ejemplo, http://codepen.io/huijing/pen/PNMxXL cambiar el tamaño de la ventana de su navegador para ver eso) mientras que el elemento de bloque no puede.
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}
display: block; crea un elemento de nivel de bloque , mientras que display: inline; crea un elemento de nivel en línea . Es un poco difícil explicar la diferencia si no está familiarizado con el modelo de css box, pero basta con decir que los elementos de nivel de bloque interrumpen el flujo de un documento, mientras que los elementos en línea no lo hacen.
Algunos ejemplos de elementos de nivel de bloque incluyen: div , h1 , p y hr etiquetas HTML.
Algunos ejemplos de elementos de nivel en línea incluyen: a , span , strong , em , b y i etiquetas HTML.
Personalmente, me gusta pensar en elementos en línea como elementos tipográficos . Esto no es enteramente o técnicamente correcto, pero en su mayor parte los elementos en línea se comportan muy parecido al texto.
Puedes leer un artículo más sobre el tema here . Viendo que varias otras personas en este hilo lo han citado, puede valer la pena leerlo.
display: block - un salto de línea antes y después del elemento
display: inline - sin salto de línea antes o después del elemento
Bloquear
Toma todo el ancho disponible, con una nueva línea antes y después (mostrar: bloquear;)
En línea
Toma el ancho que necesita y no fuerza las líneas nuevas (visualización: en línea;)
Elementos de bloque : los elementos que les gustan div, p, los encabezados son nivel de bloque. Comienzan desde una nueva línea y ocupan todo el ancho del elemento principal. Elementos en línea : elementos como b, i, span, img están en línea. Nunca comienzan desde una nueva línea y ocupan ancho de contenido.
Pantalla: bloque tomará toda la línea, es decir, sin salto de línea
Pantalla: en línea solo ocupará el espacio exacto que requiera.
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}
Puede referir el ejemplo en este violín http://jsfiddle.net/RJXZM/1/ .
bloqueo de pantalla
toma toda la fila (100%) de la pantalla, siempre es el 100% del tamaño de la pantalla
display: inline-block ocupa tanto ancho como sea necesario, puede ser de 1% a 100% del tamaño de la pantalla
mostrar el ejemplo de bloque en línea
es por eso que tenemos div y span
El estilo predeterminado de Div es el bloque de visualización: ocupa todo el ancho de la pantalla
El estilo predeterminado de span es display: bloque en línea: span no se inicia en una nueva línea y solo ocupa tanto ancho como sea necesario.
display: block significa que el elemento se muestra como un bloque, como siempre han sido los párrafos y los encabezados. 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.
Obtenga más información sobre las opciones de visualización: http://www.quirksmode.org/css/display.html
los elementos de bloque se expanden para llenar a sus padres.
los elementos en línea se contraen para ser lo suficientemente grandes como para sostener a sus hijos.