css 常用效果

• 等分排列

 display: flex;
 justify-content: space-between;

  space-around  左右 不同item之间都有等分空白 
  space-between 左右贴紧 仅不同Item之间有等分空白

• 自动换行

  display: flex;
  flex-flow: wrap;
  /*规定自动换行的处理方法 
  break-all	允许在单词内换行。
  keep-all	只能在半角空格或连字符处换行。*/
  word-break: break-all;
  	/*break-word许长单词或 URL 地址换行到下一行*/
  word-wrap:break-word;
  

• 渐变

   background:  linear-gradient(to bottom, #000000 0%,#ffffff 100%);
  

• 分块设置背景

  background-image: linear-gradient(to bottom, #72DAF8 390rpx, #f2f2f2FF 0);
  

• 动态计算高度 calc( 100vh - 64px); 要有空格！！！！