布局方式
1、流式布局（百分比布局）
通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，而内容则向两侧填充。
百分比宽度 = 目标元素的宽度 / 父级元素的宽度，高度的变化需要配合媒体查询。
图片百分比： 图片的宽度和高度比较弹性化。当图片不设置宽高时，则按原始大小显示；当设置图片百分比时，宽高的变化则是按等比例加载（建议设置上限值，以免超出）
2、rem布局
rem（root em），是一个相对单位，类似em，em是相对父级元素的字体大小，而rem则是相对于<html>元素的字体大小。
rem的优势：父元素的文字大小可能不一致，而整个页面只有一个<html>，通过媒体查询改变html根元素的字体大小，就可以整体改变所有页面中的文字大小。
媒体查询
媒体查询（Media Query），是CSS3中的新语法。通过使用媒体查询，可以针对不同的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式。
语法规范： @media mediatype and|not|only (media feature) { css样式 }
- 以@media： 开头
- mediatype ：媒体类型，取值有：all(默认，所有设备）、screen(PC、Pad、Phone)、 TV、print(打印机)
- 关键字： and | not | only（and指）
- media feature： 媒体特性，必须用小括号包裹 （width、min-width、max-width）
语法示例：有两种实现形式。
- 1、引入外部CSS文件
<link rel="stylesheet" href="mediaQuery.css" media="screen and (min-width: 768px)"> - 2、内部样式表中书写css代码片段的形式
@media screen and (min-width: 768px) { /* css样式 */ }
在写多个媒体查询时，为了防止混乱，媒体查询的条件最好按照从小到大或者从大到小的顺序写，一般习惯从小到大来写，代码显得更简洁
3、flex布局
flex(flexible box)，弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
父级容器设置为flex布局后，子元素的float、clear和vertical-align属性将失效。
在flex布局中，采用flex布局的元素，称为flex容器，其所有子元素则自动变为容器成员，称为flex项目（flex item）。
flex布局，其原理就是通过给父级元素增加flex属性，来控制子元素的位置和排列方式，从而实现元素的整体布局。
flex布局中常用的属性：
针对父级flex容器
-
flex-direction: 设置主轴方向（flex 项目的排列方向），flex布局中分主轴和侧轴，设置好主轴后，剩下的就是侧轴
属性值 描述 row 默认值，水平方向，从左往右 row-reverse 水平方向，从右往左 column 垂直方向，从上往下 column-reverse 垂直方向，从下往上
-
flex-wrap：设置flex项目是否换行
属性值 描述 nowrap 默认值，不允许换行 wrap 允许换行
flex-flow，是flex-direction和flex-wrap的复合属性，写法：flex-flow: row nowrap;
-
justify-content：定义flex 项目在主轴上的对齐方式
属性值 描述 flex-start 默认值，从起始位置开始 flex-end 从末尾开始 center 居中 space-around 平分剩余空间，每个项目两侧的边距相同 space-between 首尾两边贴边，再平分剩余空间 -
align-items：flex项目在侧轴上的排列方式，针对单行的flex-项目有效（默认侧轴为垂直方向）
属性值 描述 flex-start 默认值，从上往下 flex-end 从下往上 center 居中 baseline 基于基线对齐（文本底部之下，不常用） stretch 拉伸，若项目未设置高度或为auto时，将占满容器高度 -
align-content：针对多行flex项目（flex项目换行的情况）在侧轴上的排列方式（侧轴以垂直为例）
属性值 描述 flex-start 默认值，从上往下 flex-end 从下往上 center 居中 spece-around 项目在侧轴方向平分剩余空间，每个项目两侧的边距相同 space-between 在侧轴上，首尾两边贴边，再平分剩余空间 stretch 拉伸，所有flex项目的高度平分容器的高度
针对子级flex 项目
order：定义项目的排列顺序，属性值为数值型，数值越大，排列越靠前，默认都为0
align-self： 设置单个项目的对齐方式，可覆盖align-items的属性值，可选属性值与align-items一样，默认为auto，表示继承父元素的align-items属性值
-
flex-grow：定义单个flex项目的*扩展比例（在整个flex容器中有剩余空间的情况下），该属性值有：
0：默认值，不进行扩展其他正数数值： 在剩余空间中占据的比例，若只有一个元素取值大于1，则占满整个剩余空间，若是多个元素都取值，则按比例划分剩余空间
flex-shrik： 定义单个flex项目的收缩比例（在整个flex容器中的空间不足时）
1：默认值，表示空间不足时，等比缩小比例
0：表示空间不足时，不缩小flex-basis：指定项目所占据的空间大小，当与width同时存在时，取flex-basis的值
auto：默认为项目本身大小
像素值或百分比：自定义宽度
flex: 该属性是flex-grow、flex-shrink以及flex-basis的综合简写形式，该属性值有：
auto： 相当于 1 1 auto;
none： 相当于 0 0 auto；
自定义数值： flex-grow flex-shrink flex-basis， 其中，flex-grow值为必须值，其他两个属性值不写时， flex-shrink默认为1，flex-basis默认为 0% 。
注意，flex属性只写一个值时，这个值就是flex-grow，但实现的效果与flex-grow还是有区别的
例如：flex:1 和 flex-grow:1
flex:1 ---->相当于设置了三个属性，flex-grow：1; flex-shrink:1; flex-basis:0%;
flex-grow:1 -----> 只是设置了flex-grow:1;而flex-shrink取默认值1，flex-basis取默认值auto;
从这里不难发现，两者最大的差异在于flex-basis的值不同，这也是导致之后计算时的差异的关键原因。由于flex-basis的值的层叠性要高于width的属性值，因此，两者同时存在时，取的是flex-basis的属性值。
4、响应式布局
响应式的开发原理： 使用媒体查询，针对不同宽度的设备进行布局和样式的额设置，从而适配不同设备的目的。
在响应式布局中，通过媒体查询技术，改变布局容器的大小，进而改变布局容器中的子元素排列方式和大小，从而实现不同屏幕下所展示的不同页面布局和样式变化。
常见的响应式屏幕尺寸划分：
1、超小屏幕： xs(Extra Small)，width <= 767px
2、小型屏幕： sm(Small)，768px <= width <= 991px
3、中型屏幕： md(Medium)，992px <= width <= 1199px
4、大型屏幕： lg(Large)，width >= 1200px
