问题：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. 加上mvc:resources后controller访问404

    之前因为静态资源访问,404,于是加上了类似的代码 <mvc:resources location="/resources/" mapping="/resource ...

  2. openstack （1）----- NTP 时间同步服务

    一.标准时间 1.地球分为东西十二个区域,共计24个时区 2.格林威治作为全球标准时间即(GMT时间),东时区以格林威治时区进行加,而西时区则进行减 3.地球的轨道并非正圆,在加上自传速度逐年递减,因 ...

  3. 使用 BenchmarkDotnet 测试代码性能 【Win10】单元测试中捕获异步方法的指定异常

    先来点题外话,清明节前把工作辞了(去 tm 的垃圾团队,各种拉帮结派.勾心斗角).这次找工作就得慢慢找了,不能急了,希望能找到个好团队,好岗位吧.顺便这段时间也算是比较闲,也能学习一下和填掉手上的坑. ...

  4. 数据分析-excel基础篇

    清洗处理类 主要针对文本.格式以及脏数据的清洗和转换. Trim 用于清除掉字符串两边的空格. MySQL有同名函数,Python有近似函数strip. =TRIM(目标单元格) Concatenat ...

  5. android中怎么将桌面较长的图标名称显示完整

    找到相应的 res 资源, 改动其 styles.xml <style name="WorkspaceIcon.Portrait">         <item ...

  6. 洛谷 P1525 关押罪犯==codevs 1069 关押罪犯[NOIP 2010]

    P1525 关押罪犯 513通过 1.4K提交 题目提供者该用户不存在 标签图论并查集NOIp提高组2010 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 咳咳.竟MLE了. 囧.运行时错误 ...

  7. HTML DOM Table 对象

    Table 对象 Table 对象代表一个 HTML 表格. 在 HTML 文档中 <table> 标签每出现一次,一个 Table 对象就会被创建. Table 对象集合 集合 描述 c ...

  8. 扩展欧几里得模板&逆元求法

    拓展欧几里得: 当 gcd ( a , b )= d 时,求绝对值和最小的 x , y 使得 x * a + y * b = d : d = gcd ( a , b ) = gcd ( b , a m ...

  9. Swift-AES之加密解密

    什么是AES 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代 ...

  10. UVA 315 求连通图里的割点

    http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=20837 哎 大白书里求割点的模板不好用啊,许多细节理解起来也好烦..还好找了 ...