CSS3新特性篇
1. CSS3概述
-
如同人类的的进化一样，
CSS3是CSS2的进化版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷 -
css当js用 -
js当后台语言用
2. CSS3现状
- 浏览器支持程度差，需要添加私有前缀(移动端)
a).-webkit-谷歌(Google)
b).-moz-火狐(Firefox)
c).-o-欧鹏(Opera)
d).-ms-IE(Internet Explorer)
e).-khtml-Konqueror 移动端支持优于PC端- 不断改进中
- 应用相对广泛
3. CSS3选择器
简述：CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容
3.1 属性选择器
-
[属性名]表示存在XX属性的元素； -
[attr = val]表示属性值等于val的元素； -
[attr *= val]表示的属性值里包含val字符并且在任意位置； -
[attr ^= val]表示的属性值里包含val字符并且在开始位置； -
[attr $= val]表示的属性值里包含val字符并且在结束位置；
3.2 伪类选择器
- 之前学习的：
a:link(超链接从未被访问过的状态)
a:visited(超链接访问过后的状态)
a:hover(鼠标悬停状态)
a:active(鼠标按下状态) CSS3新增的伪类选择器
| 序号 | 选择器 | 示例 | 示例描述 |
|---|---|---|---|
| 1 | :first-child | li:first-child | 必须是li元素，必须是第一个子元素 |
| 2 | :last-child | li:last-child | 必须是li元素，必须是最后一个子元素 |
| 3 | :nth-child(n) | a:nth-child(5) | 必须是a元素，必须是第五个子元素(2n、even表示偶数，2n+1、odd表示奇数) |
| 4 | :nth-last-child(n) | a:nth-last-child(n) | 同:nth-child(n) 相似，只是倒着计算 |
| 序号 | 选择器 | 示例 | 示例描述 |
|---|---|---|---|
| 1 | :first-of-type | li:first-of-type | 必须是子元素中第一个li元素（可以不是第一个子元素） |
| 2 | :last-of-type | li:last-of-type | 必须是子元素中最后一个li元素（可以不是最后一个子元素） |
| 3 | :nth-of-type(n) | li:nth-of-type(5) | 必须是子元素，必须是第五个li元素 |
| 序号 | 选择器 | 示例 | 示例描述 |
|---|---|---|---|
| 1 | :empty | li:empty | 选中没有任何子节点的li元素（空格也算子节点） |
| 2 | :target | li:target | 结合锚点进行使用，处于当前锚点的元素会被选中 |
3.3 伪元素选择器
简述： 通常用来生成并选中某个元素内部的第一个子元素或最后一个子元素，此元素没有名字，为匿名元素
| 序号 | 选择器 | 示例 | 示例描述 |
|---|---|---|---|
| 1 | ::before | span::before{ content:"内容"; 为内容设置属性样式 } | 生成并选中span的第一个子元素，默认行盒 |
| 2 | ::after | span::after{ content:"内容"; 为内容设置属性样式 } | 生成并选中span的最后一个子元素，默认行盒 |
| 3 | ::first-letter | p::first-letter | 选中元素中第一个字母、文字 |
| 4 | ::first-letter | p::first-letter | 选中元素中第一行的字母、文字 |
| 5 | ::selection | p::selection | 选中用户用鼠标框选的部分字母、文字（通常设置一些颜色，宽高文字大小之类的属性设置无效） |
4. 文本阴影、盒子阴影、颜色设置
4.1 文本阴影text-shadow
text-shadow属性还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片- 现在有了
css3可以直接使用text-shadow属性来指定阴影 - 这个属性可以有两个作用：
产生阴影和模糊主体。 - 这样在不使用图片时能给
文字增加质感
语法：
text-shadow ：x轴偏移 y轴偏移 模糊距离 阴影颜色;
取值：
(必须)x、y轴取正负值 如5px、-5px
(可选)模糊距离必须取正值如：5px
(可选)阴影颜色为色值，也可以是rgba透明色
说明：
可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。
4.2 盒子阴影box-shadow
box-shadow 属性向边框添加一个或多个阴影
语法：
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外部阴影;
属性：
1. h-shadow(必需):水平阴影位置。允许负值如：5px
2. v-shadow(必需):垂直阴影位置。允许负值如：-5px
3. blur(可选):模糊距离,必须取正值如：5px
4. spread(可选):阴影尺寸,值越大阴影的扩散面积越大，默认值为0px
5. color(可选):阴影颜色
6. 内/外部阴影(可选):外部阴影outset(默认值) 内部阴影inset
注意：
1. 一般跟文字阴影一样写四个值即可：水平 垂直 模糊 颜色
2. 前面两个属性是必须写的，其余的可以省略
3. 外阴影为默认的（outset）但是不能写， 想要 内阴影就写inset
案例：
/*给盒子底部底部阴影*/
box-shadow：0 10px 20px rgba(0,0,0,.1);
4.3 颜色设置
1. RGBA
RGBA说得简单一点就是在RGB的基础上加进了一个Alpha透明度
语法:
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：透明度。取值0~1之间
/*比如红色*/
background: rgba(255, 0, 0, 1);
2. HSLA
HSLA色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度
语法：
H：Hue(色调,色相)。
取值为：0 – 360,过渡为：(红橙黄绿青蓝紫红)，0(或360)表示红色，120表示绿色，240表示蓝色，
也可取其他数值来指定颜色。
S：Saturation(饱和度)。
取值为：0.0% - 100.0%
L：Lightness(亮度)。
取值为：0.0% - 100.0%，50%是平衡值
A：Alpha透明度。
取值0~1之间。
/*比如红色*/
background: hsla(360, 100%, 50%, 1);
5. 背景渐变
概述： 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，
并且具有很强的适应性和可扩展性。渐变可分为线性渐变、径向渐变
注意： -webkit-linear-gradient 前面加上浏览器私有前缀-webkit-，起始位置参数不用写to，方向与有to参数相反
5.1 线性渐变
概述： linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
语法：
/*前缀添加在`linear-gradient前面*/
background:linear-gradient(渐变色的起始位置,起始颜色,结束颜色 )
/*也可以（渐变色起始位置,颜色、位置,颜色、位置,...）*/
/* 例如：*/
background:linear-gradient(to right, red 0%, green 30%, #008c8c 40%, pink 100%); /*百分比表示位置度数*/
参数说明：
A. 第一个参数表示线性渐变的方向，
a). to left：设置渐变为从右到左。相当于: 270deg;
b). to right：设置渐变从左到右。相当于: 90deg;
c). to top：设置渐变从下到上。相当于: 0deg;
d). to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
f). 也可以直接指定度数，如45deg
B. 第二个参数是起点颜色,可以指定颜色的位置
C. 第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变
5.2 径向渐变
概述： radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
语法：
background: radial-gradient(形状, 大小, 坐标, 颜色)
参数说明：
A. 第一个参数shape：渐变的形状，ellipse表示适配元素大小(宽高不一样的情况下为椭圆形)，circle表示圆形。
默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
B. 第二个参数size：渐变的大小，即渐变到哪里停止，它有四个值。
a). closest-side：最近边；
b). farthest-side：最远边；
c). closest-corner：最近角；
d). farthest-corner：最远角。
f). 默认是最远的角farthest-corner
C. 第三个参数position：确定圆心的位置。默认为正中心。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；
如果只提供一个，第二值默认为50%，即center
取值：可以赋值坐标，参照元素左上角坐标点如：at 10px 10px
也可以为关键字：left right top bottom center 记得前面加一个at
D. 第四个参数color：指定颜色，可以写多个也可以加上位置如：red 10%,bule 40%...
F. 前三个参数为可选项
5.3 重复渐变
用径向渐变做:
语法：
background:repeating-radial-gradient(形状 大小 坐标，开始颜色 开始位置0%,结束颜色 结束位置10%,....)
/*颜色可以写多组*/
6. 背景图
1. 设置背景图
background-image:url("imgs/bg-1.jpg")
2. 设置背景平铺
background-repeat
a). 默认情况下，背景图会铺满整个页面，背景图大小不够铺满整个页面时，背景图会在横坐标和纵坐标中进行重复；
b). background-repeat：repeat 默认值，横、纵坐标重复
c). background-repeat：round 会将图片缩放之后再平铺，达到铺满整个容器的效果
d). background-repeat：space 图片不会缩放平铺，只会在图片之间产生相同的间距值，达到铺满整个容器的效果
d). background-repeat：no-repeat（不重复）
e). background-repeat：repeat-x（只在x轴重复）、y（也一样）**
3. 设置滚动容器的背景的行为(是否固定)
background-attachment
A. 跟随元素滚动：background-attachment:scroll;
B. 固定不动：background-attachment:fixed;
C. 跟随内容滚动：background-attachment:local;
4. 设置背景图的尺寸
background-size
a). background-size：contain 图片要完整的显示在指定的区域，不能改变图片的比例
b). background-size：cover 图片撑满整个指定区域，而且比例不变，可能会溢出
c). background-size：100% 横向撑满，纵向按比例缩放。百分比相对于盒子
d). background-size：100% 100% 横、纵向撑满，图片比例可能会发生变化。
f). background-size：x y 可以设置数值代表横、纵向的像素尺寸。
5. 设置背景图位置
background-position
a). background-position：center 背景图横、纵向居中
b). background-position：center top 横向居中，纵向靠上
c). background-position：center bottom 横向居中，纵向靠下
d). background-position：left center 横向靠左，纵向居中
e). 预设值： left、bottom、right、top、center（居中）
f). 也可以用数值或百分比如background-position：10px 10px 表示横、纵坐标离左边、上边边框的距离;
6. 设置背景图坐标的原点
background-origin
a). background-origin:border-box 从边框开始填充背景，会与边框重叠
b). background-origin:padding-box 从填充区开始填充背景，覆盖填充盒（为默认值）
c). background-origin:content-box 从内容区域开始填充
7. 设置内容的裁切，控制显示
background-clip
a). background-clip:border-box 显示border及以内的内容
b). background-clip:padding-box 显示padding及以内的内容
c). background-clip:content-box 只显示内容区
8. 速写（简写）background
A. background：url("imgs/main.jpg") no-repeat 50% 50%/100% fixed #000 顺序为设置图片、不重复、
位置、尺寸、视口、背景颜色，因为位置和尺寸都有可能为百分比，所有浏览器规定尺寸必须写在位置后面中
间加/隔开。有些属性可以不写，不写会按默认值处理
B. background：背景颜色、背景图片地址、背景平铺、背景固定、背景位置、背景图片尺寸
9. 有含义的背景图，需要在元素里添加文字
1. 在网速不好的时候，加载不出来CSS属性的时候，会显示文字；
2. 在网速正常的时候，能加载CSS属性，则显示图片；
3. 所以书写代码的时候需要添加文字，然后隐藏文字；
4. 方法一.文本缩进：text-indent：px，文本不换行：white-space：nowrap；把文本挤出到盒子外面，
然后隐藏溢出：overflow：hidden；
5. 方法二.背景可以覆盖内边距，高度设置为0，padding-top内边距设置为原先高的值，这样背景图正常显示，
文本就在盒子外面，然后隐藏溢出：overflow：hidden；
6. 方法三，把文本用span元素包裹起来，然后隐藏span盒子。
7. 边框图片
1. 设置边框图片路径
border-image-source:url("./images/a.jpg");
/*可以指定边框图片的路径，默认只是填充到容器的四个角*/
2. 设置四个方向上的裁切距离
border-image-slice:27 fill;
/*第一个参数为数值是四个方向的裁切距离
第二个参数fill是做内容的内部填充*/
3. 设置边框图片的宽度
border-image-width:27px;
/*建议：一般设置为边框的宽度
注意：边框图片的本质是背景，并不会影响元素内容的放置
内容只会被容器的border和padding影响*/
4. 设置边框图片的平铺
border-image-repeat:
/*取值：repeat 直接重复平铺
round 将内容缩放进行完整的重复平铺
stretch 拉伸，默认值*/
5. 缩写（简写）
border-image: 图片链接 裁切距离 / 图片宽度 / 设置平铺
8. 过渡
在CSS3里使用 transition 可以实现补间动画（过渡效果）
1. 速写语法
transition:要过渡的属性、花费时间、运动曲线、何时开始。
/*如果有多组属性变化，用逗号隔开*/
2. 设置过渡属性名称
transition-property :要过渡属性的名称（如width）
3. 设置过渡花费时间
transition-duration :过渡花费的时间（默认是0,时间单位为s/秒）
4. 设置过渡时间曲线
transition-timing-function :规定过渡效果的时间曲线默认是ease慢快慢,linear匀速,分步steps(4)
5. 设置延迟时间
transition-delay:延迟效果，规定过渡效果何时开始（默认是0，即刻开始）
6. 设置所有属性都发生变化（过渡）
transition:all 0.5s; /*简写，后面俩属性可以不写*/
/*这种写法不建议使用，浏览器要挨个遍历属性效率低下，建议多组属性用逗号隔开书写*/
7. 过渡是H5中新增的样式好多老版本浏览器不支持，解决方法是加厂商前缀
-moz-transition : left 2s steps(5);
-webkit-transition: left 2s steps(5);
-o-transition: left 2s steps(5);
8. 监听过渡完成事件
/*监听过渡完成的事件 transitionend*/
.addEventListener('transitionend', function() {
})
注意：过渡写到本身上元素上，谁做过渡动画写到谁CSS里，不建议写到：hover里，因为鼠标移动没有过渡动画效果
9. 2D变形和3D变形
9.1 2D变形
简述： transform 是CSS3中最具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式
配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果
1. 移动
transform:translate(x,y)
/*移动平移,可以改变元素的位置，x、y可以为负值，也可以是%相对于元素自己宽高的百分比，
写一个值默认为 X。值要加上单位如：300px;*/
/*======================================================================================*/
/*X,Y也可以分开写:*/
transform:translateX(300px)
transform:translateY(300px)
/*注：a. 移动是相对于元素左上角坐标 b. 执行完毕会回复原始状态*/
2. 缩放
transform:scale(0.8, 1)
/*表示宽度缩放为 80%，高度不变，1为100%，只写一个值默认为宽高一起缩放,
配合过渡一起可以做图片缩放效果*/
/*======================================================================================*/
/* X,Y也可以分开写:*/
transform:scaleX(2)
transform:scaleY(2)
/*注：a. 缩放是以元素中心为原点 b. 执行完毕会回复原始状态*/
3. 旋转
transform:rotate(45deg);
/*deg为旋转的度数，正数数值为顺时针旋转，负数数值为逆时针旋转
注：a. 相对于Z轴旋转 b. 执行完毕会回复原始状态*/
4. 倾斜
transform：skew(deg,deg)
/*倾斜的度数，俩值分别为X水平倾斜、Y垂直倾斜，可以取负值，第二个参数不写默认为0*/
/*如果角度为正,则往当前轴的负方向倾斜，如果角度为负,则往当前轴的正方向倾斜;写两个值先倾斜水平方向，再倾斜垂直方向*/
/*============================================================================================*/
/*也可以单独书写水平、垂直方向倾斜*/
skewX();
skewY();
/*注：相对于中心位置进行倾斜 b. 执行完毕会回复原始状态*/
5. 设置转换变形的原点
transform-origin: right bottom; /*右下角的意思；也可以用数值*/
transform-origin: 10px 10px;/*表示原点为x、y轴的10px处。一般默认为元素的中心点为原点*/
6. 一般常用的是移动、缩放、旋转
注意1：
移动、缩放、旋转、倾斜同时分开写会出现层叠。
正确的写法是连写空格隔开：transform：translate(100px，100px) scale(0.3)
移动和旋转同时的情况下,移动写在前面,否则会改变移动的方向
注意2：
配合过渡，需把 transform 给过渡当要做过渡的属性
9.2 3D变形
3D是基于2D的也是使用transform
1. 移动
transform: translate3d(x,y,z) /*使元素在这三个经纬轴中移动,必须写三个值*/
/*也可以分开写：*/
transform: translateX(300px)
transform: translateY(300px)
transform: translateZ(300px) /*Z轴移动在平面上看不出效果*/
2. 缩放
transform：scale3d(0.5,1,2) /*值参考2D*/
/*也可以分开写:*/
transform：scale3dX(0.5,1,2)
transform：scale3dY(0.5,1,2)
transform：scale3dZ(0.5,1,2) /*Z轴缩放在平面上看不出效果*/
3. 旋转
transform: rotate3d(x,y,z,deg);
/*x：代表 x 轴上的一个向量值
y：代表 y 轴上的一个向量值
z：代表 z 轴上的一个向量值
deg：代表旋转的度数
如果只围绕一个轴旋转，其它两个轴写0即可，一个轴值写多大都一样，一般取1
多个轴会根据每个轴的向量值来确定旋转的轴线*/
4. 保留3D转换的结果
/* 使被转换的子元素保留其3D转换效果（需要设置在父元素中）*/
transform-style: preserve-3d;
/*取值：flat 不保留，默认值
preserve-3d 保留*/
5. 透视、景深效果（前面不需要加transform）
/*A. 深度：*/
perspective: 500px; /*一般写500px就好，透视度写给父级盒子*/
/*0为元素中的中心点，加大是往屏幕外的方向，减小是往屏幕里面方向；去观看元素盒子*/
/*B. 角度：*/
perspective-origin：0px 0px; /*规定镜头在平面上的位置。默认是放在元素的中心
两个参数为x、y,可取正负数切换角度*/
6. 定义当元素不面向屏幕时是否可见
backface-visibility:hidden;
10. 动画
语法:
animation: 动画名称、花费时间、运动曲线、何时开始、播放次数、是否反方向
/*一般简写只写前两个属性，后面都是默认的*/
属性:
1. 规定动画： @keyframes
2. 属性简写： animation 所有动画属性的简写属性，除了 animation-play-state 属性。
3. 动画名称： animation-name 规定 @keyframes 动画的名称。
4. 动画耗时： animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
5. 速度曲线： animation-timing-function 规定动画的速度曲线。默认是ease慢快慢,linear匀速,分步steps(4)
6. 动画延迟： animation-delay 规定动画何时开始。默认是0s。
7. 动画次数： animation-iteration-count 规定动画被播放的次数。默认是 1。（无限次infinite）
8. 交替动画： animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。（逆向alternate）
9. 动画播放状态： animation-play-state 规定动画是否正在播放或暂停(paused)。默认是 "running播放"。
10. 动画之外的状态：animation-fill-mode： 规定对象动画时间之外的状态。
取值：forwards 保留动画结束时的状态，在设置了动画延迟和初始状态（如：旋转）的情况下，
不会立刻执行动画的初始状态
backwards 不会保留动画结束时的状态，但是如果在设置了动画延迟和初始状态（如：旋转）的情况下，
会立刻执行动画的初始状态
both 既保留动画结束状态，在设置了动画延迟和初始状态（如：旋转）的情况下，
也会立刻执行动画的初始状态
用法：
/*在需要动画的元素的 css 里调用方法（函数） animation：动画名称 花费时间...
然后在css页面声明函数（方法）*/
@keyframes 动画名称{
form{
从哪开始，如：
left:0;
}
to{
到哪结束,如：
left:1000px;
}
}
/*=================================================================*/
/*另一种百分比写法:*/
@keyframes 动画名称{
0%{
从哪开始，如：
left:0;
}
50%{
到哪结束,如：
left:1000px;
}
100%{
}
}
/*注：0%可以写成form 100%可以写成to
注：可以用百分比方式来设定动画各个时段的状态，每个时段都是一个关键帧，中间的动画过程叫补间动画。
注：过渡只有两个关键帧*/
11. web字体和字体图标
11.1 web字体
概述：用户电脑上没有安装相应字体，强制让用户下载该字体（浏览器临时性自动下载网页编写者给定在CSS中的字体文件）
步骤：
-
提供需要
生成字体的字体文件内容 -
使用网络资源生成
web字体,然后下载并解压到本地;如阿里巴巴icofont字体图标网站 -
把解压的字体文件复制到,项目的
font文件夹中 -
把下载到的字体代码复制到
css文件中
/*代码格式：*/
@font-face{
font-family:"字体名";
src：url("字体文件路径");
}
/*注：因为字体文件放在font文件夹中，所有一定要更改代码里面的路径，一般前面加上 ./font/*/
- 创建
类样式，并把类样式添加给需要的元素
.myFont{
font-family:iconfont;
}
11.2 字体图标
概述：常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了
步骤
-
使用网络资源找到需要的字体图标,然后下载并解压到本地;如
阿里巴巴icofont字体图标网站 -
把解压的字体文件复制到,项目的
font文件夹中 -
把下载到的字体代码复制到
css文件中
/*代码格式：*/
@font-face{
font-family:"iconfont";
src：url("字体文件路径");
}
/*注：因为字体文件放在font文件夹中，所有一定要更改代码里面的路径，一般前面加上 ./font/*/
- 创建
类样式，并把类样式添加给需要的元素
.myFont{
font-family:iconfont;
}
- 给需要字体图标的
元素，生成一个伪元素，设置字体图标
.myFont::before{
/*把16进制的字体编码""写成以下格式*/
content:"\e620";
/*可以自由添加字体样式 */
font-size：20px;
....
}
12. 多列布局（文本）
概述： CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人
员轻松的让文本呈现多列显示。
常用属性(设置多列布局)：
1. column-count: 属性设置列的具体个数
如：column-count:3;
注：会根据列的个数均分元素空间
2. column-width: 属性控制列的宽度
如: column-width:200px;
注意：a).当指定了列的个数和宽度时,原则上取大优先
b).如果设置的宽度更大,则取宽度,用元素总宽度/设置的宽度,重新生成列数,
c).但是会填充整个元素,意味最终的宽度可能会大于设置的宽度
d).如果设置的宽度小于生成列数形成的宽度,则使用列数生成的宽度
3. column-gap: 两列之间的缝隙间隔
column-gap:50px;
4. column-rule: 规定列之间的宽度、样式和颜色,与设置边框样式一样
column-rule: 1px dashed #000;
5. column-span: 规定元素应横跨多少列,只有两个参数：1(1列)、all(跨所有列)
一般如文本标题,放在最顶部,横跨所有列
13. flex弹性布局
13.1 概述
-
布局的传统解决方案，基于
盒状模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便。 -
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩
性，在响应式开中可以发挥极大的作用。 -
别名：
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
13.2 布局原理
flex是flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以
指定为flex布局，不需要转换盒子类型- 采用了
flex布局的元素，称为flex容器，它的子元素称为flex项目 - 总结
flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
13.3 注意
- 当我们为父元素设为
flex布局以后，子元素的float、clear、vertical-align属性将失效 - flex布局没有外边距合并
- flex布局，分配剩余空间分配的是内容盒，剩余空间会先减掉盒子的border、padding 再分配。所以当
子元素均分剩余空间的时候，它们相等的是内容盒，如果有的盒子设置了边框、内边距，那它整体盒子
就会比其它盒子大
13.4 语法
display:flex; /*在父级盒子中申明伸缩布局*/
13.5 父元素的属性
1. 设置主轴的方向(默认水平)
flex-direction:
取值：
a). row; 水平方向为主轴,从左到右排列(默认的主轴)
b). row-reverse; 水平方向为主轴,从右到左排列
c). column; 垂直方向为主轴,从上到下排列
d). column-reverse; 垂直方向为主轴,从下到上排列
注：水平为主轴,垂直就是侧轴;垂直为主轴,水平就是侧轴
2. 控制子元素是否换行显示(默认不换行)
flex-wrap:
取值： a). wrap; 换行,如果一行放不下所有子元素,则自动换行
b). nowrap; 不换行,如果一行放不下子元素,则平均收缩每个子元素的宽度(默认不换行)
c). wrap-reverse; 翻转,原来是从上往下排列,翻转后是从下往上排列(很少用)
3. 设置主轴方向+设置换行显示
flex-flow: row wrap; 水平方向为主轴,换行显示
4. 设置子元素在主轴上的排列方式(默认从左到右)
justify-content:
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴。默认主轴方向是x轴，y是侧轴
取值: a). flex-start; 让子元素从父元素起始位置开始排列(类似于子元素左浮动)为默认
的排列方式
b). flex-end; 让子元素从父元素的结束位置开始排列(类似于子元素右浮动)，元素的顺序还是从左到右
c). center; 让子元素从父元素中间位置开始排列(类似于所有子元素居中排一起)
d). space-between; 左右对齐，中间平均分页，产生相同间距
e). space-around; 将多余的空间平均分页在每一个子元素两边(类似于左右margin,中间的间距是两边的两倍)
5. 设置子元素在侧轴上的对齐方式（单行子元素）
align-items：
取值：center; 居中对齐
flex-start; 顶部对齐
flex-end; 底部对齐
stretch; 拉伸,让子元素在侧轴方向上拉伸,填满整个侧轴,前提是子元素没有设置高度;(默认值)
baseline; 按照子元素中文本的基线对齐(用的很少)
6. 设置子元素在侧轴上的对齐方式（多行子元素）
align-content：
只能用于子元素出现了换行的情况（多行），在单行没有效果
取值： flex-start; 在侧轴的头部开始排列（默认值）
flex-end; 在侧轴的尾部开始排列
center; 在侧轴中间显示
space-around; 子元素在侧轴平分剩余空间
space-between; 子元素在侧轴先分布两头，再平分剩余空间
stretch; 设置子元素高度平分父元素高度
子元素的属性:
1. 定义子元素在父元素中占据几份剩余空间
flex:1;
会计算所有子元素flex的值,然后按值占的比例分配；默认为0
也可以用百分比
2. 定义收缩比例
flex-shrink: 在一行放不下所有子元素而又不换行的情况下,子元素会平均收缩
比例值计算：当前空间的flex-shrink值/所有兄弟元素的flex-shrink值的和(包括当前元素的值)
平均收缩的默认值为1;表示每个子元素收缩一份空间;
不想收缩可以设置为0;但是有可能会导致子元素溢出
3. 扩展子元素的宽度
flow-grow: 设置当前元素应该占据父元素剩余空间的比例值(1、2、3...);
比例值计算：当前空间的flex-grow值/所有兄弟元素的flex-grow值的和(包括当前元素的值)
flow-grow默认值为0：说明子元素并不会去占据剩余空间
4. 设置单个元素在侧轴方向上的对齐方式（了解）
align-self:
取值：center; 居中对齐
flex-start; 顶部对齐
flex-end; 底部对齐
stretch; 拉伸,让子元素在侧轴方向上拉伸,填满整个侧轴,前提是子元素没有设置高度;(默认值)
baseline; 按照子元素中文本的基线对齐(用的很少)
5. 设置子元素的排列顺序（了解）
order：
取值：数值越小，排列越靠前，默认为0，可以为负数
注意：和z-index不一样