问题：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. substring详细用法，截取不行就用替换

    SUBSTRING 返回字符.binary.text      或      image      表达式的一部分.有关可与该函数一起使用的有效      Microsoft®      SQL    ...

  2. [转]chrome 的devtools 中setting 开启workspace , 也有点用处。不是很大

    转载的,原文: http://wiki.jikexueyuan.com/project/chrome-devtools/saving-changes-with-workspaces.html ---- ...

  3. [Java Spring] Spring Annotation Configuration Using XML

    Add context to our application. main/resources/applicationContext.xml: <?xml version="1.0&qu ...

  4. Office 针式打印机如何调节边距

    1 右击针式打印机,选择"打印机属性"   2 点击"打印机参数设置"选项卡,之前打印出来如果发现上下距离不合适,可以通过调节但也纸页顶距来调整   该参数值可 ...

  5. 使用Swift模拟Window-LFU

    今天參加了某公司2015的校招的机试,大题开放题比較多.有一道大题是Window-LFU比較有意思,当时题目搞了半天没搞明确让干啥- -题目大概是这种:实现一个Window-LFU缓存(事实上就是用数 ...

  6. redis 事务 及发布于订阅功能

    事务: Redis事务可以一次执行多个命令,事务具有以下特征: 1.隔离操作:事务中的所有命令都会序列化.按顺序地执行,不会被其他命令打扰. 2.原子操作:事务中的命令要么全部被执行,要么全部都不执行 ...

  7. 开发人员调试工具Chrome Workspace

    Workspace是个什么样的东西呢?他可以在开发人员工具中调试改动js或者css同一时候自己主动保存文件.可以避免开发人员在工具中调试好,再到编辑器中改动一次代码的反复操作,可以提高一定的效率 配置 ...

  8. 基于AR谱特征的声目标识别

    本文第一部分先解释AR谱,但并不会给出太多的细节,第二部分介绍几种常见的语音中的特征.有些在之前的博文中已经用过.诸如过零率. 第三部分给出实际操作的过程及识别的效果.本文的目标是通过对DSP採集的声 ...

  9. 【CEOI2002】【Poj 1038】Bugs Integrated, Inc.

    http://poj.org/problem?id=1038 发一下中文题面(今天考试直接被改了): 生记茶餐厅由于受杀人事件的影响,生意日渐冷清,不得不暂时歇业.四喜赋闲在家,整天抱着零食看电视,在 ...

  10. 第八周 Leetcode 44. Wildcard Matching 水题 (HARD)

    Leetcode 44 实现一种类似正则表达式的字符串匹配功能. 复杂度要求不高, 调代码稍微费点劲.. 好像跟贪心也不太沾边, 总之 *把待匹配串分成若干个子串, 每一个子串尽量在模式串中靠前的部分 ...