<html>
<head>
<title>block and inline test</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
上面代码的现实效果如下：
div1
div2
div3
span1 span2 span3
可见，div（块元素）是自动占一行的；而span（内联元素）是共占一行的。
块元素和内联元素可以进行转换（通过设置CSS样式中的display属性）
<html>
<head>
<title>block and inline test</title>
</head>
<body>
<div style="display: inline" style="display: inline">div1</div>
<div style="display: inline" style="display: inline">div2</div>
<div style="display: inline" style="display: inline">div3</div>
<span style="display: block" style="display: block">span1</span>
<span style="display: block" style="display: block">span2</span>
<span style="display: block" style="display: block">span3</span>
</body>
</html>
上面代码的显示效果如下：
div1
div2
div3
span1 span2 span3
可见块元素转换成了内联元素，内联元素转换成了块元素
内联元素在不设置高和宽时，显示出了内联元素的特性。但是设置了高或宽时，又显示出了块元素的特性……
未设置高/宽---：
<html>
<head>
<title>block and inline test</title>
</head>
<body>
<div style="background-color: silver; border-bottom: 1px solid #000;">div1********<br />
******</div>
<div style="">div2</div>
<div style="">div3</div>
<span style="background-color: yellow; border-bottom: 1px solid #000;">span1********<br />
******</span>
<span style="">span2</span>
<span style="">span3</span>
</body>
</html>
效果图：
设置了高/宽---：
<html>
<head>
<title>block and inl
