CSS（不定时更新）

一、使用img后的高度多了4px

由于img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘。

将displayp设置为block即可消除4px的bug。

其实解决方法不止一种：
1.将图像定义成 img:{display:block;}
2.给父级设置固定高度，然后 overflow:hidden
3.设置 font-size:0;
4.设置 img 的 vertical-align: bottom;
5.设置 img 的 margin-bottom: -4px;

二、图片垂直居中

1、div{display: table-cell; text-align: center; vertical-align: middle;}

2、img{width: 100%; height: 100%; object-fit: scale-down;}

3、图片与文字垂直居中对齐，img{vertical-align: middle;}

 

三、过渡

div {transition: transform .4s;}

div:hover {transform: rotate(180deg);-webkit-transform: rotate(180deg); /* Chrome, Safari */}

 

四、滚动淡入

.animate {position: relative; top: 40px; opacity: 0;}

JS：

var stop = $(window).scrollTop();
var he = $(window).height();
$(".animate").each(function () {
  var eoffset = $(this).offset().top;
  if (stop + he > eoffset) {
    $(this).stop().animate({ top: "0px", opacity: "1" }, 600);
  }
});

 

五、字数超出显示...

单行 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

多行 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }