css 基础布局

d布局分类

1.float 浮动

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

1. 对div2进行浮动：浮动元素的顶部，在标准文档流的底部
2. 对div3和div3进行浮动：浮动元素会显示在同一行，依次排列
3. 对div2、div3和div4进行浮动：如果宽度不够，被浮动的元素会自动换行
4. 对div2、div4进行浮动：浮动元素的顶部，在标准文档流的底部

2.position 定位

• relative 相对定位：相对原来位置，偏移一定距离

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

  父相子绝：父元素relative，子元素absolute

• 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    换行
  nowrap    不换行

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

  flex-flow:row-wrap

• align-content属性 子元素整体，在父元素中的对齐方式

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

子元素属性

• flex属性 份数

  flex:1

• align-self属性 自己的对齐方式

  stretch			拉伸
  center			居中
  start			左对齐
  end				右对齐

• order属性 排序