sapn,a,等html元素设置宽高无效怎么办?
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>
运行结果:
