dy——纯css3照片展示

css3:
1.开发前要进行规划，明确功能需求，
一些细节要注意
比如这个照片展示，它点击某张图片时，把点击的图片展示出来，而其他
图片要隐藏。这个过程，就是要注意一个先后顺序。是其他图片先消失，而且是
高度变为0，然后是要展示的图片宽度变成100%。

2.一些值得关注的知识点
(1)".close"的叉，不是写了个x，而是给close加了：before和：after
再在伪元素里写width,height,背景色#fff，再旋转（-45deg，45deg），也不是我想的用
border:1px solid #fff。我也没尝试用border，猜测可能border不能旋转？
(2).wrapper .body .html{w100%, h100%};
这个我也是首次知道。
为了当用户改变页面大小，不出现滚动条，content随着页面变化而改变大小，始终在
第一屏，所以有了.wrapper{w100%,h100%}，想让.wrapper占据整个页面，大小随着
页面改变。
但是没实现，最后发现应该使html{w100%,h100%},因为，.body、.wrapper都是继承html的
【3】那些动态
【】
(1)最初时：它从下面滑上来，而且是依次，有时间差
这个实现原理我也是没想到
先把每个.inner平移下去：.init .item .inner : transform:translate3d(0, 100%, 0);
当有.init时候，图片下移  html写“.wrapper .init”，所以一开始图片都是在.content
然后在js中设置定时器，200ms后，$('.wrapper').removeClass('.inner');就是说它是
自动的。
然后.item .inner{transition: transform 0.5s linear}图片从下到滑上来，让它0.5s
内完成  
然后时间差：【transition-delay：看代码】没想到还有transition-delay
(2)点的图片全屏展示，其他消失掉
两个类：.active{width: 100%;}（点的是那个 就给那个.item加上.active）
.item:not(.active){w:0;h:0;}
然后点开它那个效果是，那4个高度先缩没了，然后停一会儿后，宽度展开
所以 .item{transition:h 0.5s linear, w 0.5s linear 0.5s};
然后如果就.item:not(.active){w:0;h:0;}这样设置，那一开始图片肯定都不见
所以js里很有技巧的给点击的.item加上.active——$(this).addClass('active');
$('.wrapper').addClass('wrapper-active');
//【】这个$(this)就指向具体点的那一个item
当有类wrapper-active就说明点击图片了 然后在此前提下：
.wrapper-active .item:not(.active){w:0;h:0;}  所以说，给.item:not(.active)加了个
限制条件
//所以核心是 让一个图片展示或消失就是w、h的事儿
//我设想到一个网页点叉 或者 说图书馆电脑惠普声音控件这种
(3)让点开图片消失，恢复到一开始
承接(2)的来，取消掉.active和.wrapper-active
$('.close').click(function (e) {
    e.stopPropagation();
    $('.wrapper').removeClass('wrapper-active');
    $('.active').removeClass('active');

})
【】
细枝末节：
(4)每个item的背景图片
很容易写错成：.item .bg:nth-of-type(1)/(2){ };
(5).content{justify-content:spacebetween;}不是把.item{float:left/inline-block}
因为item就是图片间有制表符间隔，默认继承fnt-size大小16px，
(6)其他图片消失时，都向上缩（怎么让它在中间消失）：
设置.content{align-items:center;}就是它高度无论百分多少，都始终在中间
(7)关于字体：
.dis一开始的消失，到显示图片的出现，到随着图片消失而消失
.dis{opa:0; transition：opacity 0.2s linear;}
[transition是.dis随着图片消失而消失，opa从1又变为0时起作用]
 所以.dis出现时：.active .dis{opa:1;transition: opa 0.2s linear;}
点击图片展开，“image”消失掉
.wrapper-active .item .title{opa:0; transform: opa 0.2s linear 1s;}
出现时延迟，随着图片消失时立刻消失
[注意权重，不然可能被覆盖]

.title ——》“image”消失
.wrapper-active .item .title{opa:0; transform：opa 0.2s linear;}
【！！！没有js】
3.常用技巧总结
(1）因为随着页面大小变化，所以设置w/h都是百分比
(2)水平垂直居中也可用flex解决
父级：flex;justify-content/align-items:center（主轴、侧轴水平居中）
这个比top:50%,left:50%简单有效，而且设置弹性布局也方便后续
【容器/里面的项目】
(3)margin-left;margin-top 负1/2宽高，可用css3：translate(-50%, -50%);
(4)ul》li
轮播图里还有这里，用来装图片的容器
(5）
4.学习方法总结
(1）学习一个新项目要2遍 第一遍囫囵吞枣，第二遍，看遍代码，想想它为什么
这么写。肯定是不明白的，带着问题再看遍，然后边看边记，觉得这次的学习方法
还是不错的；
(2)pdf……如此吧
(3)项目总结还是比较好的
(4)总结就是升华
【4】书写习惯
先结构
然后css * 还有 布局，盒子m、p、w、h盒模型一些设置，font,color,bg-color（这个次序）
ps:
  心路历程：我一直在追求学完后自己能独立把它实现出来，不然我觉得自己很废，
等于还是没学会。但现在我觉得就算一个项目学完后，不能把它完全做出来或者
里面的东西你不能全懂，也没什么大不了。能掌握多少就多少，不是说你做不出来
之后就学不下去了。要学的东西还很多，学不会的更多……就一句话，这个项目不是
很重要，以后遇到，就把代码一粘，原理能懂就懂，不懂算了，不要钻牛角尖