问题：span标签的width和height分别为多少？

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 标签页与胶囊式标签页</title>

</head>

<body>

<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>

</body>

</html>
这题考点其实有几个：
1.span标签是行内元素，无法设置宽高的；
2.float会把浮动元素变成块级元素；支持宽高，height:100%;即为，200px，当height为%单位意为：基于包含它的块级对象的百分比高度。所以这里span的height是200px。宽度由内容撑开。
3.i绝对定位脱离了文档流；span元素width设置为auto，所以塌陷为0，高度还是200px。

关于css宽高问题的更多相关文章

  1. css 宽高自适应的div 元素 如何居中 垂直居中

    在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...

  2. CSS——宽高问题大汇总

    1.宽高继承 他们是要属性的,并不是直接就能继承,inherit. 2.浮动的盒子不要给宽,宽度由内容来决定

  3. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  4. CSS宽高背景介绍

    本萌新还未毕业,在一家外包公司干了一个月,因烦恼日常琐事任务,深感外包之坑,以及上班路途艰辛,特转战erp实施,继写日常随笔,望来日屌丝逆袭,走上人生巅峰. 若有错误,请前辈指点迷津,在下谢过. &l ...

  5. CSS 宽,高,背景设置

    width 宽,height 高,background 背景:背景色 background-color:颜色值--英文单词/十六进制/rgb:背景图 background-image:url(‘图片路 ...

  6. 前端之css（宽高）设置小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

  7. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

  8. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

随机推荐

  1. linux 实现VLAN

    本文将在一台linux机器上,利用linuxbridge 等技术模拟创建VLAN 环境. 首先,创建vlan interface ip link add link ens33 name ens33.8 ...

  2. python 交互模式 方向键乱码问题解决

    python交互模式下通常用向上键来找到之前执行的命令,用左右键移动光标.这很方便.但有的时候这些键在按完后却会出现乱码. 本文只解决CentOS 6.4 下 python2.7.8 的乱码问题. 这 ...

  3. CodeIgniter 向mysql插入数据包括字母、汉字问题

    今天在使用ci框架,须要向mysql数据表插入数据.当中的一个字段包括汉字.字母.但是用传统的使用sql语句:insert into XXX这样的方式,不管怎样都插入不成功,最后我换了还有一种方式: ...

  4. 向海量用户发送数据哪家最强？上QDN下载LTE Broadcast SDK！

    情境一: 在一个数万人的体育场内.作为一名观众你非常难看清运动员的面容.假设有了4G手机.你能够非常easy的打开直播应用.一边看直播讲解,一边体验现场气氛.但令人尴尬的是,现场几万人同一时候须要观看 ...

  5. Linux watchdog 6300esb

     基本原理: Linux 自带了一个 watchdog 的实现,用于监视系统的执行,包含一个内核 watchdog module 和一个用户空间的 watchdog 程序.内核 watchdog ...

  6. 协方差矩阵与主成分分析PCA

    今天看论文,作者是用主成分分析(PCA)的方法做的.仔细学习了一下,有一篇博客写的很好,介绍的深入浅出! 协方差:http://pinkyjie.com/2010/08/31/covariance/ ...

  7. HDU 5773The All-purpose Zero

    The All-purpose Zero Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  8. Oracle 游标使用总结（好文章）

    游标(CURSOR)也叫光标,在关系数据库中经常使用,在PL/SQL程序中可以用CURSOR与SELECT一起对表或者视图中的数据进行查询并逐行读取. Oracle游标分为显示游标和隐式游标. 显示游 ...

  9. USACO Section 1.2PROB Transformations

    挺有趣的一道题,呵呵,不算难 /* ID: jusonal1 PROG: transform LANG: C++ */ #include <iostream> #include <f ...

  10. [翻译]NUnit---Condition Asserts && Comparisons Asserts && Type Asserts (五)

    网址:http://www.cnblogs.com/kim01/archive/2013/03/31/2991597.html Condition Asserts 测试指定条件的方法称作条件测试,测试 ...