css|这些场景题你确定你都知道吗🔥🔥单行溢出|多行溢出|元素时候可见区域，主要应用于图片懒加载|z-index失效

1、行溢出

单行文本溢出1：

overflow: hidden;
/* 不换行 */
white-space: nowrap;
/* 溢出的用冒号代替 */
text-overflow: ellipsis;

image (12).png

单行文本溢出2： 单行溢出还可以采用伪元素的方式

        .demo {
            position: relative;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
        }
        .demo::after{
            content: '...';
            position: absolute;
            top: 0;
        }

image (13).png

多行文本溢出：

/* 控制行数 */
-webkit-line-clamp: 4;
/* 设置为弹性伸缩盒子 */
display: -webkit-box;
/* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
-webkit-box-orient: vertical;
/* 溢出隐藏 */
overflow: hidden;
/* 溢出的用冒号代替 */
text-overflow: ellipsis;

image (14).png

2、元素是否在可视区域

clientHeight ：元素的像素高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边距

offsetTop：元素到offsetParent顶部的距离

offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body

image (19).png

scroolTop：, scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。

当满足条件**offsetTop-scroolTop<clientHeight **图片进入可视区域

image (20).png

图片懒加载核心代码

<script>
    //获取所有图片选择器
    let imgs = document.querySelectorAll('img');
    // 在页面布局的过程中存在着offsetTop不是body的情况，所以需要不断的累加，直到出现body
    function getTop(e) { 
        let T = e.offsetTop;
        console.log(T);
        while (e = e.offsetParent) {

            T += e.offsetTop;
        }
        return T;
    }
    function lazyload(imgs) {
        //可视区高度
        let H = document.documentElement.clientHeight;
        let S = document.documentElement.scrollTop || document.body.scrollTop;
        for (let i = 0; i < imgs.length; i++) {
            if (H + S > getTop(imgs[i])) {
             // body 中的样式<img data-src="../img/1.jpeg" alt="">
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }
    window.onload = window.onscroll = function () {
        lazyload(imgs);
    }
</script>

3、z-index失效

1.第一种情况（z-index无论设置多高都不起作用情况）

1、父标签 position属性为relative；

2、标签无position属性（不包括static）；

3、标签含有浮动(float)属性。

2. 解决

父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

4、样式执行顺序

在元素上指定类的顺序是没有用的，样式的展示取决于在样式声明中定义的顺序都显示为绿色，因为样式的顺序是先黄色，后来被覆盖，成绿色

    <style>
        .b {
            width: 200px;
            height: 200px;
            background: yellow;
            margin-bottom: 20px;
        }
        .a {
            width: 200px;
            height: 200px;
            background: green
        }
    </style>
</head>
<body>
    <div class="a b"></div>
    <div class="b a"></div>
</body>

image (21).png

5、12px的问题

思考💡：在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px？

chrome的最小字体设置12px，设置更小字体的方法：

（1）webkit-text-size-adjust:none; 【缺点】：（chorme27 之后废除）

（2）-webkit-transform:scale(0.5); 设置缩放属性【缺点】：适用display：block、inline-block的元素，但是元素的宽高不会变化，因为transform设置的所有属性不会影响布局，不会重排

（3）zoom：0.5 ；设置缩放【缺点】：存在兼容性问题

6、li会出现留白的情况

<!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>
    <style>
        ul{
            width: 400px;
            height:400px;

        }
        ul li{
            width: 100px;
            height: 100px;   
            display: inline-block;         
        }
        .li1{
            background-color: burlywood;
        }
        .li2{
            background-color:darkgray;
        }
        .li3{
            background-color:crimson;
        }
        .li4{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li1">1</li>
        <li class="li2">2</li>
        <li class="li3">3</li>
        <li class="li4">4</li>
    </ul>
</body>
</html>

image (2).png

产生原因

浏览器在渲染display的值为inline或者inline-block的元素时，会把空白字符或者空格换行（tab）渲染换成一个空格，而一个空格就占据一个字符的宽度，也就会出现留出空白的情况

解决方案1:

li标签写下一行上，不换行

//li标签写下一行上，不换行
    <ul>
        <li class="li1">1</li><li class="li2">2</li><li class="li3">3</li><li class="li4">4</li>
    </ul>

image (3).png

解决方案2：

将ul的字体大小设置成0，也就不会显示空格了

// 将ul的字符大小设置成0，也就不会显示空格了
       ul {
            width: 400px;
            height: 400px;
            font-size: 0;

        }

image (4).png

解决方案3：

给ul设置 letter-spacing: -5px;给li设置letter-spacing: normal;

// 给ul设置  letter-spacing: -5px;给li设置letter-spacing: normal;
        ul {
            width: 400px;
            height: 400px;
            letter-spacing: -5px;

        }

        ul li {
            width: 100px;
            height: 100px;
            display: inline-block;
            letter-spacing: normal;
        }

image (5).png

思考💡：letter-spacing和 word-spacing的区别？

        p {
            /* letter-spacing针对任意字符  word-spacing针对单词之间的距离*/
            letter-spacing: normal;
            word-spacing: 10px;
        }

7、小图片覆盖大盒子的几种操作

要求图片比例不变，覆盖盒子

图片 150X200 盒子 200X200

    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background: url(./img/150X200.jpeg) no-repeat;
            /* background-size: 100% 100%; 图片会变形 */
            /* background-size: 100% auto; 可以*/
            /* background-size:cover;  可以 */
            /* background-size:contain;   会留白，图片不变形 */

        }
    </style>

对contain的理解，contain是100% auto 或者是auto 100% ,因为他总是按照比例缩放，同时保证一侧能够沾满，如果宽沾满，那可以高留白，如果高沾满，那可能宽留白

参考👀

blog.csdn.net/weixin_4745…