position定位:absolute绝对定位,relative相对定位,fixed固定定位,sticky粘性定位,grid,flex

绝对定位，相对定位

fixed固定定位

粘性定位效果图

——————————————分割线—————————————

1. display:flex; //把盒子转成弹性行元素，窗口width变小盒子跟着变小。

1. place-content: center; //盒子主轴左往右居中两端剩余空间对齐
2. place-content: space-between; //容器两侧对齐，中间的自动分配
3. place-content: space-around; //容器平均分配剩余空间
4. place-content: space-evenly; //每个容器间隔空间相等

1. //主轴（左往右），交叉轴（上往下）
2. flex-direction: row ;//盒子主轴左往右排列
3. flex-direction: column; //盒子交叉轴上往下排列
4. //flex-flow: 主轴方向 换行;
5. flex-wrap: nowrap; //当窗口装不下盒子，盒子被挤压。
6. flex-wrap: wrap; //当窗口装不下盒子自动换行，盒子不被挤压。前面两个可以用flex-flow: row nowrap;代替
7. /*------------flex:none;用于PC完全失去响应式-----------*/
8. flex-grow:1; //允许放大盒子
9. flex-shrink:0; //不允许收缩盒子
10. flex-basis: auto; //主轴的宽度，优先级大于width。
11. /*---可以简写flex:1 0 auto---双值flex: 1 350px;可以固定值---*/

1. place-items: center; //上下居中

1. div > div:first-of-type {
2. order: 3;
3. }
4. //第一盒子放到第三个位置

——————————————————————————

grid网格容器二维空间

1. display:grid; //转成grid容器
2. grid-template-columns: 10em 10em 10em; //有3列，每列10em
3. grid-template-rows: 10em 10em 10em; //有3行，每行10em
4. /*简化写法*/
5. grid-template-columns: repeat(3,10em)
6. grid-template-rows: repeat(3,10em);

1. grid-template-column: //划分列
2. grid-template-rows: //划分行
3. grid-auto-flow: //隐式项目排列方式
4. grid-auto-rows: //隐式项目行高度
5. place-items: //项目在网格单元中的排列
6. place-content: flex-start center//剩余空间在项目中的分配
7. grid-row-gap: 20px;//设置行间距
8. grid-column-gap: 20px;//设置列间距