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元素的高度
- 无须设定宽度即可为一个块元素设定与文字同宽的背景色