1、块级元素与非块级元素

  1. 块级元素：css可以指定该标签宽高，占用一行空间 宽度没有设置时，默认为100%
  2.  常见块级元素：div、p、h、ul、ol、dl、table…
  3. 非块级元素：css无法直接指定其宽高，不占用一行，如font b i u span 等

2、dispaly样式

1)将非块级元素转化为块级元素:

  1. display:block  //将非块级转换为块级且独占一行    
  2. display:inline-block//将非块级转换为块级,不独占一行

2)隐藏标签

  1. display:none//将标签元素进行隐藏

3)弹性布局（display:flex ）


  1. display:flex  //将该元素的标签变成弹性盒子，可以用于控制盒子内的元素排列方式
  2.                           //默认为横向排列

4）排列方式：

  1. flex-direction:row 设置为横向排列|| column 设置为纵向排列

5）水平对齐方式

  1. justify-content:flex-start 设置盒子内元素默认水平左对齐 || flex-end 设置盒子内元素默认水平右对齐
  2. justify-content:center 设置盒子内元素水平居中对齐 
  3. justify-content:space-around 设置元素水平分隔对齐 距离侧边框有距离（水平间隔对齐）
  4. justify-content:space-between 设置元素水平分隔对齐 距离侧边框无距离

6）垂直对齐方式

  1. align-items:flex-start ||flex-end || center  //只能单独一行时使用items
  1.  align-content:flex-start ||flex-end || center  //有一行至多行使用content
  1. align-content:space-around 设置元素垂直分隔对齐 距离侧边框有距离(内容间隔对齐) 
  2. align-content:space-between 设置元素垂直分隔对齐 距离侧边框无距离

7）多行显示

  1. flex-wrap:wrap;  //如果单行占满，控制盒子内元素多行显示

8）元素占比

  1. flex-grow :数字; //控制元素在盒子内占比，如果想实现自适应效果可单独设置一个该属性值赋为1