css体系

position: relative;
上父 下子 不给父元素默认似乎就是 body/page
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
左右上下居中 定位布局

父元素 display :flex
子元素 flex : 1 平分 不能和上面混用 如果子元素只有一个有撑开的效果

display: flex;当前盒子
align-items: center;当前盒子内元素 上下居中
justify-content: center;当前盒子内元素 左右居中
justify-content: space-around; //水平 均分
justify-content: space-between; //水平 靠两边
flex-wrap: nowrap;给父 子不换行
flex-shrink: 0 给子 子不受挤压

弹性盒中的 div 不会换行 自动为行内块
flex-direction: column; //变成弹性盒使 盒内元素依旧是块元素
flex-shrink: 0;//防止图片被挤压

flex-direction: column;//块元素自动垂直排列
justify-content: space-between; //上下对齐 结合 左右对齐 用于 卡片 左下 右下 布局
flex布局

line-height 上下居中 行内元素
line-height: 1.2;//表示字体的1.2倍

margin: 0 auto 左右居中 块
流体式布局

3者不可混用 弹性盒flex布局 流体式布局 定位布局

弹性盒 可以与 流体式布局 混用