霍者博客

关于行内元素浮动后显示块级元素部分属性的问题

我们都知道行内元素(inline element)是不支持宽高的,比如strong,span,a,img等,而块级元素是支持宽高的,问题就来了,如果给行内元素加浮动会有什么变化?

很显然,在加了浮动后行内元素变成了块级元素了,也就支持了宽高,平常大家都知道给行内元素加上display:block;后可以让其支持宽高,而当行内元素浮动后变成块级元素大家可能会忽视;当然行内元素变成了块级元素后还是和我们普通的块级元素是有点区别的,普通的块级元素是自动撑开父级宽度的,而行内元素变成块级元素后是里面的内容撑开其高度。也就说,如果上图“没有加浮动”这几个字去掉的话,demo1这个标签就不显示了。

下面是css实验的代码:

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>关于行内元素浮动后显示块级元素部分属性的问题</title>
<style type="text/css">
*{
font-family: "微软雅黑";
font-size: 12px;
color: #333;
}
.demo1 {
background-color: #666;
height: 50px;
width: 300px;
}
.demo2 {
background-color: #CCC;
height: 50px;
width: 300px;
float: left;
}
</style>
</head>
<body>
<span class="demo1">没有加浮动</span>
<span class="demo2">添加浮动后,显示宽高</span>
</body>
</html>

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/436.html,标题:关于行内元素浮动后显示块级元素部分属性的问题

【我来说两句】
分享到:

相关文章:



评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。