问题：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. 我的arcgis培训照片5

    来自:http://www.cioiot.com/successview-528-1.html

  2. &quot;Simple Factory&quot; vs &quot;Factory Method&quot; vs &quot;Abstract Factory&quot; vs &quot;Reflect&quot;

    ref: http://www.cnblogs.com/zhangchenliang/p/3700820.html 1. "Simple Factory" package torv ...

  3. LeetCode 之 Longest Valid Parentheses（栈）

    [问题描写叙述] Given a string containing just the characters '(' and ')', find the length of the longest v ...

  4. html5 虚拟键盘弹出挡住底部的输入框解决方案

    问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...

  5. 编程算法 - 最小的k个数 代码(C)

    最小的k个数 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入n个整数, 找出当中的最小k个数. 使用高速排序(Quick Sort)的方法 ...

  6. rk3188调试记录

    1.编译 # . build/envsetup.sh # lunch  7    7. PI3910-user 1.电池部分 init.rc启动healthd-charger服务.对电池进行检測 se ...

  7. [计算机故障]为什么我的手机SD卡一打开就是说“你的磁盘未格式化，现在需要格式化吗”？

    现在随着智能手机的普及,越来越多的人使用到了手机SD卡.也有的是micro SD(更小一些). 最近一个朋友说,为什么我的手机SD卡插到手机里一打开就是说“你的磁盘未格式化,现在需要格式化吗?” 但是 ...

  8. a non-linear editing software

    VLMC, open source video editor - VideoLAN http://www.videolan.org/vlmc/

  9. bzoj2705 [SDOI2012]Longge的问题——因数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2705 一开始自己想了半天... 有了点思路:遍历 n 的因数 k,每个因数要预处理出 gcd ...

  10. 19_传智播客iOS视频教程_类和对象

    什么是类?什么是对象? 看的见.摸的着.拿过来就可以直接使用.例如报纸就是一个对象. 学生这个东西可不可以只是指一个?就只有那一个才是学生.不是的,学生是有很多个的.它是对一类人的统称.类是统称.所以 ...