1.display:block将元素显示为块级元素
- 总是在新行上开始
- 高度,行高以及顶和底边距都可控制
- 宽度缺省是它的容器的100%,除非设定一个宽度
-
<div><p><h1><form><ul>和<li>是块元素的例子
2.display:inline将元素显示为行内元素
- 和其他元素都在一行上
- 高,行高及顶和底边距不可改变
- 宽度就是它的文字或图片的宽度,不可改变
-
<span><a><label><input><img><strong>和<em>是inline元素的例子
3.inline-block将块对象作为内联对象呈递
- 让块元素和其他元素保持在一行上
- 高度,行高以及顶和底边距都可控制
4.inline和block的转换情景
- 让一个inline元素从新行开始
- 让块元素和其他元素保持在一行上
- 控制inline元素的宽度(对导航条特别有用)
- 控制inline元素的高度
- 无须设定宽度即可为一个块元素设定与文字同宽的背景色