移动web的三种布局方式

1、 圣杯布局：
又称为双飞翼布局，盒子内部分左中右三部分，左右固定宽度，中间区域自适应
设置方式： 给父盒子设置：
width: 100%
padding: 0 rightpx 0 leftpx
//此处的left和top应为实际值
box-sizing: border-box
给里面的子盒子设置（三个盒子）
将两个盒子定位，左右盒子需要放在父盒子的padding区域，中间盒子自适应
2、flex布局(弹性盒子)：
属于c3属性，兼容性不好（简化布局，只能在移动端使用，pc端还使用传统布局）
display: flex 让大元素里的小元素在一行显示 （由大盒子控制小盒子）
felx布局中，元素默认沿着主轴的方向显示，元素占满一行后不会换行而是自动伸缩，
全部挤在第一行，要想换行使用flex-wrap: wrap
设置flex布局后，子元素的float.clear.vertical-align属性会失效
2.1设置flex-direction,可以设置主轴方向
默认为row盒子并排从左往右显示
flex-dorection: row-reverse 从右往左
flex-direction: column 从上往下
flex-direction: column-reverse 从下往上
2.2 justify-content设置的元素沿着主轴的显示发放时，没有修改主轴方向
justify-content: flex-end 盒子内容并排移动到最右侧 顺序不变
justify-content： center 盒子里的内容永远居中显示
justify-content： space-between 每个元素间以空白填充 空白的尺寸是相同的
justify-content： space-around 每个元素都有相同的左右间距
2.3 align-items 用于设置元素咋侧轴上的对齐方式
align-items: flex-start 侧轴的起点对齐
align-items: flex-end 侧轴的终点对齐
align-items: center 侧轴的中点对齐
align-items: baseline 项目的第一行文字的基线对齐
align-items: strech(默认值) 如果项目为设置高度或设为auto自动，将占满整个容器的高度，如果设置了高度，这个属性就没有效果，侧轴拉伸
2.4 flex-wrap 如果一条轴线拍不下如何换行
flex-wrap: nowrap 不换行
flex-wrap: wrap 换行
flex-wrap: wrap-reverse 换行，且往上一行换
2.5 align-content: center; 与交叉轴的起点对齐

3. 响应式布局（媒体查询 bootstrap）
利用媒体查询的方式，检测不同设备，设置不同的css代码实现
超小屏幕（手机） 768px以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px以上
媒体查询需在link中设置<link rel=”stylesheet” href=”test1.css” media=”only screen and (width:760px)”>