前端初体验-day8

###元素的显示与隐藏

1.display 显示
display 设置或检索对象是否及如何显示。
display: none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思,特点: 隐藏之后，不再保留位置。

2.visibility 可见性
设置或检索是否显示对象。
visible: 对象可视
hidden: 对象隐藏
特点: 隐藏之后，继续保留原有位置。

###css3结构性伪类选择器(重点)
:nth-child(n)对指定序号的子元素设置样式(从前往后数)。参数可以使数字(1、2、3)、关键字(odd.
even)、公式(2n、2n+3 :使用公式时,n从0开始)，参数的索引起始值时1，而不是0。
·:nth-ast-child(n)对指定序号的子元素设置样式(从后往前数)。参数同上。
·:nth-of-type(n)匹配指定序号的同一种类型的子元素(从前往后数)。参数同上。
:nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素(从后往前数)。参数同上。

###过渡(CSS3) transition
过渡(transition)是cSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果,
帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
在CSS3里使用transition可以实现补间动画(过渡效果)，并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指)，就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

语法格式:
transition:要过渡的属性 花费时间 运动曲线何时开始;
如果有多组属性变化，还是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 css 屈性的名称。
transition-duration	定义过渡效果花费的时间。默认是0。
transition-timing-function	规定过渡效果的时间曲线。默认是"ease"。
transition-delay	规定过渡效果何时开始。默认是0。

###2D变形(csS3)transform
transform是csS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

translate (50px, 50px);
translateX():
translateY():
使用translate方法来将文字或图像在水平方向和垂直方向上分别移动。

translate(x,y)水平方向和垂直方向同时移动(也就是X轴和y轴同时移动)

代码展示：

    .box {
            width: 200px;
            height: 100px;
            background-color: red;
            transition: all 0.5s ease;
            margin: 0 auto;
        }
        
        .box:hover {
            /* transform: translate(100px, 50px); */
            transform: translateY(100px);
        }

缩放 scale(x,y)(0~1)
缩放

transform:scale(0.8.1):
/*可以对元素进行水平和垂直方向的缩放。*/

注意:scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小;而 任何大于1的值，作用是让元素放大。

scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scalex(x)元素仅水平方向缩放(X轴缩放)
scaley(y)元素仅垂直方向缩放(Y轴缩放)

旋转 rotate(deg)

语法	意义
rotate( angle )	定义2D 旋转，在参数中规定角度。
可以对元素进行旋转，正值为顺时针，负值为逆时针;

###动画(CSS3) animation
动画是c5S3中具有颠性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
1 定义动画
@keyframes 动画名称{
from{开始位置 }
to{ 结束 }
}

@keyframes 动画名称{
0%
55%
…
100%
}
/关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意/

2 调用动画
CSS
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性:

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。

###传统布局和flex布局对比

1.传统布局
兼容性好
布局繁琐
局限性，不能在移动端很好的布局

2.flex布局
操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分

3.Flex 布局是什么?
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。(芸芸众生皆平等)

        .warp {
            width: 600px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            /* 使warp元素变成一个flex容器
            给了元素会自动缩放，不会超出父元素的范围 */
            display: flex;
        }

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

4.基本概念
采用 Flex 布局的元素，称为 Flex 容器(flex container)，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目(flexitem)，简称“项目"。
父盒子是:flex container
子元素是:flex item
总结原理:就是给父盒子添加flex属性，来控制子盒子的位置和排列方式

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位叫做mainend;交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main
size，占据的交叉轴空间叫做cross size。

###flex-direction属性(主轴的方向)
flex-direction属性决定主轴的方向(即项目的排列方向)

 .warp {
            display: flex;
            /* 主轴的方向 */
            flex-direction: row | row-reverse|column|column-reverse;
        }

它可能取有4个值:
·row(默认值):主轴为水平方向，起点在左端。
·row-reverse:主轴为水平方向，起点在右端。
·column:主轴为垂直方向，起点在上沿。
·column-reverse:主轴为垂直方向，起点在下沿。

###flex-wrap属性(如何换行)
默认情况下，项目都排在一条线(又称"轴线")上。flex-wrap属性定义，如果一条轴线排不下如何换行。

 .warp {
            display: flex;
            /* 主轴的方向 */
            flex-warp:nowarp(默认)|warp|warp-reverse
        }

###justify-content属性(主轴上的对齐方式)

 .warp {
            display: flex;
            /* 主轴的方向 */
           justify-content:flex-start(默认)|flex-end|center|space-between|space-around;
        }

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start(默认值):左对齐
flex-end:右对产
center:居中
space-between:两端对齐，项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

###flex-alignt属性(交叉轴轴上的对齐方式)
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器。