移动web开发布局方式

css盒模型

传统的盒子模型=width+padding+border
CSS3盒子模型的width包含了padding和border。
如果是CSS3盒子，需要添加box-sizing：border-box。

移动布局方式

流式布局（百分比布局）
原理：通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
可以设置最大值和最小值宽度和高度。
flex布局
原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
任何一个容器都可以指定为Flex布局。
当我们的父盒子为flex布局时，子元素的float、clear和vertical-align属性将失效。
常见的父项属性

flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式（多行）
align-items:设置侧轴上的子元素的排列方式（单行）
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

常见子项属性

flex:定义子项目分配剩余空间，表示占多少份数
align-self:控制子项在侧轴上的排列方式
order:定义项目的排列顺序，默认为0

rem布局
优点： 可以通过修改html里面的文字大小来改变页面中元素的大小
媒体查询可以针对不同的屏幕尺寸设置不同的样式。
less是一门CSS预处理语言，它扩展了css的动态特性。
less嵌套注意
如果有伪类、交集选择器、伪元素选择器内层选择器的前面没有&符号，则它被解析为父选择器的后代；
如果 有&符号，它就被解析为父元素自身或父元素的伪类。

---

运算符左右两侧必须要有一个空格隔开；两个数参与运算，如果只有一个数有单位，最后的结果就以这个单位为准；如果两个数都有单位，而且单位不一样，运算结果的值取第一个值的单位。
rem适配方案

1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
   rem实际开发适配方案
   rem查询+less技术：
   页面元素的rem值=页面元素值（px）/html font-size字体大小

---

响应式布局
原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
响应式布局容器
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。
原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstarp预先定义好了这个类，叫.container。