前端开发技巧

判断可视

判断元素在窗口可视

function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有浏览器写法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    return top <= viewPortHeight
}

更简单的方法getBoundingClientRecct可以直接获取元素距离窗口的数据信息

如果一个元素在视窗之内的话，那么它一定满足下面四个条件：

• top 大于等于 0
• left 大于等于 0
• bottom 小于等于视窗高度
• right 小于等于视窗宽度

function isInViewPort(element) {
  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
  const {
    top,
    right,
    bottom,
    left,
  } = element.getBoundingClientRect();

  return (
    top >= 0 &&
    left >= 0 &&
    right <= viewWidth &&
    bottom <= viewHeight
  );
}

若要判断一个元素相对父元素是否可视，只需要判断该元素的offsetLeft/offsetTop和父元素的clientWidth/clientHeight即可。

垂直居中

vertical-align

vertical-align用于行内元素、行内块元素、表单元素 的垂直方向控制。添加在目标子元素上 。可以相对于父元素或行高使用。无效的场景需要使用line-height指明行高才能使用。

图形蒙版

对于同一形状，不同颜色的效果，可以使用图形蒙版进行实现

<style>
    /* 根据一个蒙版生成,同一形状各种颜色的图形 */
    .container {
      width: 200px;
      height: 200px;
      background-color: #000; //决定蒙版出来的颜色
      -webkit-mask-image: url("https://img-blog.csdnimg.cn/direct/0eb404f06e0b4430a3c6542634892ed5.png");
      mask-image: url("https://img-blog.csdnimg.cn/direct/0eb404f06e0b4430a3c6542634892ed5.png");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkir-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
   
    }
</style>
<div class="container"> </div>

一侧图片一侧文字布局

1.父容器设置overflow:hidden;

2.图片侧设置float

3.文字侧不用设置宽度,正常布局即可实现
float最初就是为了让文字环绕图片开发的

<style>
 .row_container {
      overflow: hidden;
    }

    .left_cover {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: black;
      border-radius: 20px;
    }

    .right_content {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;

    }
</style>
 <div class="row_container">
    <img src="https://img-blog.csdnimg.cn/direct/0eb404f06e0b4430a3c6542634892ed5.png" alt="" class="left_cover">
    <div class="right_content">
      <div class="title">标题</div>
      <div class="desc">
        一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话</div>
    </div>
  </div>

效果如下:

!在这里插入图片描述(https://i-blog.csdnimg.cn/direct/9c64f92b42dc4739bf054af5ded7418a.png