【每日前端】BFC / IFC / 布局 / 响应式

[jctang1202]

BFC

块格式化上下文 （BFC）- Web开发者指南 | MDN

不同的盒子使用的是不同的格式化上下文（formatting context）来布局，每个格式化上下文都拥有一套不同的渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。就如使用不同的容器来装水一样，呈现出来的形态也将不一样。

最基本的两个格式化上下文分别为：块格式化上下文（block formatting context 简称 BFC）和行内格式化上下文（inline formatting context 简称 IFC）

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
http://lucybain.com/blog/2015/css-block-formatting-context/
http://layout.imweb.io/article/formatting-context.html
http://coding.imweb.io/demo/p3/vfm/bfc.html

IFC

当块容器盒（block container box）不包括任何块级盒（block-level boxes）时，就会创建一个行内格式化上下文（IFC）。

IFC 规定的是行内级子元素的排列方式，其渲染规则比较多，这里把几个重要点简单罗列如下：

• 盒子一个接一个的在水平方向摆放，当容器宽度不够时就会换行；
• 每一行将生成一个匿名行盒（line box），包括该行的所有行内级盒；
• 水平方向上，当所有盒的总宽度小于匿名行盒的宽度时，那么水平方向排版由 text-align 属性来决定；
• 垂直方向上，行内级盒的对齐方式由 vertical-align 控制，默认对齐为 baseline；
• 行盒的高度由内部子元素中实际高度最高的盒子计算出来，值得注意的是，行内盒（inline boxes）的垂直的 border，padding 与 margin 都不会撑开行盒的高度。

http://coding.imweb.io/demo/p3/vfm/ifc-vertical-align.html
http://coding.imweb.io/demo/p3/vfm/ifc-height.html

布局

深入浅出 CSS 布局_CSS 布局从入门到精通
http://layout.imweb.io/

CSS布局说——可能是最全的 · Issue #36 · laizimo/zimo-article
laizimo/zimo-article#36

响应式

移动前端开发之viewport的深入理解 - 无双 - 博客园
http://www.cnblogs.com/2050/p/3877280.html