随笔

　　最近真的是太忙了，回头一看，竟然有2个多月没更新博客了。回顾换了工作后的两个月以来，真的是觉得忙忙忙，累累累，但是收获还是很多，见过了很多没见过的东西。刚来的时候，一个同事帮我定位bug，几分钟搞定，而我之前花了一个多小时甚至更多，光是看他定位bug的操作，就能长知识，佩服他的思维逻辑，一步推一步，怪不得这么迅速。

　　先记录几个还记得。

　　1.calc(100% - 20px)------用来设置宽度，比100%少20px

　　  当在less中时要这么写：calc(~"100% - 20px")

　　  100%和-和20px间要留出空格

　　2.开发者工具的Evnet Listeners可以找到元素上的事件

　　3.注册事件加命名空间更严谨，不会被别人的相同事件覆盖

　　4.@media这个样式总是记不住怎么用

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
//注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
//所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

　　5.学会了gulp编译less

　　在less中引入less:@import 'main.less';

　　6.这两个要搭配使用，某些浏览器默认的对齐方式不同，不设置可能会导致样式问题

display: inline-block;
vertical-align: middle;

　　7.在less中写hover,active

.icon{
    &:hover{}
    &:active{}     
}

　　点击的样式可以卸载:active中

　　划过的样式可以写在:hover中

　　8.滚动条样式设置

　　  ::-webkit-scrollbar滚动条的外围

　　  ::-webkit-scrollbar-thumb滚动条本身

　　.messages-list::-webkit-scrollbar{
        width: 2px;
        background-color: #F0F0F0;
        border-radius: 100px;
        -webkit-border-radius:100px;
    }
    .messages-list::-webkit-scrollbar-thumb{
        border-radius: 100px;
        -webkit-border-radius:100px;
        background-color: #999;
    }