hasLayout与BFC的触发条件
hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果。例如清除浮动时需要触发hasLayout与BFC;很多自适应的两栏和三栏布局(两边固定宽度,中间自适应)需要触发hasLayout与BFC;很多奇形怪状的IE bug的解决需要触发hasLayout…至于详细的用法这里就不做详细说明了,这里说说触发hasLayout与BFC的条件:
hasLayout
Layout
是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用。HTML的元素中,有些是默认就已经触发了Layout
,而有些默认没有触发。当IE的Layout
被触发后,我们就说该元素“拥有布局”,使用object.currentStyle.hasLayout
可获取到ture
值,否则将获取到false
,并且Layout
的触发是不可逆的。关于Layout
的更详细介绍,推荐这篇文章《On having layout》。hasLayout的触发条件如下:
- display: inline-block
- height: (除 auto 外任何值)
- width: (除 auto 外任何值)
- float: (left 或 right)
- position: absolute
- zoom: (除 normal 外任意值)
- writing-mode: tb-rl
附1:IE7特有的触发Layout的属性
- min-height: (任意值)
- min-width: (任意值)
- max-height: (除 none 外任意值)
- max-width: (除 none 外任意值)
- overflow: (除 visible 外任意值,仅用于块级元素)
- overflow-x: (除 visible 外任意值,仅用于块级元素)
- overflow-y: (除 visible 外任意值,仅用于块级元素)
- position: fixed
附2:默认触发Layout的HTML元素
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
BFC
BFC
,块格式化上下文( Block formatting context ),是指初始化块级元素定义的环境。在CSS中,元素定义的环境有两种,一种是块格式化上下文( Block formatting context ),另一种是行内格式化上下文( Inline formatting context )。其中我们使用比较多的是块级可视化上下文,CSS3草案中将之称为“flow root
”,但我们仍习惯叫BFC
,其的触发条件如下:
- 浮动元素(float除了none)
- 绝对定位元素(absolute/fixed)
- 设置了’display’ 属性为 “inline-block”,”table-cell”, “table-caption” 的元素
- 设置了overflow 非 “visible”的元素
hasLayout与BFC的触发条件的更多相关文章
- BFC的布局规则以及触发条件
1 .BFC的含义 : Block Formatting Contexts(BFC) 块级元 ...
- BFC的布局规则和触发条件
1 .BFC的含义 : Block Formatting Contexts(BFC) 块级元素格式化上下 ...
- BFC概念和作用,触发条件
1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...
- 更加直观地了解hasLayout和BFC
网络上有很多关于hasLayout和BFC相关的文章,但是大部分都显得有些晦涩难懂.所以想用一些比较直观的例子来说明hasLayout和BFC给平时的布局带来的影响. 基础知识 在讲hasLayout ...
- 实践中总结——理解haslayout和BFC
1.HASLAYOUT 首先,haslayout翻译成中文就是:有布局. 所谓布局,指的是一个元素可以对本身和里边的元素进行尺寸计算和定位.这里只是谈IE6/7,据说微软之所以不是对所有元素默认有布局 ...
- CSS学习(二)- 有关 hasLayout 和 BFC
1. hasLayout 概念说明 ‘Layout’ 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout . ‘Layout’ 在 IE 中可以通 ...
- Nginx 502错误触发条件与解决办法汇总(转载)
一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.有些站长是在刚刚转移到Nginx之后就出现了这个问题,所以经常会怀疑这是不是Nginx的问题,但 ...
- 10、网页制作Dreamweaver(扩展:各浏览器对 onunload 事件的支持与触发条件实现有差异)
标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...
- Oracle DBWR,LGWR,CKPT,ARCH 触发条件 总结
一. DBWR写磁盘数据触发条件 1. 当进程在辅助LRU链表和主LRU链表上扫描以查找可以覆盖的buffer header[空闲缓冲区]时,如果已经扫描的buffer header的数量到达一定的 ...
随机推荐
- android在全屏下第一次触摸屏幕没有触发事件
A.设置全屏的方法很多就不多说了,常见如下两种(记录用以备忘): 1.在Androidmanifest.xml文件中设定,如: <activity android:name="com. ...
- Java 利用初学知识 写出自己的名字
- 2D空间中求一点是否在多边形内
参考自这篇博文:http://www.cnblogs.com/dabiaoge/p/4491540.html 一开始没仔细看做法,浪费了不少时间.下面是最终实现的效果: 大致流程: 1.随便选取多边形 ...
- Auty自动化测试框架第五篇——框架内部的调用支持、自动化安装库与配置说明
[本文出自天外归云的博客园] 本次对Auty自动化测试框架做些收尾工作,由于在scripts文件夹中的脚本会需要调用其他包结构文件夹中的脚本,所以这里需要添加一下框架对于内部脚本间互相调用的支持,这里 ...
- excel如何用公式判断单元格的值是否为数字、英文、中文,以及相应的计数
一.excel如何用公式判断单元格的值是否为数字.英文.中文. A列为数据列,B列为判断列=LOOKUP(CODE(ASC(A1)),{48,65,123;"数字","英 ...
- python os模块(1)
os模块主要处理文件和目录(文件夹)的创建.删除.检查判定.属性值修改.路径修改. (1)获取当前目录的两种方法 1 os.getcwd() os.path.abspath('.') (2)创建文件夹 ...
- 没有技术说明文档的开源都是耍流氓:微软Roslyn编译即服务在CIIP中具体应用(上)
前段时间我发布了 github开源:企业级应用快速开发框架CIIP WEB+WIN+移动端,很多园友们都表示支持并与我探讨相关技术问题,上篇中我也承诺会写相关的技术文章,本篇就来介绍一下建模模块中使用 ...
- 《BI那点儿事》数据流转换——多播、Union All、合并、合并联接
建立测试数据: CREATE TABLE FactResults ( Name ) , Course ) , Score INT ) INSERT INTO FactResults ( Name , ...
- 翻译:打造基于Sublime Text 3的全能python开发环境
原文地址:https://realpython.com/blog/python/setting-up-sublime-text-3-for-full-stack-python-development/ ...
- vi/vim基本使用方法
vi/vim 基本使用方法本文介绍了vi (vim)的基本使用方法,但对于普通用户来说基本上够了!i/vim的区别简单点来说,它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所 ...