css定位布局、grid布局、flex布局

 

1. css定位布局

1. Css定位布局可以将一个元素精确地放到页面指定得地方。联合定位和浮动，能够创建多种高级而精确的布局。其中定位布局有四种方式：固定定位fixed、相对定位relative、绝对定位absolute、静态定位static。

Position：fixed  //以上四种选择

1. 固定定位：fixed

Position：fixed；

Top:1px;

Bottom:1px;

Left:1px;

Right:1px;

固定定位结合top、bottom、left、right、即顶部底部左右四个属性来设置元素相对于浏览器页面的位置让元素处在这个固定的位置

1. 相对定位relative

position：relative；相对定位是指该元素相对于它的起始位置计算而来的

Position：relative；

Top:1px;

Bottom:1px;

Left:1px;

Right:1px;

相对定位同样要设置顶部底部左右四个属性，相对定位是相对于起始位置而言

与固定定位相比：固定定位固定在浏览器页面，相对定位可以相对于这个元素没设置相对定位时的默认位置，比如没设相对位置时默认在某个位置，设了之后是相对于没设置位置之前的位置而改变的。

1. 绝对定位absolute

Position:absolute;绝对位置应用较广泛，能精确定位到任意想要的位置。

Position：absolute；

Top:1px;

Bottom:1px;

Left:1px;

Right:1px;

绝对定位靠这四个属性相对于浏览器的位置

给一个元素设置了绝对定位，那么这个绝对元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素保存在，这个元素浮于其它元素上面，已经完全独立出来了。

1. 静态定位：static

元素没设置position属性时默认为静态定位，就是说这个属性的position值默认为static。比较少用，因为不设position属性它就默认为static，不过想要让其他属性从其它定位方式变成静态定位就用position：static；来实现就可以了。

2.grid布局

.grid{

    width:1000px;

    height:1000px;

    background-color:antiquewhite;

   

    display:grid; /*开启grid布局，容器的直接子元素会自动成为grid布局的元素*/

    grid-template-columns: 1fr 2fr 1fr;/*指定每列的宽度px可以是固定宽度，

    也可以是用fr指定浮动宽度*/

    column-gap: 24px;/*列间距*/

    row-gap: 24px;/*行间距*/

    /*align-items:center;*//*居中对齐*/

    /*align-items:end;*//*下对齐  align垂直上*/

    /*justify-items:center;*//*水平方向上*/

    align-content:center;/*小于容器时*/  

}

grid-template-area：也可以去了解一下，不过不知道为什么我在谷歌浏览器上运行不出我想要的效果，可能兼容性不行。

3.flex弹性布局

1. 前提：给父元素设置display:flex;

2.flex-direction:确定主轴方向

row：主轴方向为水平方向，起点在左端

row-reverse:主轴方向为水平方向起点为右端

column:主轴方向为垂直方向，起点在上边

column-reverse：主轴方向为垂直方向，起点在下边

3.flex-wrap:是否换行

nowrap:不换行

wrap：换行第一行在上方

wrap-reverse:换行第一行在下方

4.justify-content:主轴对齐方式

Flex-start:轴起点对齐

Flex-end：轴终点对齐

Center: 居中但没有间隔

space-between：俩端对齐，中间间隔元素相等

space-around：分散对齐

space-evenly：每个元素俩测的间隔相等

1. align-items:交叉轴对齐方式

Flex-start:轴起点对齐

Flex-end：轴终点对齐

Center: 居中

Baseline:项目的第一行文字基线对齐

1. align-content:调整换行对齐方式（只有多行才有效果）

1. Flex和flex-grow:分配剩余空间或者设置子元素比列