布局分类有

1.float 浮动

浮动元素的顶部，在标准文档流的底部

2.position 定位

• relative 相对定位：相对原来位置，便宜一定距离

• absolute 绝对定位：相对position不为static的父元素，偏移一定距离

• fixed 固定定位：相对浏览器定位

• static 没有定位：

3.flex布局

父元素属性

• flex-direction 主轴方向

  row                 行排布
  row-reverse         同一行反向排布
  column              列排布
  column-reverse      同一列反向排布

• justify-content 主轴子元素排列

  flex-start          从头部排列
  flex-end            从尾部排列
  center              居中排列
  space-around        平分剩余
  space-between       两边贴边，平分剩余

• align-items

  flex-start          从上到下
  flex-end            从下到上
  stretch             拉伸（子元素去掉高度）
  center              居中

• flex-wrap属性

  wrap    换行
  no-wrap    不换行

• flex-flow 属性： 复合属性，flex-direction和flex-wrap

  flex-flow:row-wrap

• align-content属性

  flex-start      侧轴头部排列
  flex-end        侧轴尾部排列
  center          居中排列
  space-around    恻轴平分空间
  space-between   

4.grid布局

grid-template-columns属性:

.grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;            #各占三分之一
    column-gap:24px;                    #列间距
    row-gap:24px;                        #行间距
}

justify-items 水平方向上对齐子元素:

center        居中对齐
end            靠右对齐
space-between    两端对齐

justify-content 对轨道水平方向对齐:

center               居中对齐
end                    靠右对齐
space-between         两端对齐

align-content 对轨道竖直进行对齐:

center        居中对齐
end            靠下对齐