一、流式布局（百分比布局）

 

　　流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式

 

　　max-width 最大宽度（max-height 最大高度）min-width 最小宽度（min-height 最小高度）

 

　　二、flex伸缩布局

 

　　1）传统布局和flex布局

 

　　2）布局原理

 

　　flex是flexible box的简写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

 

　　当把父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

 

　　采用Flex布局的父盒子称为Flex容器（flex container），简称“容器”；

 

　　里面的所有子元素自动成为容器的成员，称为Flex项目（flex item），简称“项目”。

 

　　原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

 

　　3）常见的父项属性（6个）

 

　　flex-direction：设置主轴的方向（重点）

 

　　flex布局中分为主轴和侧轴 行和列 / x轴和y轴，默认的主轴方向是

 

　　属性说明row默认值从左到右row-reverse从右到左column从上到下column-reverse从下到上

 

　　justify-content：设置主轴上的子元素排列方式（重点）

 

　　属性说明flex-start默认值从头部开始 如果主轴是x轴，则从左到右flex-end从尾部开始排列center在主轴居中对齐（如果主轴是x轴，则水平居中）space-around平分剩余空间space-between先两边贴边，再平分剩余空间（重要）

 

　　flex-wrap：设置子元素是否换行（重点）

 

　　默认情况下，项目都排在一条线上，默认不换行。

 

　　属性说明nowrap默认值，不换行wrap换行

 

　　align-items：设置侧轴上的子元素的排列方式（单行）（重点）

 

　　该属性是控制子元素在侧轴上的排列方式，在子元素为单项是使用。

 

　　属性说明flex-start默认值，从上到下flex-end从下到上center垂直居中（元素集中）stretch拉伸

 

　　align-content：设置侧轴上的子元素的排列方式（多行），单行无效果。

 

　　属性说明flex-start默认值，从侧轴的头部开始排列flex-end从侧轴的尾部开始排列center在侧轴中间显示space-around子项在侧轴平分剩余空间space-between子项在侧轴先分布在两头，再平分剩余空间（重要）stretch设置子项元素高度平分父元素的高度

 

　　flex-flow：复合属性，相当于同时设置了主轴方式flex-direction和是否换行flex-wrap属性。

 

　　4）常见的子项属性（3个）

 

　　flex：定义子项目分配剩余空间，用flex来表示占多少份数。（重点）

 

　　align-self：控制子项自己在侧轴上的排列方式，默认值为auto，继承父元素的align-items属性，如果没有父元素，则等同于stretch。

 

　　order：定义项目的排列顺序，数值越小，越靠前，默认为0。

 

　　三、流式布局（rem布局）

 

　　1）rem基础

 

　　em和rem都是相对单位

 

　　em：相对于父元素字体大小来说

 

　　rem：root rem，相对于html元素字体大小来说

 

　　优点：通过修改html的字体大小来改变页面中的元素的大小可以进行整体控制

 

　　2）媒体查询

 

　　媒体查询（Media Query）是CSS3的新增语法

 

　　使用@media查询，可以针对不同的媒体类型定义不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用的到多媒体查询

 

　　语法规范：

 

　　用media开头注意@符号mediatype 媒体类型关键字 and not onlymedia feature媒体特性 必须有小括号包含

 

　　1> mediatype查询类型

 

　　将不同的终端设备划分成不同的类型，称为媒体类型

 

　　值说明all用于所有设备print用于打印机和打印预览scree用于电脑屏幕，平板电脑，智能手机等

 

　　2> 关键字

 

　　关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

 

　　值说明and可以将多个媒体特性连接到一起，相当于“且”not排除某个媒体类型，相当于“非”，可省略only指定某个特定的媒体查询类型，可以省略

 

　　3> 媒体特性

 

　　每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，较常用的有：

 

　　值说明Width＜/td>定义输出设备中页面可见区域的宽度min-Width＜/td>定义输出设备中页面最小可见区域的宽度max-Width＜/td>定义输出设备中页面最大可见区域的宽度