一、布局

布局就是对页面的功能区域进行规划与划分，规定页面元素的区域大小和位置。

二、布局方式

  1. table 布局
  2. div + css 布局

css ：   1. float浮动     2.position定位（绝对 相对 固定）

3.flex 弹性盒布局

三、定位position

定位就是确定元素的位置，定位永远没有绝对的位置，都有参考系。

  1. 绝对定位 absolute
  2. 相对定位 relative
  3. 固定定位 fixed

定位时，修改元素位置，使用 top bottom left right 属性。

一、绝对定位

页面的视口（viewport：页面的可见区域），top bottom left right：这四个属性用于描述元素的四边，距离视口的四边的距离。

绝对定位参考系可以修改，在父元素上添加定位属性，修改之后的参考系将变为父元素的上下左右边框。

二、相对定位

使用定位前的初始位置，就是相对定位的参考位置，top bottom left right：这四个属性用于描述元素初始位置到元素移动后的实际位置的距离。

三、固定定位

和绝对定位相同，但是无法修改参考系，top bottom left right：这四个属性用于描述元素的四边，距离视口的四边的距离。

四、flex布局

在一个父元素下有多个子元素，同时需要对多个子元素进行排列时就可以使用flex布局。

父元素上的属性

  1. display: flex 开启flex布局
  2. justify-content: 主要轴对齐方式
  1. flex-start: 对齐主轴起点
  2. flex-end: 对齐主轴终点
  3. center：居中
  4. space-around: 子元素主轴上间距相等排列
  5. space-between: 两端对齐，中间均匀分布
  6. space-evenly: 均匀分布
  1. align-items: 交叉轴对齐方式
  1.  flex-start: 对齐交叉轴起点
  2. flex-end: 对齐交叉轴终点
  3. center：居中
  4. stretch：在交叉轴上拉伸填满（前提是，元素的交叉轴的宽度或高度不固定）
  1. flex-direction: 设置主要轴方向
  1. row 从左到右
  2. row-reverse 从右到左
  3. column 从上到下
  4. column-reverse 从下到上

子元素上的属性

  1. align-self: 当前子元素在交叉轴上的对齐方式， 取值和 align-items 相同
  2. flex-grow: 让子元素成长，意思是，若主轴有剩余空间，那么子元素撑满剩余空间