问题: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. cache and database

    This article referenced from http://coolshell.cn/articles/17416.html We all know that high concurren ...

  2. golang中关闭http server

    golange 开启http server 服务之后,怎么关闭呢? ------------------------------------------------------------------ ...

  3. Linux进程间通信 共享内存+信号量+简单样例

    每个进程都有着自己独立的地址空间,比方程序之前申请了一块内存.当调用fork函数之后.父进程和子进程所使用的是不同的内存. 因此进程间的通信,不像线程间通信那么简单.可是共享内存编程接口能够让一个进程 ...

  4. Message: SyntaxError: unterminated string literal

    #Message: SyntaxError: unterminated string literalmytxt = words.replace('\n','').replace('\r','') js ...

  5. 【LIS】Luogu P1020 导弹拦截

    昨天晚上看蓝书,看到了LIS问题的优化解法. 是比O(n方)更快的解法,实际上是一个常数优化. 先讲一下朴素的解法: 一个集合a,a[i]是第i个元素.设dp[i]为以编号为i的元素结尾的最长不上升子 ...

  6. 【USACO07FEB】 Cow Relays

    [题目链接]              点击打开链接 [算法]            朴素算法,就是跑N-1遍floyd            而满分算法就是通过矩阵快速幂加速这个过程 [代码]   ...

  7. SQLALchemy之ORM操作

    1.仍然要创建引擎 2.创建session会话 (1)方式一 engine =create_engine("mysql+pymysql://root:123@127.0.0.1:3306/s ...

  8. Redis: Redis on Windows Setup

    ylbtech-Redis: Redis on Windows Setup 1.返回顶部 1. 2. 3. 4. 5. 6. 7. 8. 9. 2.返回顶部   3.返回顶部   4.返回顶部   5 ...

  9. 微信公众平台appid和appsecret在哪

    1.appid和appsecret是微信公众平台服务号才有的,如果自己家的公众平台不是服务号,需要升级为服务号. 2.登录服务号,登录“服务”条目,“服务中心”如图. 3.点击“自定义菜单”-“开发模 ...

  10. Newtonsoft.Json序列化日期时间去T的几种方式。

    原文地址:MVC web api 返回JSON的几种方式,Newtonsoft.Json序列化日期时间去T的几种方式. http://www.cnblogs.com/wuball/p/4231343. ...