display:inline;就是将本来是块级的元素显示为内嵌的元素,比如div是一个块级元素,设置了display:inline之后,就会跟其他元素在同级显示了
例:
text1
<div>text2</div>
这里的text1跟text2是分开在两行显示的
而
text
<div style="display:inline;">text2</div>
这里的text1和text2则是在同一行显示的
inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:
让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
注释:
display属性基本上分为inline,block,和none。
inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
block元素前后换行。标题和段落元素是块元素。
none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用