最近的一个项目总结

我写的内容，都是小地方，零碎处，并且每一个点都没有深刻研究，只是，解决了个人当前问题就好了。

本次用了半个多月，和一个后台一块儿作了一套页面展现，pc配置节目单，移动端微信webapp进行动态显示。反正描述起来，我也以为本身作的真的垃圾，可是感受期间又学到了不少的知识点。

　　首先从PC端的CSS开始总结吧

　　一、举这么一个栗子，我想要作一个框，里面能够页面滚动，框距离浏览器顶部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;  
}

　　二、行内块元素或者行内元素（是这么称呼吧，汗。。。）反正就是好比span放在一段文本p里面，span会跑到最顶部嘛诸如此类的乱七八糟，使用margin-top有可能影响到p中的文字的高度，嗯，给span等行内元素使用vertical-align:middle或者top，以这么做为指导方向进行调试，就能一会儿ok的，具体的我尚未去研究（毕竟是个博客都懒得写的小白），可是粗略搜了一下，vertical-align就是行内元素或者行内块元素有效的。请记住这个属性，会有意想不到的帮助哦

vertical-align: middle;

　　

　　三、额，看了下pc端的js逻辑部分，没啥好写的，顶多主要的就是一个使用bootstrap吧，这个回头单独写一下吧

 

好了，下面就是移动端了哦，依旧先说css部分

　　2.一、发现没啥能够说的，嗯，先说一个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，而是给各位带来帮助。这一天，不会远！（错误欢迎指正哦，此次博客写的太草率了，个人锅）