移动端web开发之流失布局、flex布局

移动端web开发之流失布局、flex布局

  • 1 视口
    • 1.1 布局视口 layout viewport
    • 1.2 视觉视口 visual viewport
    • 1.3 理想视口 ideal viewport
    • 1.4 总结
    • 1.5 meta视口标签
    • 1.6 标准的viewport设置
  • 2 二倍图
  • 3 移动端技术解决方案
    • 3.1 移动端浏览器
    • 3.2 CSS初始化 normalize.css
    • 3.3 CSS3 盒子模型 box-sizing
    • 3.4 特殊样式
  • 4 移动端常见布局
    • 4.1 单独制作移动端页面
    • 4.2 响应式页面兼容移动端
  • 5 流式布局(百分比布局)
  • 6 flex布局
    • 6.1 传统布局与flex布局
    • 6.2 flex布局原理
    • 6.3 flex布局父项常见属性
      • 6.3.1 flex-direction 设置主轴的方向(重点)
      • 6.3.2 justify-content 设置主轴上的子元素排列方式 (重点)
      • 6.3.3 flex-wrap 设置子元素是否换行(重点)
      • 6.3.4 align-items 设置侧轴上的子元素排列方式(单行 )(重点)
      • 6.3.5 align-content 设置侧轴上的子元素的排列方式(多行)(重点)
      • 6.3.6 align-content 和 align-items 区别
      • 6.3.7 flex-flow
    • 6.4 flex布局子项常见属性
      • 6.4.1 flex 属性(重点)
      • 6.4.2 align-self 控制子项自己在侧轴上的排列方式
      • 6.4.3 order 属性定义项目的排列顺序
  • 7 背景线性渐变

你可能感兴趣的:(前端学习,前端,html5,css3,html,css)