day7-8 position、flex、两列布局、三列布局 - 好文

<>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>

热门工具换一换