CSS移动端的知识回顾

常见布局

  1. 流式布局(百分比布局)–重点宽度
  • 加最大值或者最小值控制max-width/min-width
1
2
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

  • 二倍精灵图
  1. 将精灵图缩放为原来的一半
  2. 在测算距离
  3. 在缩放代码里面的精灵图大小background-size:缩放为原来的一半用px
  1. *flex布局

flex布局

  • 原理:给父级添加flex属性来控制子盒子
  • 弹性布局,任何一个容器都可以指定fiex布局
  • 当为父元素设为flex后,float,clear,vertical-align属性将失效
  • flex容器,孩子为flex项目(flex item)

flex父级属性

  1. flex-diection:设置主轴的方向
  • 默认主轴水平向右row,侧轴是水平向下的y轴
  • 翻转row-reverse
  • column主轴变为y轴
  1. justify-content设置主轴上的子元素排列方式flex-start/flex-end/center
  • sapce-around平分剩余的空间,space-between先两边贴边再分配剩余的空间
  • space-evenly将元素平均分配
  1. flex-wrap设置子元素是否换行,默认是不换行的(nowrap)wrap
  2. align-items设置侧轴上的子元素的排列方式(单行flex-start/flex-end/center/stretch
  3. align-content出现子项换行的情况,设置侧轴上的子元素的排列方式(多行),在单行下是没有效果的
  • flex-start
  • flex-end
  • space-between
  • space-around
  • stretch
  1. flex-flow:flex-direction,flex-wrap

flex子项属性

  1. flex子项目占的份数 flex=number默认为0从剩余空间分配份数
  2. align-self控制某个子项在侧轴上的的排列方式
  3. order数值越小越靠前,默认为0

背景渐变

  1. 背景线性渐变
    background:-webkit-linear-gradient(left,red,blue)

    查看例子

    1
    2
    background: -webkit-gradient(linear,left top,right top,from(#34c2aa),to(#6cd557));
    background: linear-gradient(to right,#34c2aa,#6cd557);