一，百分比布局（流式布局）
width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。
height:高度的百分比是相对于父盒子height内容高的比。
padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。
border：不能书写百分数
二，伸缩布局
1，给父元素设置display：flex 必须给其直接父元素设置display：flex属性 （父元素为伸缩盒子）
2，任何情况下都可以使用
3，伸缩盒子中所有元素都是按照主轴方向显示的
伸缩盒子默认有两条轴：水平显示的主轴，永远垂直于主轴的侧轴
4，常用属性
改变主轴方向：flex-direction：roew（水平显示，默认）/ column（垂直显示）/ row-column（右向左）/ column-reverse（下向上）
设置元素在主轴方向上的对齐方式：justify-content：flex-start（主轴开始位置对齐）/ flex-end（主轴结束位置对齐）/ space-between（两端对齐中间自适应）/ center（中间对齐）/ sopace-around（元素周围出现空白）
设置元素在侧轴对齐方式：align-items：flex-start（侧轴开始位置对齐）/ flex-end（侧轴结束位置对齐）/ center（居中对齐）/ stretch（沿着侧轴拉伸，默认值---元素没有设置高度的情况下）
在伸缩盒子中不管元素有多少个，默认都一行显示，设置元素是否换行：flex-warp：nowarp（默认，不换行）/ warp（换行）
设置换行后的对齐方式（多行对齐方式）align-content：flex-start（开始位置对齐）/ flex-end（结束位置对齐）/ center（居中对齐）/ strech（默认）/ space-between（两侧对齐中间自适应）/ space-around（周围环绕）
伸缩盒子中的flex属性：flex：number；number表示当前元素占父元素的份数
给子元素排序：order：值；
三，响应式布局（同一个网页在不同设备中布局效果不一样）核心技术：媒体查询
媒体查询：通过视口的宽度来设备设备，实现不同设备布局效果不同
语法：@media only screen and（width：320px）{ div { 布局 } } 当前设备的宽度等于320px时执行媒体查询中的代码
详解：
@media：声明媒体查询
screen：有屏幕的媒体类型，除此之外还有，all：任何类型，print打印设备类型
width：320px ：媒体特征，min-width（最小宽）/ max-width（最大宽），orientation：portrait（竖屏）/ landscape（横屏）
and：多个媒体特征用and链接
only：一个链接条件的关键字，可以省略
四，rem适配（解决同一元素在不同设备中的变化，文字和盒子在不同像素密度下适配）
适配过程：
1，UI图和移动设备分成相同的份数例：20，UI/20=UI图中每一份大小
2，计算出UI图中每一个元素的比例：当前元素的大小/每一份大小
3，计算跟标签中文字大小（跟文字大小）：html文字大小=移动设备宽度/20
4，公式：元素rem值= 当前元素测量大小 / UI图宽度/份数）
例：@size：20；（自定义份数）
@media only screen and （width：320px）{
html：{
font-size：320px / @size； （计算跟文字大小）
}
}
.box { width：元素测量宽度 / （UI图宽度 / @size）rem}
