- 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
平时由于项目需要展示的角度不同，前端总是会涉及到各种各样的布局，这就要我们对每一种布局都有一定的了解，才能选择最为合适的布局来进行开发，本系列就来对各种布局进行复习和梳理。
书接上文前端布局系列（二）
6.transition：用于设置元素的样式过度，和 animation 类似，但细节有很大不同。
<!DOCTYPE html>
<html lang="en">
<head>
<title>transition</title>
<style>
#box {
height: 100px;
width: 100px;
background: green;
transition: transform 1s ease-in 1s;
}
#box:hover {
transform: rotate(180deg) scale(.5, .5);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
transform：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画没什么关系。
translate：只是 transform 的一个属性值，即移动。
7.什么是BFC？BFC的布局规则是什么？如何创建BFC？BFC应用？
BFC 是 Block Formatting Context 的缩写，即块格式化上下文。BFC是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。 布局规则：Box是CSS布局的对象和基本单位，页面是由若干个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。
创建：浮动元素 display：inline-block position:absolute
应用: 1.分属于不同的BFC时,可以防止margin重叠 2.清除内部浮动 3.自适应多栏布局
display:flow-root 可以设置为 BFC
感兴趣的童鞋，可以继续关注后续文章。
