最近的一个项目总结
我写的内容，都是小地方，零碎处，而且每个点都没有深入研究，只是，解决了我的当前问题就行了。
本次用了半个多月，和一个后台一起做了一套页面展示，pc配置节目单，移动端微信webapp进行动态显示。反正描述起来，我也觉得自己做的真的垃圾，但是感觉期间又学到了很多的知识点。
首先从PC端的CSS开始总结吧
1、举这么一个栗子，我想要做一个框，里面可以页面滚动，框距离浏览器顶部50px，底部50px
<div id="container">
<div id="scrollContent">...</div>
</div>
#container {
margin-left: 50px;
width: 300px;
position: absolute;
top: 50px;
bottom: 200px;
border: 3px solid cyan;
overflow-y: auto; /*刚刚发现，使用overflow: auto或者overflow-x: auto也可以，看来只要能够影响默认的overflow就行*/
}
#scrollContent {
width: 100%;
height: 2000px;
background: -webkit-linear-gradient(bottom, #ccc, #000);
}
那么，我要做两件事，
第一，可以滚动，嗯，给父元素container设置overflow-y: auto;
第二，由于不同尺寸屏幕浏览器的宽高不固定，所以不知道框的高度，无法写出框的高度，同时没有高度的元素无法使用overflow，所以我们使用position，并且让top和bottom(如果横向可以left和right)同时设定值，效果类似于给标签设置了height(width)
对了，上次说了可以滚动，但是不想看到滚动条，直接 ::-webkit-scrollbar { width: 0; } ,这次说下更加详细的设置滚动条的样式吧（当然，仅限webkit内核，研究不深，能用就行）
/*如果没有下面的#container，直接::开始起步，则默认所有的滚动条都这么设置*/
#container::-webkit-scrollbar{ width: 6px; height:5px; background-color:yellow; /* 会被下面的几个颜色覆盖住 */ -webkit-border-radius:4px; } #container::-webkit-scrollbar-thumb { background-color: pink; -webkit-border-radius:4px; } /* 滑块样式*/ #container::-webkit-scrollbar-thumb:hover{ background-color: #aaa; -webkit-border-radius:4px; } /*---滚动框背景样式--*/ #container::-webkit-scrollbar-track-piece{ height: 20px; background-color:#eee; -webkit-border-radius:4px; }
2、行内块元素或者行内元素（是这么称呼吧，汗。。。）反正就是比如span放在一段文本p里面，span会跑到最顶部嘛诸如此类的乱七八糟，使用margin-top有可能影响到p中的文字的高度，嗯，给span等行内元素使用vertical-align:middle或者top，以这么作为指导方向进行调试，就能一下子ok的，具体的我还没有去研究（毕竟是个博客都懒得写的小白），但是粗略搜了一下，vertical-align就是行内元素或者行内块元素有效的。请记住这个属性，会有意想不到的帮助哦
vertical-align: middle;
3、额，看了下pc端的js逻辑部分，没啥好写的，顶多主要的就是一个使用bootstrap吧，这个回头单独写一下吧
好了，下面就是移动端了哦，依旧先说css部分
2.1、发现没啥可以说的，嗯，先说一个0.5px的线吧，其实百度也是一大堆方法，我还是记录一下其中自己喜欢的一种方法吧，毕竟记下来也比较有成就感
首先，当然是做一个标签啊。。。
<p class="half_bottom"></p>
然后，进行这么一个设置
.half_bottom {
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
最后一步，给它的before（after也ok啦，毕竟这里没有实质影响，所以下面的before和after随便写的，没有特别区别）进行设置
/*这是设置底部的一条.5px的线*/
.half_bottom:after {
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: 0;
border-bottom: 1px solid #000;
transform: scaleY(.5);
}
/*这是设置整个边框都是.5px*/
.half_bottom:before {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid cyan;
transform-origin: 0 0;
transform: scale(.5);
z-index: -1; /*这里不要忘记了z-index*/
}
一个元素包括可见的margin > border > padding > width/height，这就是我们都知道的盒模型，那么before和after在哪里呢？
嗯，before/after就处在padding以外，border的里面，所以，这里设定的.5px的线，不占用外部的空间，安全绿色放心
对于整个边框都是.5px，after（before也一样）会覆盖住content，所以我们要多一个z-index: -1，防止after影响我们的事件操作
2.2 多行省略号和单行省略号
/*多行文本超出隐藏*/ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; /*单行文本超出隐藏，必须要有width，至少父元素要有个width吧，这个不用在意，自己会用到的上面的多行文本同理*/ width: ***; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
这里有一个注意点，关于多行文本超出，不能够有height，不然显示过多或者不完全。而且不要用text-align: center/justify，不然会丑的，试了就知道了
2.3 对了，一个小细节，关于文本
文本是不是很乱？
我认为，如果UI让我们对齐，我们第一反应就是text-align: center;变成下面的效果了
但是其实我们应该做的是，文字两边对齐啊，扒了半天，才发现自己基础不扎实
看，上面的才是我们想要的效果对不对？？怎么做到？一句话，如下
text-align; justify;
汗，自己真的是，哎，思考不缜密，看东西不够透彻
嗯，最后一个，就是微信端的js的总结了，
2.4以前我说过我们后台会给我静态注入一些数据，其实原理没去在意，结果就是多给了一个<script>标签，里面给了些既定的内容，这样少了一个请求。但是呢，注入的一些数据，我需要提前声明一次，比如后台给我注入了一个var wplay = 'human';，我必须自己也要var wplay; 这样子才能够正常的使用wplay这个变量（注意，自己的声明要在window.onload外边，也就是所谓的全局变量（每个人都自己的看法，我认为没有全局变量，所有的内容一定都有再上一层的函数）中）
2.5额。。。把js文件扒出来一遍反复看，发现没啥可说的。。。说说自己的很大的一个缺点吧，就是学习插件框架能力很差，也是，毕竟技术差，读书少。所以这里手写了倒计时插件，时间格式化插件等等（当然是没有兼容性的啦，根本不算插件，还是说封装的函数吧），所用方法在我看来极其low还低能，并且严重的影响了开发效率。。。
最后想说的，去年年底说的每周都写一次博客，总结自己的能力，然后发现项目做了不少，但是太懒了，一直没总结，越拖越多。如今公司来了波新人（比我强），还交接了新的开发团队leader（不认识我），所以开发部仅仅我一个人闲置了好久，趁这个机会，赶紧学习，多写写博客用来记录开发问题吧。至少让自己无愧于心
ps：如果你看到了这里，谢谢你，我写的博客的确对大家的帮助不大，可是我还是发布首页了，而不是悄悄发布，估计进来的大家想要骂我了吧，这特么写的什么玩意！是的，如今我是很菜，在公司五个月但是进行着最笨的jquery开发，没啥高逼格，但是请相信，我也要相信自己，一会会有一天，发的博客不再是琐碎的总结，让人没头绪的瞎BB，而是给各位带来帮助。这一天，不会远！（错误欢迎指正哦，这次博客写的太草率了，我的锅）
