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元素的高度;