1、初始化代码
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<span style="border:1px solid red;">66666666<span>
</body>
</html>
2、运行结果如下
3、设置宽高
width:500px;
height:500px;
宽高都设置500像素，如下
4、运行结果如下
可以看到，根本没有发生变化
5、原因：span为行内元素，而行内元素实际上都不能直接设置宽高等属性的。
比如我们来设置下a标签，如下：
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<span style="border:1px solid red;width:500px;height:500px;">66666666<span>
<a src="http://www.baidu.com/" style="border:1px solid blue;width:500px;height:500px;">百度一下</a>
</body>
</html>
6、运行结果如下
7、所以，这种情况我们只要将行内元素变为非行内元素就可以了。也就要用到
dispaly属性了。
8、dispaly有两种设置方式可以上元素从行内变为非行内
1. display:block；//变为块级元素
2. display:inline-block;//同时具有行内元素与块级元素的属性
9、display:block；//变为块级元素
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<span style="border:1px solid red;width:500px;height:500px;display:block;">66666666<span>
</body>
</html>
运行结果：
10、2. display:inline-block;//同时具有行内元素与块级元素的属性
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<span style="border:1px solid red;width:500px;height:500px;display:inline-block;">66666666<span>
</body>
</html>
运行结果：
