关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考
起初,这个问题和float
还有设置宽高之间是没有任何关联的,一开始这是一个关于height
和line-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
的其它特性,值得注意的有这些:
- float之后的元素虽然变成了块级元素,但不同于一般的块级元素,它的宽度并不占满所在行的整行,而是由内容的宽度决定的,如果内容不占满整行,那float后的元素也不会占满整行。
- 一个元素float之后,是浮动到父元素左上角或者右上角的,在float之后,这个元素就不会再起到撑开父元素的作用了。一个直观的例子就是,如果一个父元素中所有的子元素都float了,那这个父元素的高度就会变成0(如果高度没有指定,是由内容高度决定的话)。
结语:这个<span>
元素帮我这个初学者理清了一些以前没听过或者模糊的概念,比如替换元素和非替换元素,只有非替换内联元素不能设置宽高,还有float之后会发生什么:1.变成块级元素;2.不一般的块级元素;3.不再起到撑开父元素的作用。
资料文章都已在文中文字上给出超链接。
关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考的更多相关文章
- float使内联支持宽高
float使内联元素支持了宽高,可以设置宽高属性:float消除内联元素的空格:
- 块级元素或者行内元素在设置float属性之后是否改变元素的性质?
块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...
- 桌面上嵌入窗口(桌面日历)原理探索(将该窗口的Owner设置成桌面的Shell 窗口,可使用SetWindowLong更改窗口的GWL_HWNDPARENT,还要使用SetWindowPos设置Z-Order)
今天在QQ群里有人问怎样实现将自己的窗口嵌入桌面,让它和桌面融为一体,就像很多桌面日历软件那样. 我当时想到的就是建立一个Child Window,将他的父窗口设置成桌面Shell窗口就可以了.但是 ...
- AWS探索及创建一个aws EC2实例
一.AWS登陆 1.百度搜索aws,或者浏览器输入:http://aws.amazon.com 2.输入账户及密码登陆(注册流程按照提示走即可) 二.创建EC2实例(相当于阿里云的ecs) 1.找到E ...
- session.write类型引发的思考---Mina Session.write流程探索.doc--zhengli
基于Mina开发网络通信程序,在传感器数据接入领域应用的很广泛,今天我无意中发现一个问题,那就是我在前端session.write(msg)数据出去之后,却没有经过Filter的Encoder方法,同 ...
- web前端开发——css
一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...
- day3-3种实现小图标与文字水平对齐的方式
效果图: 1.使用小图标作为背景图实现 html: <div class="test"> <ul> <li class="method1&q ...
- float包裹性与破坏性及清除浮动几种方法
1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响” 学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...
- 【总结】我所整理的float, inline-block还有position:absolute
这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...
随机推荐
- C++:名字查找先于类型检查
Sub-Title: Name Hiding. "In C++, there is no overloading across scopes - derived class scopes a ...
- Ajax的封装03
一.Ajax 1.原理:基于http协议的 内置对象:XMLHttpRequest 发起请求 那会相应 步骤: var xhr=new XMLHttpRequest(); // 请 ...
- IndexedDB参考资料网址
IndexedDB:浏览器里内置的数据库, Web骇客 http://www.webhek.com/indexeddb/ 前端的数据库:IndexedDB入门(很全面) http://web.jobb ...
- avalon2.2.3发布
avalon2.2.3这次发布带许多好的东西 首先正式有了自己的LOGO 其次有了自己的QuickStart 样例工程, 这个工程整合了路由,表单,表格,切换卡等组件 https://github.c ...
- windbg学习---!thread和.thread
!thread扩展显示目标系统中线程包括ETHREAD块在内的摘要信息.该命令只能在内核模式调试下使用 !thread [-p] [-t] [Address [Flags]] -p 显示拥有该线程的进 ...
- machine learning----->Amazon Machine Learning机器学习平台
参考资料: 1.如何使用Amazon Machine Learning平台构建你的机器学习预测模型 2.
- thinkphp model模块
1.获取系统常量信息的方法:在控制器DengLuController里面下写入下面的方法,然后调用该方法. public function test() { //echo "这是测试的&qu ...
- 网站fail_over测试(障害测试)
确认Web和DB进行操作: 一:确认web: ①确认进程是否存在: ps aux|grep tomcat ②关闭tomcat: /etc/init.d/catalina_sbi stop ③重启tom ...
- 微信企业号-JS-SDK图像接口
使用JS-SDK需要进行四步 主要是步骤二和步骤三,步骤二需要配置,步骤三具体使用相关接口,这里以使用图像接口为例 php页面代码主要用来完成步骤二,也就是配置接口 public function ...
- R语言画图,根据正负值画不同颜色,并且画水平线或者垂直线
col=ifelse(x<0, "blue", "red") #如果x值为负值,用蓝色表示,反之,用红色表示 abline(v=0,col="g ...