BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,而且与这个区域外部绝不相干。 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,而且有一套渲染规则,它决定了其子元素将如何定位,以及和其余元素的关系和相互做用。最多见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible
内部的Box会在垂直方向,一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每一个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,不然相反)。即便存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时,浮动元素也参与计算。(清除浮动)
==========css
Flash Of Unstyled Content 无样式内容闪烁
什么是FOUC(文档样式短暂失效)? 若是使用import方法对CSS进行导入,会致使某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。 缘由大体为: 1,使用import方法导入样式表。 2,将样式表放在页面底部 3,有几个样式表,放在html结构的不一样位置。 其实原理很清楚:当样式表晚于结构性html加载,当加载到此样式表时,页面将中止以前的渲染。 此样式表被下载和解析后,将从新渲染页面,也就出现了短暂的花屏现象。 解决方法: 使用LINK标签将样式表放在文档HEAD中。
是表现与结构相分离的一种方式 对搜索引擎友好 标题 列表 段落 表格 使总体结构清晰,主次分明
减小请求:文件压缩,图片合并, 资源GZip css置头,js置尾 多域名负载均衡 CDN托管 服务器配置缓存时间
标准模式(strict mode) 采用W3c标准解析 接近标准模式(almost standards mode) 经常使用解析方式 有doctype 混杂模式(quirks mode) 采用自身方式解析 宽松兼容 没有doctype js判断 docoment.compatMode=='strict' docoment.compatMode=='quirks'
提供自定义的属性 对象的dataset属性获取 经过 getAttribute方法获取
重置浏览器的CSS默认属性 使每一个浏览器的默认样式显示一致