CSS3弹性布局、响应式布局
1.响应式 Web 设计 - Viewport
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。属性值设置成no后其他属性均无用。
2.响应式 Web 设计 - 网格视图
（1）创建响应式网格视图
首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。
确保边距和边框包含在元素的宽度和高度间。
添加如下代码：
* {box-sizing: border-box;}
12 列的网格系统可以更好的控制响应式网页。
首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。
在每列中指定 class， class="col-" 用于定义每列有几个 跨度：
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
所有的列向左浮动，间距(padding) 为 15px：
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
每一行使用
列中行为左浮动，并添加清除浮动：
.row:after {
content: "";
clear: both;
display: block;
}
3.响应式 Web 设计 - 媒体查询
（1）CSS语法
@media only mediatype and|not (media feature) {
CSS-Code;
}
（2）媒体类型
| 值 |
描述 |
| all |
用于所有设备 |
| |
用于打印机和打印预览 |
| screen |
用于电脑屏幕，平板电脑，智能手机等。 |
（3）媒体功能
| 值 |
描述 |
| device-height |
定义输出设备的屏幕可见高度。 |
| device-width |
定义输出设备的屏幕可见宽度。 |
| max-width |
定义输出设备中的页面最大可见区域宽度。 |
| min-width |
定义输出设备中的页面最小可见区域宽度 |
| orientation |
定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
媒体查询：
width: 768(手机) 992 1200(电脑)
结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。
语法：
orientation：portrait | landscape（竖屏|横屏）
portrait：指定输出设备中的页面可见区域高度大于或等于宽度
landscape： 除portrait值情况外，都是landscape
如果是横屏背景将是浅蓝色：
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
4.响应式 Web 设计 - 图片
（1）max-width 属性
如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：
img {
max-width: 100%;
height: auto;
}
如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：
img {
width: 100%;
height: auto;
}
图片会比它的原始图片大。
（2）背景图片（ background-size ）
1. 如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变：
2.如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：
3.如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例，因此 背景图像的某些部分无法显示在背景定位区域中。
（3）不同设备显示不同图片（媒体查询）
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
5.基本的布局方法——Flex布局（重点）
（1）基本概念
.container{ /*设置容器*/
display: flex;
flex-direction: column;
justify-content: center;
}
flex不单是一个属性，它包含了一套新的属性集。属性集包括用于设置容器，和用于设置项目两部分。
设置容器的属性有：（container）
display:flex;
flex-direction:row（默认值：从左向右） | row-reverse(反转：从右向左) | column(从上到下) |column-reverse
flex-wrap:nowrap（默认值：不换行）| wrap(换行) | wrap-reverse
justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
align-items:stretch（默认值） | center | flex-end | baseline | flex-start
align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly
设置项目的属性有：（items）
order:0（默认值） |
flex-shrink:1（默认值） |
flex-grow:0（默认值） |
flex-basis:auto（默认值） |
flex:none | auto | @flex-grow @flex-shrink @flex-basis
align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch
水平方向的是主轴/x轴（main axis），垂直方向的是交叉轴/y轴（cross axis）。
（2）容器属性
flex-direction 属性（主轴方向）
通过设置坐标轴，来设置项目排列方向。
.container{
flex-direction: row（默认值从左向右） | row-reverse(从右向左) | column(从上到下) | column-reverse(从下到上)
}
flex-wrap 属性
设置是否允许项目多行排列，以及多行排列时换行的方向。
.container{
flex-wrap: nowrap（默认值:不换行） | wrap(换行) | wrap-reverse(换行方向为wrap时的反方向)
}
flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
举个例子，你可以用flex-flow: row wrap去设置行并自动换行
justify-content 属性(主轴项目间不留空隙)
设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。
.container{
justify-content: flex-start（默认值:项目对齐主轴起点） | flex-end(对齐主轴终点)| center(在主轴上居中排列) | space-between(项目间间距相等,两边为0) | space-around(第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半)| space-evenly(间距均分)
}
align-items 属性
设置项目在行中的对齐方式。
.container{
align-items:stretch（默认值:项目拉伸至填满行高）| flex-start(项目顶部与行起点对齐) | center(项目在行中居中对齐) | flex-end(项目底部与行终点对齐) | baseline(项目的第一行文字的基线对齐)
}
align-content 属性(设置行在交叉轴方向上的对齐方式,行间不留间距)
与justify-content 属性类似
多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多余的空间。
.container{
align-content: stretch（默认值:各行中的项目拉伸至填满交叉轴） | flex-start(在交叉轴起点开始排列) | center(在交叉轴中点排列) | flex-end(在交叉轴终点开始排列) | space-between |space-around | space-evenly
}
（3）项目属性
order 属性
设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数，默认是0。
.item{
order: 0（默认值） |
}
flex-shrink 属性(默认flex-shrink值为1)——加权计算
当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。
flex-grow 属性——加权计算
当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。
.item{
flex-grow: 0（默认值） |
}
重点掌握：双飞翼布局（两边固定，中间自适应，运用flex-grow）;
flex-basis 属性
当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。
当容器设置flex-direction为column或column-reverse时，flex-basis和height同时存在，flex-basis优先级高于height，也就是此时flex-basis代替项目的height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。
总之：
两者均有值，优先级：flex-basis>width
其中一个属性值为auto时，非auto的优先级更高。
.item{
flex-basis: auto（默认值） |
}
align-self 属性
设置单个项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，这么做可以对项目的对齐方式做特殊处理。默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。
.item{
align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch
}