CSS,
Pantalla: elemento de bloque es que se mostrará como elementos en bloque:
- Siempre comience en una nueva línea;
- La altura, altura de línea y márgenes superiores e inferiores pueden ser controlados;
- El valor predeterminado es 100% de la anchura de un contenedor, excepto una anchura conjunto;
- <Div>, <p>, <h1>, <form>, <ul> y <li> elemento es un ejemplo de un bloque;
Pantalla: elemento en línea es que se mostrará como elementos en línea:
- Sus elementos son en una línea;
- Altura de la línea y la márgenes superiores e inferiores no se pueden cambiar;
- Su ancho es el ancho del texto o imágenes, no puede ser cambiado;
- <Span>, <a>, <label>, <input>, <img>, <strong> y <em> son ejemplos de elementos en línea;
display: inline-block objetos renderizados como objetos en línea:
La presentación de un objeto para objetos en línea, pero el contenido del objeto como bloque de objetos presentados. Al lado de los objetos en línea se presentará en la misma línea, lo que permite el espacio. ( Inline Específicamente, el elemento característico de esta solicitud se presenta objetos alrededor de los elementos permanecen en la misma línea, pero puede configurar el elemento de anchura y altura propiedades Lot )
Por ejemplo:
<ul>
<li>问答</li>
<li>头条</li>
<li>专栏</li>
<li>讲堂</li>
<li>发现</li>
</ul>
Tal lista de hojas Efectos El navegador muestra la siguiente, un elemento de li a nivel de bloque, predeterminada de la pantalla: bloque, es decir, cada li envoltura voluntad:
Quiero que esta lista puede ser visualizada en posición horizontal, esta vez se necesita mostrar su uso: en línea, la conversión de los elementos Li son elementos en línea:
<style>
ul li{
display: inline;
}
</style>
<ul>
<li>问答</li>
<li>头条</li>
<li>专栏</li>
<li>讲堂</li>
<li>发现</li>
</ul>A este efecto tiempo de navegación de la siguiente manera:
Ahora no es lo suficientemente bueno, la brecha entre los elementos es demasiado pequeño, si se desea establecer un ancho de cada li, es necesario ancho establecido: 50px, la pregunta es, no importa cómo la configuración de ancho, no tendrá efecto, ya en línea como elementos en línea sin anchura, altura y otros atributos, ¿cómo? Esta vez, la pantalla de necesidad: inline-block apareció, la propiedad no se puede configurar para resolver el problema de ancho, manteniendo al mismo tiempo el elemento li todavía está dispuesto horizontalmente.
<style>
ul li{
display: inline-block;
width: 50px;
}
</style>
<ul>
<li>问答</li>
<li>头条</li>
<li>专栏</li>
<li>讲堂</li>
<li>发现</li>
</ul>Examinar los resultados como se muestra a continuación:
Resumió:
- mostrará: elemento de bloque denominados elementos en bloque
- mostrará: elemento en línea conocidos como los elementos en línea
- display: inline-block fila de modo que los restos elemento Layout elementos, mientras que el elemento a nivel de bloque tiene propiedades CSS (por ejemplo, anchura, altura)
