起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于heightline-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现有一个内联元素<span>竟然可以设置宽高,即使在我特地加上display: inline;的情况下依然可以设置宽高。(写这篇文章的时候已经忘记了具体场景了,只是把原因记录了下来)。对这个反常的现象,我很好奇,所以开始了“探索与发现”之旅。

首先我想搜的是,内联元素为什么可以设置宽高,于是找到了这篇文章:jlds123 - 《为何img、input等内联元素可以设置宽、高》。在这个文章里提出了一个我之前没有了解到的概念:替换元素和非替换元素,于是我开始搜索替换元素和非替换元素的概念。

替换元素:在"CSSWG"的标准文档中,里面说到替换元素就是“元素的内容在CSS格式化模型的范围之外的”,比如<img>元素的内容,它的内容会被src所指定的图片替换,并且内容本身有自己的宽度、高度、方向这些自身特性,不需要由CSS的特性去支撑就有了,而非替换元素是需要指定CSS才能有这些特性的,即使没有明确指定,也有其默认的CSS特性。替换元素的概念清晰了,那么非替换元素的概念也就清晰了。

非替换内联元素:"唯一不可以设定宽高"的就是非替换内联元素,非替换内联元素首先是内联元素,其次是非替换的,即它的内容首先已经写在HTML中了,而且它也依赖CSS来为它设定特性,比如常见的<span>元素就是非替换内联元素。

知道了上面这些概念以后,就可以回过头来看最初的那个问题了--为什么一个<span>可以设置宽高,然而发现问题还是没有解决,<span>是非替换内联元素,在上面的理论基础上,还是不应该能设置宽高的。标准文档是应该不会出问题的,所以我想,这里面的问题也许是这个<span>已经不是非替换内联元素了,会不会是一个块级元素了呢?结果就像刚才说的,即使我使用display: inline;的方法,这个<span>依然可以设置宽高,事情变得更加扑朔迷离了啊……

接下来我仔细看了一下这个<span>元素的每一个样式,有一个地方引起了我的注意,这个<span>元素是进行了float操作的,会不会是这个引起的呢?我尝试性地在百度搜了一下,一搜还真的搜到了结果!在这个问答里,明确地说float之后,<span>会变成块级元素block,再之后我去查了下WHATWG的标准文档,验证了这个说法,在此,谜题总算解开了!

顺带着,我还了解了一些关于float的其它特性,值得注意的有这些:

  1. float之后的元素虽然变成了块级元素,但不同于一般的块级元素,它的宽度并不占满所在行的整行,而是由内容的宽度决定的,如果内容不占满整行,那float后的元素也不会占满整行。
  2. 一个元素float之后,是浮动到父元素左上角或者右上角的,在float之后,这个元素就不会再起到撑开父元素的作用了。一个直观的例子就是,如果一个父元素中所有的子元素都float了,那这个父元素的高度就会变成0(如果高度没有指定,是由内容高度决定的话)。

结语:这个<span>元素帮我这个初学者理清了一些以前没听过或者模糊的概念,比如替换元素和非替换元素,只有非替换内联元素不能设置宽高,还有float之后会发生什么:1.变成块级元素;2.不一般的块级元素;3.不再起到撑开父元素的作用。


资料文章都已在文中文字上给出超链接。

关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考的更多相关文章

  1. float使内联支持宽高

    float使内联元素支持了宽高,可以设置宽高属性:float消除内联元素的空格:

  2. 块级元素或者行内元素在设置float属性之后是否改变元素的性质?

    块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...

  3. 桌面上嵌入窗口(桌面日历)原理探索(将该窗口的Owner设置成桌面的Shell 窗口,可使用SetWindowLong更改窗口的GWL_HWNDPARENT,还要使用SetWindowPos设置Z-Order)

    今天在QQ群里有人问怎样实现将自己的窗口嵌入桌面,让它和桌面融为一体,就像很多桌面日历软件那样. 我当时想到的就是建立一个Child  Window,将他的父窗口设置成桌面Shell窗口就可以了.但是 ...

  4. AWS探索及创建一个aws EC2实例

    一.AWS登陆 1.百度搜索aws,或者浏览器输入:http://aws.amazon.com 2.输入账户及密码登陆(注册流程按照提示走即可) 二.创建EC2实例(相当于阿里云的ecs) 1.找到E ...

  5. session.write类型引发的思考---Mina Session.write流程探索.doc--zhengli

    基于Mina开发网络通信程序,在传感器数据接入领域应用的很广泛,今天我无意中发现一个问题,那就是我在前端session.write(msg)数据出去之后,却没有经过Filter的Encoder方法,同 ...

  6. web前端开发——css

    一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...

  7. day3-3种实现小图标与文字水平对齐的方式

    效果图: 1.使用小图标作为背景图实现 html: <div class="test"> <ul> <li class="method1&q ...

  8. float包裹性与破坏性及清除浮动几种方法

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  9. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

随机推荐

  1. 修改tomcat应用日志默认编码格式

    前言 今天开发跟我说tomcat日志中的中文不能正常显示,根据以往的经验,我觉得可能跟服务器的编码有关,于是尝试各种方法,但还是没能解决问题. 后来我突然想到会不会跟tomcat的设置有关呢,于是在网 ...

  2. 转: windows下面安装Python和pip终极教程

    原文: http://www.cnblogs.com/yuanzm/p/4089856.html 因为如果是初学者在windows环境下安装,简直是折磨人,会遇到各种蛋疼的情况.本文希望提供傻瓜式的教 ...

  3. sql搜索like通配符的用法详解

    http://www.lmwlove.com/ac/ID878 有很多朋友写了几年的like搜索,可能对like后面通配符的用法都不了解,甚至于%的作用是什么都不清楚.在这篇文章中,我们就一起来学习一 ...

  4. C++ MFC打开文件的流程

    打开文件的步骤如下: 弹出打开文件对话框 -> 获取选择的文件,并将文件显示在视图中. 我们程序中经常需要定制的操作如下: 1. 定制弹出的文件对话框,例如需要修改打开文件的类型或扩展名 2. ...

  5. flash开发几个问题

    1.跨域请求xml或txt 问题,使用URLLoader,不能跨域使用 2.js和swf交互问题,尽量使用swfobject.js动态创建

  6. java.lang.IllegalStateException: Couldn't read row 1, col 0 from CursorWindow. Make sure the Cursor is initialized correctly before accessing data fr

    Android中操作Sqlite遇到的错误:java.lang.IllegalStateException: Couldn't read row 1, col 0 from CursorWindow. ...

  7. 机器学习--Classifier comparison

    最近在学习机器学习,学习和积累和一些关于机器学习的算法,今天介绍一种机器学习里面各种分类算法的比较 #!/usr/bin/python # -*- coding: utf-8 -*- "&q ...

  8. Pi# - Raspberry Pi GPIO Library for .NET

    Project Description Pi# (pronounced “Pi Sharp”) is a library to expose the GPIO functionality of the ...

  9. jQuery事件对象event的属性和方法

    事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...

  10. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...