学习前端面试知识

最新推荐文章于 2024-08-07 21:26:38 发布

BHDDGT

最新推荐文章于 2024-08-07 21:26:38 发布

阅读量749

点赞数 21

文章标签：学习

本文链接：https://blog.csdn.net/BHDDGT/article/details/140793967

版权

2024-7-30 打卡第四天学习视频链接

如何用css或者js实现多行文本溢出省略效果，考虑兼容性

display: -webkit-box;等设置涉及到了WebKit内核的浏览器（如Chrome、Safari），考虑到兼容性可以使用::after伪元素
现代浏览器都支持::after伪元素，但需要注意的是，在早期的IE浏览器中（如IE8及以下），可能需要使用单冒号语法（:after）来确保兼容性
开始只设置了p遇到一个问题，...出现在一行的最末尾。添加上限制宽度的div之后就正常了，line-height设置一行的高度，max-height是line-height的三倍表示最多三行，如果设置为40px就是两倍那就是限制为最多两行

<div class="myDiv">
        <p>这是一段很长很长的文字，多出来的会用省略号处理。这是一段很长很长的文字，多出来的会用省略号处理，会用省略号处理</p>
</div>
</body>
<style>
p{
    position : relative;
    line-height : 20px;
    max-height : 60px;
    overflow : hidden;
}
.myDiv{
    width:300px;
}
p::after{
    content : '...';
    position : absolute;
    bottom : 0;
    right : 0;
}
</style>

居中为什么要使用transform

margin是属于布局属性，该属性的变化会导致页面的重绘重排（回流）。对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到GPU中进行渲染
transform是合成属性，浏览器会为元素创建一个独立的复合层，当元素内容没有发生变化，该层不会被重绘，而是通过重新复合来创建动画。
与布局属性不同，合成属性通常不会触发重排或重绘，至少不会以同样的方式触发。当对这些属性进行动画处理时，浏览器会使用一个称为硬件加速的技术来优化渲染过程。这意味着浏览器会为该元素创建一个新的复合层（也称为堆叠上下文或图层），并将其与页面的其他部分隔离开来。在这个复合层中，元素的变化（如通过transform进行的移动、旋转或缩放）是在GPU上处理的，而不是在CPU上。GPU对这类操作进行了优化，因此可以非常快速地完成。当改变一个使用合成属性的元素时，浏览器不需要重新计算整个页面的布局或重新绘制页面的其他部分；相反，它只需要重新复合这个独立的图层，并将其与页面的其余部分组合在一起。这个过程比传统的重排和重绘要快得多，因为它避免了大量的计算工作。
下面的代码是一个让父组件全局，子组件在父组件垂直和水平居中的设置

<div class="parent">
    <div class="child"/>
</div>
</body>
<style>
.parent {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: blue;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 100px;
    transform: translateX(-50%) translateY(-50%);
    background-color: red;
}
html,body{
    height: 100%;
    width: 100%;
    margin: 0;
}
</style>

粘性布局sticky

粘性定位是一种特殊的定位方式，它不脱离文档流，结合了相对定位和固定定位（脱离了文档流）的特点。在元素达到某个滚动位置之前，它会像相对定位元素一样表现；一旦达到指定的滚动位置（例如，距离其父元素或视口的顶部一定距离），它就会表现得像固定定位元素一样，固定在指定位置
解析一下下面这段代码，按照现在的布局，先设置一个content，这时候需要滚动才能看到位于content下面的sticky，然后根据sticky的设置top:0，表示当向下滚动页面，sticky容器触碰到页面顶部，也就是top为0的时候，会固定在顶端，形成一种类似导航的效果。所以形容为融合了相对布局和绝对布局。

<div class="container">
    <div class="content">
        <p>滚动查看效果...</p>
    </div>
    <div class="sticky">粘性元素（滚动时固定）</div>
    <div class="content">
        <p>滚动查看效果...</p>
    </div>
    <div class="content">
        <p>滚动查看效果...</p>
    </div>
</div>
</body>
<style>
   body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* 调整为100%，因为滚动是由.container提供的 */
  }

  .sticky {
    position: sticky;
    top: 0; /* 当元素距离容器顶部0px时开始固定 */
    background-color: orange;
    padding: 10px;
    text-align: center;
  }

  .content {
    /* 足够的内容以触发滚动 */
    height: 1000px; /* 大于容器高度以触发滚动 */
    background-color: lightblue;
  }
</style>

png8,png24,png32的区别

png8 2^8大小，存储颜色种类256种/一张图片

png24 包含rgb（红绿蓝） 256*256*256种/一张图片

png32 等于png24+颜色透明色道 rgba 256种透明颜色

png图片压缩分为两个阶段
- 预解析预处理更方便压缩
- 压缩 deflate压缩（结合了LZ77算法和哈夫曼算法对图片进行编码）

css实现三角形

具体的原理说不太清楚，可以看一下下面这个代码例子，四个边框都是不同颜色的三角形，需要什么方向的就把其他方向的设置为transparent透明即可，设置宽度的话增加wdith就行

<div>
</div>
</body>
<style>
div{
    width:0;
    height:0;
    border:10px solid red;
    border-top-color: blue;
    border-left-color: green;
    border-right-color: yellow;
}