经典CSS

margin引起的两种塌陷问题：（1）margin重叠；可以设置margin的两者和，可以给其中一个盒子构成 BFCdisplay:block;或者position：absolute等；（2）父盒子不设置，子盒子设置margin-top:100px;此时父盒子也会margin-top:100px;可以给父盒子设置overflow:hidden;

前端页面适配使用rem换算：https://blog.csdn.net/top18oo/article/details/80248093

一、webp图片格式

二、画三角形

<div style="width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid red;"></div>

三、画自适应正方形

<div style="width: 50%; height: 50vw;background: red;"></div>

四、画直线

使用hr实现
<hr style="height: 5px; background: red; border:0px"/>

<div style="width:800px; height:1px; padding:0px; background-color:#D5D5D5; overflow:hidden;"></div>

画竖线
<div style="height:800px; width:1px; padding:0px; overflow:hidden; border-right: 1px solid blue;"></div>

四、渐变

从上到下渐变
<div style="width: 100px; height: 100px; background: linear-gradient(red, blue)"></div>

从右向左
<div style="width: 100px; height: 100px; background: linear-gradient(to left, red, blue)"></div>

从右下到左上
<div style="width: 100px; height: 100px; background: linear-gradient(to left top, red, blue)"></div>

径向渐变
<div style="width: 100px; height: 100px; background: radial-gradient(yellow, red, blue)"></div>

五、css实现动画

animation动画：https://blog.csdn.net/u011077672/article/details/82316551

    div{
      width: 100px; 
      height: 100px;
      background: red;
      animation-name: example;
      animation-duration: 10s;
    }
    @keyframes example{
      from {background: red;}
      to {background: blue;}
    }


    @keyframes example{
      0% {background: red;}
      10% {background: blue;}
      20% {background: yellow;}
      50% {background: green;}
      100% {background: purple;}
    }

    同时改变背景色和位置
    div{
      width: 100px; 
      height: 100px;
      background: red;
      animation-name: example;
      animation-duration: 20s;
      position: relative;
    }
    @keyframes example{
      0%   {background-color:red; left:0px; top:0px;}
      25%  {background-color:yellow; left:200px; top:0px;}
      50%  {background-color:blue; left:200px; top:200px;}
      75%  {background-color:green; left:0px; top:200px;}
      100% {background-color:red; left:0px; top:0px;}
    }

transition过渡动画

    .box {
      width: 100px;
      height: 100px;
      background: red;
      margin: 200px auto;
      transition: all 2s ease-in-out;
    }
    .box:hover{
      width: 200px;
      height: 200px;
    }

不是所有的CSS属性都支持transition。
transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。
transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。

执行变换的属性：transition-property，变换延续的时间：transition-duration，

在延续时间段，变换的速率变化：transition-timing-function，变换延迟时间：transition-delay

transform动画：

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

六、省略号实现

单行：
width: 100px;border: 1px solid red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
多行：
width: 100px;border: 1px solid red; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;

七、画圆环

<div style="width: 100px; height: 100px; background: red; border-radius: 50%; position: relative;">
    <div style="width: 80px; height: 80px; background: white; left: 10px; top: 10px; border-radius: 50%; position: absolute;"></div>
</div>

<div style="width: 100px; height: 100px; border: 10px solid red; border-radius: 50%; position: relative;"></div>

八、一个div只用css最多可以画几个圆（6个）

    div{
        height: 100px;
        width: 100px;
        border-radius: 100px;
        position: absolute;
        top: 40%;
        left: 40%;
        border: solid 10px purple;
        box-shadow: 0px 0px 0px 10px red,0px 0px 0px 10px black inset;
        background: gray;
      }
      div::after{
        content:' ';
        background-color: yellow; 
        border-radius: 100px;
        display: block;
        z-index: -1;
        position: relative; 
        left: -30px;
        top: -30px;
        width: 160px;
        height: 160px;
      }
      div::before{
        content:' ';
        background-color: green; 
        border-radius: 100px;
        display: block;
        z-index: -2;
        position: absolute; 
        left: -40px;
        top: -40px; 
        width: 180px;
        height: 180px;
      }
      </style>
    <div></div>

九、分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

结构：
display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承：
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能：
displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0 ：修改元素会造成重绘，性能消耗较少

联系：它们都能让元素不可见

十、修改代码从而改变图片宽度

<img src="1.jpg" style="width:480px!important;">

1、给图片设置max-width:300px
2、给图片设置transform: scale(0.625,0.625)，但是占据的位置还是原来的480px
3、给图片设置box-sizing: border-box;padding: 0 90px;，但图片左右会有90px的内边距
4、给图片设置zoom: 0.625
5、js获取元素使用imgs[0].setAttribute("style","width:300px!important;")或者imgs[0].style.cssText='width:300px;'
6、给图片设置动画，from{width:300px;}to{width:300px;}，动画时间为0s，原理是CSS动画的样式优先级高于!important的特性

十一、如何设计实现无缝轮播

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/108

无限轮播基本插件都可以做到,不过要使用原生代码实现无缝滚动的话我可以提点思路,
因为轮播图基本都在ul盒子里面的li元素,
首先获取第一个li元素和最后一个li元素,
克隆第一个li元素,和最后一个li元素,
分别插入到lastli的后面和firstli的前面,
然后监听滚动事件,如果滑动距离超过x或-x,让其实现跳转下一张图或者跳转上一张,(此处最好设置滑动距离),
然后在滑动最后一张实现最后一张和克隆第一张的无缝转换,当到克隆的第一张的时候停下的时候,,让其切入真的第一张,则实现无线滑动,向前滑动同理