页面布局

一、移动端页面的布局

1.流式布局
2.flex弹性布局
3.less+rem+媒体查询布局
4.混合布局
5.响应式布局

一、流式布局

流式布局容器：宽度百分百，适合于单独做移动端开发

二、flex弹性布局

flex弹性布局：任何一个容器都可以指定为flex布局，当父盒子为flex布局以后，子元素的float、clear和vertical-align属性将失效
布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex布局父元素常见属性：

• flex-direction
  设置主轴的方向
• justify-content
  设置主轴上的子元素排列方式
• flex-wrap
  设置子元素是否换行
• align-content
  设置侧轴上的子元素的排列方式（多行）
• align-items
  设置侧轴上的子元素的排列方式（单行）
• flex-flow
  复合属性，相当于同时设置flex-direction flex-wrap
  默认主轴x轴方向，水平向右，默认侧轴y轴方向，水平向下
• row column
  row 默认从左到右,column 从上到下
• justify-content
  主轴
  使用之前确定好主轴
• flex-start
  默认值，从头部开始
• flex-end
  默认值，从尾部开始
• center
  在主轴居中对齐
• space-around
  平分剩余空间
• space-between
  先两边贴边在评分剩余空间
• flex-wrap
  默认不换行，如果放不下会缩小子元素宽度
• nowrap wrap
  nowrap 不换行 wrap 换行
• align-items
  默认y轴（侧轴，子元素单行时）
• flex-start
  默认，从上到下
• flex-end
  从上到下
• center
  挤在一起居中（垂直居中）
• stretch
  拉伸（子盒子不需要给高度）
  侧轴
• align-content
  侧轴，换行时
• flex-start
  侧轴头部开始排列
• flex-end
  侧轴尾部开始排列
• center
  侧轴中间显示
• space-around
  子项在侧轴评分剩余空间
• space-between
  子项在侧轴先分布在两头，再平分剩余空间
• stretch
  设置子项元素高度平分父元素高度
• flex-flow
  wrap column
  flex布局子元素常见属性：
• flex
  子项目占的分数
• align-self
  控制子项目自己在侧轴的排列方式
• order
  属性定义子项目的排列顺序（前后顺序）数字越小越靠前，默认为0

三、less+rem+媒体查询布局

less：是一门css预处理语言
rem:相对点位，基准是相对于html元素的字体大小

四、响应式页面

响应式开发：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
响应式需要一个父级作为布局容器来配合子元素来实现效果
响应式布局容器 container

1.媒体查询

2.bootstrap

bootstrap:栅格系统，前端开发框架

五、css3移动端固定模式开发

    
    
    
    


 

  固定模式布局