CSS FC布局指南

FC（Formatting Context）格式化上下文，其实指的是一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。

• 块级格式化上下文( Block formatting contexts )( BFC )
• 行内格式化上下文( Inline formatting contexts ) ( IFC )
• 自适应格式化上下文( Flex Formatting Contexts )( FFC )（CSS3新增）
• 网格布局格式化上下文( GridLayout Formatting Contexts )( GFC )（CSS3新增）

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。 格式化上下文指的是初始化元素定义的环境。包含两个要点，元素定义的环境和初始化。 在 CSS 中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inline formatting context )。 这两种上下文定义了在 CSS 中元素所处的环境，格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。

最常用的布局:

• 弹性盒子布局
• 普通文档流布局

移动端开发可以优先考虑flex布局

BOX:CSS布局的基本单位

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子： a：block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context； c：inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

1.2 弹性盒子布局

弹性盒子(Flex Box) 弹性布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

flex布局示例

<div style="display: flex">
    <div style="flex: 3"></div>
    <div style="flex: 1"></div>
</div>
复制代码

以下为外层容器6大属性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

概念: 主轴 交叉轴

1.3 普通文档流布局规则

1. 浮动的元素是不会被父级计算高度
2. 非浮动元素会覆盖浮动元素的位置
3. margin会传递给父级
4. 两个相邻元素上下margin会重叠

盒模型

盒模型的组成大家肯定都懂，由里向外content,padding,border,margin。 盒模型是有两种标准的，一个是标准模型，一个是IE模型。

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;
复制代码

盒模型的问题，BFC来处理。

1.4 块格式化上下文 BFC

具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。

解决了什么问题：

• 可以解决元素塌陷、折叠等问题
• 自适应两栏布局
• 主要是父子、兄弟之间的布局关系

触发BFC的方式：

• overflow: hidden; 可以清除子元素浮动，Ps“你乱动我就消灭你”
• 其他的包括：float不为none时，position的值不为static或releative

常用布局实例

移动端：

• 粘连布局（footer 底部固定布局）
• 单列块容器边距差异布局
• 双飞翼布局

pc端：

• 多列自适应布局
• 圣杯布局
• 等高布局

2.图文排版

1. 文字和图片同一中间水平线

<img id='close' style='vertical-align:middle;' src='/images/declear.gif'  />
复制代码

3. sass 和 less区别是什么？

1. Sass变量必须是$开始，而Less变量必须使用@符号开始 。
2. Sass是基于 Ruby 的语言，功能更加强大

问答

什么是响应式布局？ 三种基本的布局类型，分别是固定布局、流式布局和弹性布局

垂直水平居中

• 使用Flex

只需要在父盒子设置：display: flex; justify-content: center;align-items: center;

• 使用 CSS3 transform

父盒子设置:display:relative Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

• 使用 display:table-cell 方法

父盒子设置:display:table-cell; text-align:center;vertical-align:middle; Div 设置: display:inline-block;vertical-align:middle;

• 3.1 浮动（float）
• 3.2 层叠（z-index）
• 3.3 溢出（overflow）
• 3.4 resize（notIE）（CSS3）
• 3.5 分栏（column）（IE10+ notOperaMini）（CSS3）