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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Bootstrap 实例 - 标签页与胶囊式标签页</title>
  6. </head>
  7. <body>
  8.  
  9. <div style="width:400px;height:200px;">
  10.   <span style="float:left;width:auto;height:100%;">
  11.            <i style="position:absolute;float:left;width:100px;height:50px;">hello</i>
  12.   </span>
  13. </div>
  14.  
  15. </body>
  16. </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. mysql的时间戳说白了就俩问题，自动更新问题和不自动更新问题

    mysql的时间戳timestamp说白了就俩问题,自动更新问题和不自动更新问题

  2. weblogic自带的jdk是在工程的包部署后编译使用

    weblogic自带的jdk是在工程的包部署后编译使用的.当用户把项目打包部署到weblogic上面,运行该项目的java环境jdk就是用的weblogic自带的jdk了,工程中的jdk和编译时的jd ...

  3. 条款十六: 在operator=中对所有数据成员赋值

    当涉及到继承时,派生类的赋值运算符也必须处理它的基类成员的赋值!否则,当派生类对象向另一个派生类对象赋值时,只有派生类部分赋值了.看看下面: class base { public: ): x(ini ...

  4. #!/usr/bin/env 脚本解释程序的作用

    the Zimbu programming language http://www.zimbu.org/getting-started -------------------------------- ...

  5. JavaSE入门学习5：Java基础语法之keyword，标识符，凝视，常量和变量

    一keyword keyword概述:Java语言中有一些具有特殊用途的词被称为keyword.keyword对Java的编译器有着特殊的意义.在程 序中应用时一定要谨慎. keyword特点:组成k ...

  6. Android上拉查看详情实现

    京东淘宝有那么一种效果就是,上拉能够查看宝贝的详情,这里我也实现了一个类似的效果,也能够移植到商业项目上:先看看简单的效果图 实现原理事实上是利用了ScrollView的滚动和view的touch事件 ...

  7. MySQL-数据表锁定

    MySQL允许客户端会话明确获取表锁,以防止其他会话在特定时间段内访问表.客户端会话只能为自己获取或释放表锁.它不能获取或释放其他会话的表锁. 创建一个数据表: CREATE DATABASE IF ...

  8. YTU 2636: B3 指向基类的指针访问派生类的成员函数

    2636: B3 指向基类的指针访问派生类的成员函数 时间限制: 1 Sec  内存限制: 128 MB 提交: 433  解决: 141 题目描述 领导类(Leader)和工程师类(Engineer ...

  9. Java文件实时监控Commons-io

    今天看到一网友写的 Java 文件监控,实时监控文件加载 ,突然想到Commons-io中已有此功能的实现,先温习下 写个简单的Demo: 有三种方式: 1.java common.io    内部实 ...

  10. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...