首页 > 试题广场 >

问题:span标签的width和height分别为多少?

[单选题]
请阅读以下代码:
<div style=”width:400px;height:200px;”>
  <span style=”float:left;width:auto;height:100%;”>
           <i style=”position:absolute;float:left;width:100px;height:50px;”>hello</i>
  </span>
</div>

问题:span标签的width和height分别为多少?
  • width = 0px,height = 0px
  • width = 400px,height = 200px
  • width = 100px,height = 50px
  • width = 0px,height = 200px
推荐
哈哈,今天遇到了第二次,终于懂得了什么意思:
首先span不是块级元素,是不支持宽高的,但是style中有了个float:left;就使得span变成了块级元素支持宽高,height:100%;即为,200,宽度由内容撑开。
但是内容中的 i 是绝对定位,脱离了文档流,所以不占父级空间,所以span的width=0
编辑于 2017-03-19 09:15:24 回复(24)
这题考点其实有几个:
1.span标签是无法设置宽高的;
2.float会把浮动元素变成块级元素;
3.绝对定位脱离了文档流
发表于 2017-02-09 15:58:30 回复(5)
Dt.头像 Dt.
首先,在W3C标准解析中,float 会使元素脱离文档流,并且浮动元素会生成一个块级框,而不论它是块级或者行内元素

对于这个块级框我是这样理解的:它把这个元素变成了一个(类似)行内块级元素,也就是inline-block,当你把题中

float: left; 替换为 display: inline-block;

你会发现,会有一样的结果,为什么说类似呢,因为inline-block 元素之间会默认产生空白符,而float 之间却没有

既然和inline-block 类似,那么当然可以设置宽高了,虽然float 使元素脱离文档流,但是并不影响div 仍然是它的父元素

因此.height: 100%;也就是继承了父元素的高度,200px

而width: auto;其实是坑人的,因为元素的默认width 就是auto,而inline-block 元素的宽是内容宽度

这个时候我们看子元素<i>,它设置了position: absolute;同样脱离的文档流,它并不会影响父元素,所以span 的width:0px;

编辑于 2017-04-12 15:05:24 回复(3)
span元素继承父元素的height的高度200px,由于i设置为绝对定位会脱离原先的文档流,span元素width设置为auto,所以塌陷为0,高度还是200px。
发表于 2017-01-21 11:37:28 回复(5)
1.首先span元素是行内元素,是无法设置高宽度的,span中使用了float使得其变成了块级元素,因此设置的高宽有效。
2.i中的绝对定位会使其脱离文档流,因而不占用正常的文档流,再者span中的width设置为auto,且没有其他元素,所以为零。这种也叫‘塌陷现象’,即在使用float和定位(absolute、fixed)的情况下脱离文档流会导致。
发表于 2017-03-22 15:43:36 回复(0)
i设置了绝对定位以后,不占用页面空间,所以span内容为空,宽度自然为零。
发表于 2017-01-14 18:40:05 回复(0)

span 添加 float:left 会触发浏览器 BFC,由于其内部的 i 标签使用绝对定位脱离了文档流,因此造成 span 元素内容塌陷,所以 span 的宽度塌陷为 0,由于给 span 元素手动指定了高度为 100%,因此其高度和父级元素高度相同(200px),因此最终的结果为:宽度0px,高度200px

发表于 2017-08-19 20:18:27 回复(0)
i设置绝对定位,脱离正常文档流,所以span无内容,由auto知宽度为空,100%则高度为200px。
注意span虽为行内元素,但设置浮动后可以设置宽高。
官方文档对float的解释:
当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat(ie)或cssfloat(非ie)。
发表于 2017-01-17 15:14:41 回复(0)
浮动会使内联元素inline-block化,使得元素支持宽高
发表于 2018-09-15 13:20:03 回复(1)
考点:
    1:浮动元素可以设置宽高
    2:浮动元素和正常流块级元素的width值为auto的区别
    3:绝对定位和浮动同时使用的‘覆盖优先级’
    4:其他:比如绝对定位脱离文档流使得包含块宽度为0,百分比高度与百分比内外边距的区别。。。

发表于 2017-11-27 21:07:10 回复(0)
1.span是行内元素,是不支持宽和高的,浮动后,具有宽高,宽为auto,即由span中的内容撑开;而高为100%,就是继承了其父元素的高度;
2.span的子元素i也脱离了文档流,i是绝对定位
3.所以,span的宽为0,高度为200px 
发表于 2017-08-02 19:26:47 回复(0)
火狐亲测span宽度不为零。
发表于 2017-04-17 20:32:57 回复(0)
浏览器亲测哪个都不是D
发表于 2017-04-05 09:48:49 回复(0)
看span元素的上下文,因为span元素高度100%,即继承了父元素的高度,然后再看span元素内有无内容可以撑开它的宽度,本来有i元素,但是看到i元素使用了position:absolute,即会脱离文档流,所以没有内容撑开span元素,故span元素width为0.
发表于 2017-03-25 23:42:12 回复(0)
D
发表于 2016-11-18 11:19:49 回复(1)
答案是D,span虽然是内联元素,但是经过的BFC属性float浮动元素就可以设置宽高了。

BFC快格式化内容属性有:
didplay:inline-block table-cell table-caption flex inline-flex;
position:absolute;  // 以及fixed 
float:left/right;
overflow:hidden;

BFC的最大的特点是将标签设置为display:inline-block; 这样就可以设置宽高了
发表于 2020-01-07 16:24:19 回复(0)
span不是块级元素,不支持宽高。 样式设置float:left使span变成块级元素,支持宽度。 span下的i绝对定位,脱离父元素。 span宽就为0.高度200px。
发表于 2019-11-04 10:53:56 回复(0)

Auto由子元素 100%由父集元素



注意浮动与定位导致的脱标和转变为块级元素

编辑于 2019-10-10 09:28:55 回复(0)
这题有点意思, 表面看 只需要看是否触发BFC就可以,如果i标签没有那个position 答案会是100,200 


发表于 2019-08-08 16:42:20 回复(0)
1.首先span是块级标签没有宽和高
2.属性float可将span变成块级标签
3.auto意思是宽度是由内容撑开的
4.孙子级标签 i 是浮动流,不占用父级空间
发表于 2019-07-25 22:52:08 回复(0)
实测<span>宽高均为0,因为height要按百分比来显示的话,这种写法不生效,实际上这种写法相当于height:auto,即页面中最终渲染出来的span宽高均为0
发表于 2019-07-05 15:44:05 回复(0)