1. 布局

1.1 什么是FC

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

FC类型	描述
BFC	块级格式化上下文( Block formatting contexts )
IFC	行内格式化上下文( Inline formatting contexts )
FFC	自适应格式化上下文( Flex Formatting Contexts )（CSS3新增）
GFC	网格布局格式化上下文( GridLayout Formatting Contexts )（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大属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

概念: 主轴交叉轴

1.3 普通文档流布局规则

浮动的元素是不会被父级计算高度
非浮动元素会覆盖浮动元素的位置
margin会传递给父级
两个相邻元素上下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'  />

不同字号的文字垂直居中:1. line-height;

// 行距要使用倍数，不要用像素值
line-height: 1.5;

2.内容靠近底部

#container {
    position: relative;
    width: 400px;
    height: 300px;
    margin: 20px auto;
    background-color: #de5;
}
#innerFooter{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
<div id="container">
    <div id="innerFooter">始终垂直居于块元素底部的文字</div>
</div>

2.1 float后会脱离文档流的不占位置

<section class="standard-bank-card">
  <section class="subscript-container">
   <div style="float">此时当前元素不占用高度，会溢出 standard-bank-card </div>

3. sass 和 less区别是什么？

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

less 使用 Named Parameters lesscss.cn/features/#m…

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

4. border内轮廓

box-sizing:border-box;

问答

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

垂直水平居中

1.使用Flex

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

代码演示

2.使用 CSS3 transform

父元素设置:display:absolute

子元素设置: display:absolute; transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

代码演示

3.使用 display:table-cell 方法

父元素设置:display:table-cell; text-align:center;vertical-align:middle;

子元素设置: display:inline-block;vertical-align:middle;

这种方法不要在H5使用

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

圣杯padding和双飞翼margin异同

圣杯布局来源于2006年这篇文章，一代经典

圣杯布局代码演示

圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。

双飞翼布局来源于淘宝UED。双飞翼布局代码演示

很明显，左右侧已经飞起来了

对于双飞翼布局中的margin-left:-100%的理解

#left {
  width: 200px; 
  /*这里的百分比取决于什么？*/
  /*负边距的话，左边的就是-100%，相当于移动了一行，右边移动自己的width就可以了。*/
  margin-left: -100%;
  background-color: red;
}

这里的-100% 是指代码中的body, 如果container的width设置成固定值, 当body宽度变化时，left的起点则是固定的，造成left的位置随body宽度变化。这里有一个核心点“相当于移动了一行”

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

相同点（优先加载, 自适应留白）

虽然两者的实现方法略有差异，不过都遵循了以下要点：

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的<div>标签

不同点（本质差异margin,padding）

圣杯布局：借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分；子元素采用绝对定位。

双飞翼布局：给主要部分main-wrap添加一个外层元素main，其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间，像鸟的两个翅膀，与主要部分main脱离(main和main-wrap是下面双飞翼布局的元素id)。

本质差异是使用padding和margin来实现中间内容自适应宽度，两侧内容如何实现跟随适应。 研究经典问题的意义在于举一反三，触类旁通。可以将所有问题囊括起来研究。

h5工具

在线编辑器，代码在线预览

vue在线预览：jsrun.net/DfXKp/edit
codepen.io/
jsfiddle：需要科学上网
jquery：www.jq22.com/webide/

CSS FC布局指南