postion

1. position:static 静态定位|常规定位|自然定位

作用	使元素定位于常规流/自然流之中
特点	1：忽略trbl或者z-index声明 2：两个相邻的元素之间的外边距会重叠 3： 具有固定width、height的元素，如果把左右外边距设置为auto，则左右外布距会自动扩大占满剩余宽度

2. position:relative 相对定位

作用	是元素变成可定为的祖先元素
特点	1：可以使用trbl或者z-index进行定位 2：相对定位元素不会脱离文档流 3：任何元素都可以设置为相对定位，他的绝对定位后代都可以相对与他进行绝对定位 4：可以使浮动元素发生偏移，并控制他们的堆叠顺序

3. position:absolute 绝对定位

作用	使元素脱离常规流
特点	1：脱离常规流 2：设置尺寸要注意百分比是基于谁的-最近定位的祖先元素 3：trbl如果设置为0，他将对齐到最近定位祖先元素的各边 4：trbl如果设置为auto，他将恢复为常规流 5：如果没有设置最近定位祖先元素，则会认为body为自己最近的祖先元素 6：z-index可以控制堆叠顺序

4. position:fixed 固定定位

作用	基本和绝对定位区别不大
特点	1：固定定位元素不会随着视口的滚动而滚动 2：继承绝对定位特点

5. position:sticky 吸附定位

作用	relative与fixed的完美结合，制造出吸附效果
特点	1：如果产生偏移，原位置还是会在常规流中存有 2：如果他的最近祖先元素有滚动，那么他的偏移标尺就是最近的祖先元素 3：如果最近祖先元素没有滚动，那么的偏移标尺就是视口

flex

采用flex布局的元素，成为flex容器。他的所有元子元素自动成为容器成员，成为flex项目（flex-item）,简称“项目”

• 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
• 设置了 display: flex 的父元素（在本例中是
  ）被称之为 flex 容器（flex container）。
• 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是
  元素。
  flex相关布局属性

属性	作用	值
flex-direction	决定主轴的方向	row（默认）、row-reverse、column、columnu-reverse
flex-wrap	一条轴线排列不下，如何换行	nowrap(默认)不换行、wrap第一行在上方、wrap-reverse第一行在下方
flex-flow	是flex-direction与flex-wrap的缩写	默认值：row nowrap
justify-content	定义项目在主轴的对齐方式	flex-start:左对齐、flex-end:右对齐、center:居中、space-between:两端对齐,项目之间间距相等、space-around:每个项目两侧的间隔相等
align-items	定义项目在交叉轴上的对齐方式	flex-start:交叉轴的起点对齐、flex-end:交叉轴的终点对齐、center:交叉轴的中点对齐、baseline:项目的第一行文字基线、stretch（默认值）:项目未设置高度或者auto，将占满整个容器的高度
align-content	定义了多根轴线的对齐方式（一条轴线则失效）	flex-start:交叉轴的起点对齐、flex-end:交叉轴的终点对齐、center:交叉轴的中点对齐、baseline:项目的第一行文字基线、stretch（默认值）:轴线占满整个交叉轴

两列布局

见github案例：两列布局案例

三列布局

1-两列布局案例
2-两列布局案例
3-两列布局案例
圣杯布局
双飞翼布局
三种自适应三栏布局：
绝对定位法
margin负值
浮动本身