前端开发技巧

判断可视

判断元素在窗口可视

javascript 复制代码
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 小于等于视窗宽度
javascript 复制代码
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指明行高才能使用。

图形蒙版

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

html 复制代码
<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最初就是为了让文字环绕图片开发的

html 复制代码
<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![左右布局效果图](https://i-blog.csdnimg.cn/direct/80f31a3c27b846109eeaabc258d094ca.png)

相关推荐
小磊哥er4 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
ᥬ 小月亮14 分钟前
webpack基础
前端·webpack
YongGit33 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试