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

<style>
      div {
        width: 250px;
        height: 250px;
        background: hotpink;
        position: absolute;
        left: 50px;
        top: 50px;
      }
      div > div {
        width: 200px;
        height: 200px;
        background: lawngreen;
        position: relative;
        left: 25px;
        top: 25px;
      }
      div > div > div {
        width: 150px;
        height: 150px;
        background: mediumaquamarine;
        position: relative;
        left: 25px;
        top: 25px;
      }
    </style>
    <div>
      <div>
        <div>1</div>
        2
      </div>
      3
    </div>

绝对定位，相对定位
fixed固定定位
粘性定位效果图

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

display:flex转成弹性块元素盒子

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

place-content 主轴排列(左右)，剩余的空间,进行分配。

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

flex配置，一维空间

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

place-items交叉轴排列（上下）

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

order移动当前盒子位置

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

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

grid网格容器二维空间

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

grid 隐式项目常用属性

grid-template-column: 划分列
grid-template-rows: 划分行
grid-auto-flow: 隐式项目排列方式
grid-auto-rows: 隐式项目行高度
place-items: 项目在网格单元中的排列
place-content: 剩余空间在项目中的分配

绝对定位，相对定位

fixed固定定位

粘性定位效果图

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

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

grid网格容器二维空间

更多相关文章

随机推荐