CSS学习笔记——display：inline、block、inline-block的区别

CSS display是布局中经常用到的属性，它是指显示状态，display常用的属性：block | none | inline |inline-block

display:block——将元素显示为块级元素.（float必需应用在块级元素之上）

block元素的特点是:

总是在新行上开始

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

display:inline——将元素显示为行内元素.（inline表示内联，特点是紧贴着前一个内联元素）

inline元素的特点是：

和其他元素都在一行上；

高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

display：inline-block——将元素呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 

另外：inline和block需要切换的情况如下：

inline->block:

让一个inline元素从新行开始；

block->inline:

1.让块元素和其他元素保持在一行上；

2.控制inline元素的宽度（对导航条特别有用）；

3.控制inline元素的高度；