CSS常见问题

css和js两种方式实现div右移1000px动画

CSS实现方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 100px;
        height: 100px;
        background-color: brown;
        position: relative;
        animation: mytest 3s linear 1s;
    }

    @keyframes mytest {
        1% {
            left: 0px;
        }

        20% {
            left: 200px;
        }

        50% {
            left: 500px;
        }

        70% {
            left: 700px;
        }

        100% {
            left: 1000px;
        }
    }
</style>

<body>
<div id="box"></div>
</body>

</html>

JS方式

<! DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
    }
</style>

<body>

<div id="box"></div>

</body>

</html>
<script>
    var oBox = document.getElementById("box")
    oBox.onclick = function() {
        moveDiv(1000)
    }

    function moveDiv(data) {
        clearInterval(mytimer)
        var mytimer = setInterval(function() {
            let speed = 10;
            if (oBox.offsetLeft != data) {
                oBox.style.left = oBox.offsetLeft + speed + 'px'
            } else {
                clearInterval(mytimer)
            }
        }, 50)
    }
</script>

visibility、display、opacity的区别

说明：

opacity 用来设置透明度
display 定义建立布局时元素生成的显示框类型
visibility 用来设置元素是否可见。
opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。

使用 opacity 和 visibility 属性时，元素还是会占据页面空间的，而使用 display 属性时，元素不占据页面空间。

是否占据页面空间：

使用 opacity 和 visibility 属性时，元素还是会占据页面空间的，而使用 display 属性时，元素不占据页面空间。

对子元素的影响

如果子元素什么都不设置的话，都会受父元素的影响，和父元素的显示效果一样。

使用 opacity 和 display 属性时，父元素对子元素的影响很明显，子元素设置的 opacity 和 display 属性是不起作用的，显示的效果和父元素一样，而使用 visibility 属性时，子元素如果设置为 visibility:visible; 并没有受父元素的影响，可以继续显示出来。

自身绑定的事件是否能继续触发

这里说的触发事件，是指用户人为的触发的事件，不包括使用 JavaScript 模拟触发的事件。

使用 visibility 和 display 属性，自身的事件不会触发，而使用 opacity 属性，自身绑定的事件还是会触发的。

是否影响其他元素触发事件

visibility 和 display 属性是不会影响其他元素触发事件的，而 opacity 属性如果遮挡住其他元素，其他的元素就不会触发事件了。

是否产生回流

回流

当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流。

是否产生重绘

重绘

当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。

dispaly 和 visibility 属性会产生重绘，而 opacity 属性不一定会产生重绘。

是否支持transition

opacity 是支持 transition的，一般淡入淡出的效果就是这样实现的。

visibility 也是支持 transition 的。

visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”

visibility : hidden; 可以看成 visibility : 0;
visibility : visible; 可以看成 visibility : 1;

只要 visibility 的值大于0就是显示的，所以
visibility:visible 过渡到 visibility:hidden，看上去不是平滑的过渡，而是进行了一个延时。

总结

单行文本溢出处理

.text-ellipsis-single{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//响应式截断，当文本溢出的时候才显示省略号

多行文本截断

//多行文本注意设置 line-height
.text-ellipsis-multiple{
    -webkit-line-clamp: 2；// webkit 内核浏览器支持的行数
    display: -webkit-box；
    -webkit-box-orient: vertical；
    overflow: hidden；
    text-overflow: ellipsis；// clip|ellipsis|string 截断|省略号|自定义字符串
}

flex布局

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox

flex：1

flex：是 flex-grow、flex-shrink、flex-basis的缩写，默认值为0 1 auto。后两个属性可选

flex-grow：定义项目的放大比例，默认为0。即如果存在剩余空间，也不放大

flex-shrink：定义项目的缩小比例，默认为1。即如果空间不足，该项目将缩小

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

flex: 1，它等价于：flex: 1 1 0%;

这意味着：
flex-grow: 1;：项目可以放大以填充可用空间。
flex-shrink: 1;：项目可以缩小，与其他项目一起适应容器。
flex-basis: 0%;：在计算flex-grow分配多余空间前，该项目没有固定的基准大小，将首先考虑flex-grow来分配空间。

transition、transform、translate的区别

transform

字面意思是：使…变形

属性的作用是对给定的元素旋转，缩放，平移或扭曲，通过修改元素的坐标空间实现。

使用方式：transform: rotate | scale | skew | translate |matrix;

所以当我们需要对元素做这些操作时，就需要使用 transform 属性。

translate

在 transform 的值中应该发现了 translate ， translate 的意思就是平移，将元素按照坐标轴上下左右移动

使用方式： transform: translate(200px,50px); 元素较原先的位置，往右移动 200px，往下移动 50px

注意， translate 属性需要在 transform 中才能使用， translate 其实也是属于修改元素的空间位置。

transition

字面翻译是过渡的意思，这个属性可以让元素的变化以动画的形式呈现，比如说过高度从100变到200 height:100px -> 200px ，没有其他属性的情况下，这个就是一瞬间的事，为了让页面交互友好些，希望高度的变化能有个过渡效果，那么 transition 就派上用场了。

官方介绍： transition 提供了一种在更改CSS属性时控制动画速度的方法，其可以让属性变化成为一个持续一段时间的过程。

transition 用来做动画效果非常的方便，但缺点也很明显，动画不支持循环，复杂的动画就难为它了，所以适用于一些简单的过渡效果。

它有四个值：

transition-property：指定属性用于生成过渡动画，如宽、高、颜色等等，包括上面介绍的 transform ，只要这个属性的值是可以变化就行，且起始状态都是明确的。
transition-duration：动画执行时间
transition-timing-function：缓动函数，内置了这些 ease | linear | ease-in | ease-out | ease-in-out ，也可以上 easings.net/ 挑选自己喜欢的效果
transition-delay：延迟执行的时间

总结

transform 是用来实现元素坐标空间的变化， translate 用来移动元素， transition 给元素的变化加上动画效果。

如何画一条 0.5px 的边框

如果我们直接设置0.5px，在不同的浏览器会有不同的表现，使用如下代码：

<!DOCType html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .hr {
            width: 300px;
            background-color: #000;
        }
        .hr.half-px {
            height: 0.5px;
        }
        .hr.one-px {
           height: 1px;
        }
    </style>
</head>
<body>
    <p>0.5px</p>
    <div class="hr half-px"></div>
    <p>1px</p>
    <div class="hr one-px"></div>
</body>
</html>

其中Chrome把0.5px四舍五入变成了1px，而firefox/safari能够画出半个像素的边，并且Chrome会把小于0.5px的当成0，而Firefox会把不小于0.55px当成1px，Safari是把不小于0.75px当成1px，进一步在手机上观察IOS的Chrome会画出0.5px的边，而安卓(5.0)原生浏览器是不行的。所以直接设置0.5px不同浏览器的差异比较大，并且我们看到不同系统的不同浏览器对小数点的px有不同的处理。所以如果我们把单位设置成小数的px包括宽高等，其实不太可靠，因为不同浏览器表现不一样。

第二种能想到的方法是缩放，能否设置1px，然后scale 0.5呢，我们可以尝试一下，如下代码所示：

<style>
.hr.scale-half {
    height: 1px;
    transform: scaleY(0.5);
}
</style>
    <p>1px + scaleY(0.5)</p>
    <div class="hr scale-half"></div>

效果如下图所示：

我们发现Chrome/Safari都变虚了，只有Firefox比较完美看起来是实的而且还很细，效果和直接设置0.5px一样。所以通过transform: scale会导致Chrome变虚了，而粗细几乎没有变化。但是如果加上transform-origin: 50% 100%：

.hr.scale-half {
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 50% 100%;
}

大家就都变实了，很完美，Chrome的效果如下

BFC原理及作用

常见的CSS三种布局模型：

CSS中的三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer）。

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

只要元素满足下面任一条件即可触发BFC特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

parent元素宽高不定，实现scale固定宽高比始终为4：3

<div class="div">
    <div class="child"></div>
</div>
<style>
    .div{
    width: 100px;
    height:100px;
    border:1px solid #000;
    position: relative;
    overflow: visible
}
.child{
    transform: scale(1,.75);
    width: 100%;
    height: 100%;
    position: absolute;
    border:1px solid #000;
    top: 0;
    left: 0;
}
</style>