overflowhidden用法思考
今天在群里(54430674)交流高度自适应问题,linxz℡推荐使用:
height:auot;min-height:100px !important;
或
height:auto;overflow:hidden;zoom:1;
这是一个有意思的话题,特别第2种方法给人很多想象的空间。例如:
<style type="text/css">
#div1 {
height:auto;
border:solid 1px red;
zoom:1;
}
#div2 {
float:left;
height:100px;
width:100px;
background:blue;
}
</style>
<div id="div1">
<div id="div2"></div>
</div>
在上面示例中,外包含框在非IE中是不能够子适应高度的,但是增加了声明overflow:hidden;,即:
<style type="text/css">
#div1 {
height:auto;
border:solid 1px red;
zoom:1;
overflow:hidden;
}
#div2 {
float:left;
height:100px;
width:100px;
background:blue;
}
</style>
<div id="div1">
<div id="div2"></div>
</div>
你会发现包含框在非IE中也能够自动适应包含元素的高度,很奇怪的现象。
我们知道overflow属性设置当元素的内容溢出其区域时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。而hidden正相反,会自动剪切多出的内容。
现在就有一个问题了:
应该说,外包含框高度为0,那么它应该剪切所有的内容,即不显示任何内容。但是试验的结果却相反。这不得不让人思考其他问题:为什么呢?
考虑这个问题,我们应该从浏览器的解析机制开始,首先,浏览器遵循从上到下、从内到外的顺序来解析HTML结构,然后再解析这些结构的CSS样式。
而CSS属性的解析也是有顺序的,一般会遵循先主后次的顺序,也就是说overflow属性晚于其他属性进行解析,当浏览器解析完<div id="div1">的样式时,它会按着一定的逻辑不断进行计算。当解析overflow属性,它要完成几个计算问题:第一,元素本身是否定义了高度,第二,元素的布局模式,第三,包含子元素的大小。如果当元素没有明确定义高度的情况下,而布局又是以流动布局显示,此时它会考虑子元素的高度。也就是说,此时overflow:hidden声明触发了浏览器重新计算包含框的高度的可能性,此时它会考虑到子元素的高度,并努力包含子元素,避免子元素被裁切显示。因此,我们会看到了使用overflow:hidden声明之后,包含框能够自适应包含内部的子元素。
实际上,这是两种逻辑计算的重合所引发的一个有趣话题。
这是样吧的个人思考,并不代表权威解释,留待更多感兴趣的读者去思考和探索。
overflowhidden用法思考相关推荐
- 【工作记录】java方法返回多个值(用法思考、比较)
用java写业务逻辑的时候,有时候一个方法可能需要返回多个出参,当中可能有List,String,Map等不同类型的数据结构,针对这种情况,我的解决策略一般是使用Map的形式来解决,具体分析请浏览下文 ...
- callSuper = true的用法思考
1.1 简述 我们知道一般@ToString和@EqualsAndHashCode注解是加在子类上的,其它注解大同小异. 问题:使用继承时 调用@toString方法 默认不会输出父类中的字段. 解决 ...
- async awit 的用法思考
// async/await 是ES7引入的新语法 可以更加方便的进行异步操作 先了解一下async的语法特点 他是修饰在函数前面的 async function queryData() {retur ...
- 聪颖少年——李耳少年求学好问爱思考的故事:写出流传千古的《道德经》的老子...
老聃自幼聪慧,静思好学,常缠着家将要听国家兴衰.战争成败.祭祀占卜.观星测象之事.老夫人望子成龙,请一精通殷商礼乐的商容老先生教授.商容通天文地理,博古今礼仪,深受老聃一家敬重. 一日,商容教授道:& ...
- 每天学习一点英语——number,amount,quantity区别、用法
文章目录 amount amount为名词 amount 作动词 number用法 quantity用法 思考来源:看uptick的英文解释--an increase in the number or ...
- Vue学习笔记(四)—— 前端路由
介绍 本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
- Vue前端路由~满满的干货
文章目录 目标 目录 路由的基本概念与原理 路由 后端路由 SPA(Single Page Application) 前端路由 实现简易前端路由 Vue Router vue-router的基本使用 ...
- Vue前端路由~非常详细哦,不要错过
下面是对Vue前端路由的整理,希望可以帮助到有需要的小伙伴~ 文章目录 目标 目录 路由的基本概念与原理 路由 后端路由 SPA(Single Page Application) 前端路由 实现简易前 ...
- Tomcat中的filter调用doFilter的问题
public final class ApplicationFilterChain implements FilterChain {/*** Filters. ApplicationFilterCon ...
最新文章
- 怎样将c语言的字体变中文,请问,在c语言中如何将阿拉伯数字转换成汉字,求代码...
- 为Process.waitFor设置超时
- MySQL的高级应用:视图,事务,索引,主从
- 影响个人计算机系统功能的因素,影响个人计算机系统功能的因素除了系统使用哪种位的微处理器外,还有CPU的时钟频率、CPU主内存容量、CPU所能提供的指令集。...
- 数据定义语言DDL之数据库操作
- 1.5T和2.0L哪个好?
- SQL进阶六:字符串函数
- mysqld --initialize --console 没有 打印信息_JavaScript学习笔记(三)-- 循环结构
- sql 链接 oracle 查询,Oracle学习之路-SQL篇-连接查询
- 心法利器[58] | 从长尾问题到以搜代分的机理探索
- com.android.htcdialer+意外停止+htc,HTC刷机为什么会变砖 HTC刷机变砖修复方法介绍【教程】...
- 中职计算机办公自动化教学,中职学校计算机办公自动化教学现状分析.pdf
- 《统计学》第八版贾俊平第十三章时间序列分析和预测知识点总结及课后习题答案
- pcap报文80211-8023区别
- python 发音-python读音
- 教师资格证面试考试详细流程来了
- Unity加载进度条
- 如何成为一个区块链开发人员_成为开发人员是社会工作
- 浅谈分布式集群管理系统
- Google Android开发入门与实战 视频教程 源代码 游戏应用开发 传送门