<>postion

* position:static 静态定位|常规定位|自然定位
作用 使元素定位于常规流/自然流之中
特点 1:忽略trbl或者z-index声明
2:两个相邻的元素之间的外边距会重叠
3: 具有固定width、height的元素,如果把左右外边距设置为auto,则左右外布距会自动扩大占满剩余宽度
* position:relative 相对定位
作用 是元素变成可定为的祖先元素
特点 1:可以使用trbl或者z-index进行定位
2:相对定位元素不会脱离文档流
3:任何元素都可以设置为相对定位,他的绝对定位后代都可以相对与他进行绝对定位
4:可以使浮动元素发生偏移,并控制他们的堆叠顺序
* position:absolute 绝对定位
作用 使元素脱离常规流
特点 1:脱离常规流
2:设置尺寸要注意百分比是基于谁的-最近定位的祖先元素
3:trbl如果设置为0,他将对齐到最近定位祖先元素的各边
4:trbl如果设置为auto,他将恢复为常规流
5:如果没有设置最近定位祖先元素,则会认为body为自己最近的祖先元素
6:z-index可以控制堆叠顺序
* position:fixed 固定定位
作用 基本和绝对定位区别不大
特点 1:固定定位元素不会随着视口的滚动而滚动
2:继承绝对定位特点
* 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案例:两列布局案例
<https://freeheart.xyz/ife-2018/base/day7-8/test/11-%E4%B8%A4%E5%88%97%E5%B8%83%E5%B1%80.html>

<>三列布局

1-两列布局案例
<https://freeheart.xyz/ife-2018/base/day7-8/test/7-%E4%B8%89%E5%88%97%E5%B8%83%E5%B1%80.html>
2-两列布局案例
<https://freeheart.xyz/ife-2018/base/day7-8/test//8-%E4%B8%89%E5%88%97%E5%B8%83%E5%B1%80.html>
3-两列布局案例
<https://freeheart.xyz/ife-2018/base/day7-8/test/7-%E4%B8%89%E5%88%97%E5%B8%83%E5%B1%80.html>
圣杯布局
<https://freeheart.xyz/ife-2018/base/day7-8/test/12-%E7%BB%83%E4%B9%A0%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80.html>
双飞翼布局
<https://freeheart.xyz/ife-2018/base/day7-8/test/14-%E5%8F%8C%E9%A3%9E%E7%BF%BC%E5%B8%83%E5%B1%80-%E6%9C%80%E4%BD%B3%E6%8E%A8%E8%8D%90.html>
三种自适应三栏布局:
绝对定位法
<https://freeheart.xyz/ife-2018/base/day7-8/test/15-3%E5%88%97%E5%B8%83%E5%B1%80%20(1).html>
margin负值
<https://freeheart.xyz/ife-2018/base/day7-8/test/15-3%E5%88%97%E5%B8%83%E5%B1%80%20(2).html>
浮动本身
<https://freeheart.xyz/ife-2018/base/day7-8/test/15-3%E5%88%97%E5%B8%83%E5%B1%80%20(3).html>