flex布局实现叠在另一个div之上_CSS3布局（前端所必须要掌握）

CSS布局

传统方案是基于盒装模型，依赖display属性+position属性+float属性，但对于一些特殊布局（eg:垂直居中）就不容易实现。

补充：

块元素：出现在另一个元素下面的元素；

内联元素：出现在另一个元素旁边的元素，就像段落中的单个单词一样；

dispaly属性一些默认的display的值，段落之间样式默认值为：display:block；<a>元素默认为display:inline。

注：display:flex和display:grid在布局上比较重要。

1、Flex布局

• 弹性盒子(Flexbox)
  用于创建横向/纵向的一维页面布局，在其父元素上应用display:flex，所有直接子元素机会按照flex进行布局，但是子元素的float,clear,vertical-align属性将失效。

任何一个容器都可指定为flex布局。

.box {
 display: flex;
}
<div class="box">
 <div class="box1">one</div>
 <div class="box2">two</div>
 <div class="box3">three</div>