CSS学习(二)- 有关 hasLayout 和 BFC
1. hasLayout
- 概念说明
- ‘Layout’ 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout 。
- ‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ,如 object.currentStyle.hasLayout 。
- ‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中,一个元素要么自己对自身的内容进行组织和计算大小, 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾,渲染引擎采用了 ‘hasLayout’ 属性,属性值可以为 true 或 false。 当一个元素的 ‘hasLayout’ 属性值为 true 时,我们说这个元素有一个布局(layout),或拥有布局。
- 触发方式
- 默认拥有布局的元素:
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee> - 可触发 hasLayout 的 CSS 特性:
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值) - IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout :
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值,仅用于块级元素)
overflow-x: (除 visible 外任意值,仅用于块级元素)
overflow-y: (除 visible 外任意值,仅用于块级元素)
position: fixed - IE6 以前的版本(也包括 IE6 及以后所有版本的混杂模式,其实这种混杂模式在渲染方面就相当于 IE 5.5), 通过设置任何元素的 ‘width’ 或 ‘height’(非auto)都可以触发 hasLayout ; 但在 IE6 和 IE7 的标准模式中的行内元素上却不行,设置 ‘display:inline-block’ 才可以。
- 默认拥有布局的元素:
2.Block Formatting Contexts(BFC)
IE有它自己的hasLayout属性,那么非IE浏览器呢?非IE浏览器采用的就是BFC(块格式化上下文)
- 概念说明
- BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
- 在创建了 BFC的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在BFC中相邻的块级元素的垂直边距会折叠(collapse)。
- 在BFC 中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的BFC。
- 在CSS3中,对这个概念做了改动:http://www.w3.org/TR/css3-box/#block-level0CSS3中,将BFC 叫做 flow root。
- 触发方式
float:(任何值除了none)
overflow:(任何值除了visible)
display:(table-cell/table-caption/inline-block)
position:(任何值除了static/relative)
Tips:我们有时会用overflow:hidden的方法去清除浮动,就是因为触发了元素的块格式化上下文(IE6 7要申明zoom为1),这个方法的确简单,但很暴力 – -#
3.hasLayout和BFC的作用
如果父元素的子元素有浮动,那么在父元素上激活hasLayout和BFC就可以清除浮动了,最长见的是设置样式zoom:1(IE6下激活hasLayout),overflow:hidden(激活标准浏览器下的MFC).
常规流元素
常规流元素.bfc{zoom:1; overflow:hidden}
先说一下margin边距重叠触发的条件:两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。这里的毗邻是指:没有被非空内容、padding、border 或 clear 分隔开。在没有被分隔开的情况下,父元素margin-top和普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻; 在这个元素的 height 是 “auto” 的情况下,它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。以及普通流中非浮动元素等兄弟元素间的上下边距之间也会重叠。
那怎么清除边距重叠呢,方法如下:
1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠(注意这里指的是上下相邻的元素)
2.创建了BFC块级格式化上下文的元素,不和它的子元素发生 margin 折叠(注意这里指的是创建了BFC的元素和它的子元素不会发生折叠)
这里我们需要指出的是:相邻元素不发生折叠的因素是触发BFC因素的子集,也就是说如果我为上下相邻的元素设置了overflow:hidden,虽然触发了BFC,但是上下元素的上下margin还是会发生折叠参考文章:
CSS学习(二)- 有关 hasLayout 和 BFC的更多相关文章
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- HTML/CSS学习(二)
续...... ============================================================================================ ...
- css 讲浮动,haslayout,BFC的文章
这篇专门讲BFC和haslayout的 这篇就不用说了,讲浮动的,张鑫旭大神的 , 这一系列有三篇
- CSS学习(二)
display : block inline-block inline block此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被显示为内联元素,元素前后 ...
- html&css学习二
表格&b标签 表格 表格标签主要包含三个标签 <table> <tr> <td>单元格内的文字</td> ... </tr> ... ...
- css学习归纳总结(二) 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- (转载)CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- 如何提高码农产量,基于ASP.NET MVC的敏捷开发框架之移动端开发随笔二
前言 在前一篇文章中我已经做过开篇,接下来的随笔会详细讲一下我们的开发框架是如何实现的,专业的事由专业的人来讲,以后就由我们的高级码农小李英文名查尔斯和他的师父厂长(因为姓陈,酷爱摄影,我们的文艺片都 ...
- SVN安装中遇到的问题
新的版本:1.9.5 必须使用Apache Portable Runtime Utility 1.5.4 Released没有安装的话需要先安装 需要安装apr.apr-util sqlite zli ...
- TSynDBDataSet内存表
TSynDBDataSet内存表 SynDBMidasVCL.pas TSynDBDataSet = class(TCustomClientDataSet) Props := TSQLDBSocket ...
- 各版本IIS下ASP.net请求处理过程区别
ASP.NET是一个非常强大的构建Web应用的平台,它提供了极大的灵活性和能力以致于可以用它来构建所有类型的Web应用. 绝大多数的人只熟悉高层的框架如: WebForms 和 WebServic ...
- Coherence代理的负载均衡
Coherence在extend模式下,proxy的负载均衡机制官方解释是 Extend client connections are load balanced across proxy servi ...
- es6的模块化;js的模块化
现在感觉Java.Python.Js都是越来越工程花,模块化.懂得每个模块的功能和使用场景,你很快的就能搭起一个功能齐备的应用.至于应用的性能.稳定性等,还在于你对模块的理解深度以及组合的成熟度,就看 ...
- SlickGrid资料
SlickGrid简单介绍 : https://github.com/mleibman/SlickGrid/wiki 快速入门 : https://github.com/mleibman/SlickG ...
- vue-resource基本使用方法
一.vue-resource特点 1.体积小:vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2.支持主流 ...
- PHP性能优化大全
第一章 针对系统调用过多的优化 我这次的优化针对syscall调用过多的问题,所以使用strace跟踪apache进行分析. 1. apache2ctl -X & 使用-X(debug)参 ...
- require.js - 详解
测试结构如下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...