首先用span标签做下测试,贴上代码先
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试span float后是否会变为block元素</title>
<style>
body{ font:12px Arial, Helvetica, sans-serif; background:#FFF;}
.d_a,.s_a{border:1px solid #CCC;}
.d_a{width:300px;height:200px;margin:50px auto 0;}
.s_a{float:left;background:#EEE;margin-left:10px;}
</style>
</head>
<body>
<div class="d_a">
<span class="s_a">我是span标签</span>
</div>
</body>
</html>
.s_a有个margin-left,并且没有给其加display:inline,如果float后span变为block,那么这时IE6下就会出现双倍margin,下为IE6下的截图:
很明显.s_a的margin还是10相素,并没有出现IE6下两倍margin的情况!这是怎么回事,难道span float后还是inline,没有block吗?让我们继续深入测试,大家都知道inline元素给其加width、height是无效的,那么现在就简单了,要想证明span float后是否block只需再给span加上宽度或者高度试下,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试span float后是否会变为block元素</title>
<style>
body{ font:12px Arial, Helvetica, sans-serif; background:#FFF;}
.d_a,.s_a{border:1px solid #CCC;}
.d_a{width:300px;height:200px;margin:50px auto 0;}
.s_a{float:left;background:#EEE;margin-left:10px;width:200px;height:50px;}
</style>
</head>
<body>
<div class="d_a">
<span class="s_a">我是span标签</span>
</div>
</body>
</html>
最终结果如下图(来自IE6)
很明显span float后宽度、高度对其有影响了,结果应该是span标签 float后block了,但是本身的inline并没有丢!(既可设宽度、高度,IE6中又没有出现双倍margin) 这里只测试了<span>我想<a>标签之类的其它inline标签也是同样的情况。最后再说明一点:本身自带inline元素的标签在float和margin同时使用的情况下,不用担心会出现双倍margin,并不需要再特意加上display:inline!
分享到:
相关推荐
HTML+CSS中完全的行内元素(inline element)和块元素(block element) 完整的
CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...
什么是块元素block和内联元素inline,什么是块元素block和内联元素inline。。。
当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时,就需要想别的办法来解决了: 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display...
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:...
有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的...
CSS文档流与块级元素(block)、内联元素(inline)
CSS文档流与块级元素(block)内联元素(inline)那点事
NULL 博文链接:https://tianqiushi.iteye.com/blog/2101378
inline-block则在IE8以上(包括8)才能使用,查了下资料,其实IE5.5的时候就已经有inline-block了,只是实现不一样,所以想要兼容低版本的IE就只能用额外的代码 复制代码代码如下:display:inline; //强行不换行 zoom:1; //...
1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...
Inline-block是元素display属性的一个值。这个名字的由来是因为,可以简单的解释为inline+block ;display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。块级元素(block...
元素的转换 01 元素的转换 什么是元素的转换? 元素的转换 display inline block inline-block none 此元素将显示为行内元素(行内元素默认的display属性值)。 此元素将显示为块元素(块元素默认的display属性值)...
主要介绍了inline-block带来的元素间距问题解决,同时附上block和inline以及inlinke-block的作用对比,需要的朋友可以参考下
NULL 博文链接:https://hc24.iteye.com/blog/832493
display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。...这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症,比如使用这一属性后,
最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉。对于inline-block元素及去掉间隙的方法,...
display:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于display:inline-block最大的不同就是其没有...每一行所有的inline元素和inline-block元素会共同形成一个line boxes,这个l