前端中的各种小知识点

最新推荐文章于 2024-09-04 11:26:21 发布

i大俊

最新推荐文章于 2024-09-04 11:26:21 发布

阅读量695

点赞数

分类专栏： CSS与HTML JAVASCRIPT基础文章标签：前端工作

本文链接：https://blog.csdn.net/hope_It/article/details/72865467

版权

JAVASCRIPT基础同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

CSS与HTML

21 篇文章 0 订阅

订阅专栏

这篇博文，意在记录前端所需要用到的小知识点，一些不容易留意，但是工作中需要用到和留意的知识点。

z-index无效

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意：值可以为负数

什么情况下z-index会不起作用。

父标签 position属性为relative；
问题标签无position属性（不包括static）；
问题标签含有浮动(float)属性。
解决办法：

position:relative改为position:absolute；
浮动元素添加position属性（如relative，absolute等）；
去除浮动。

水平方向滚动条

竖直方向上的滚动条比较常见，但是水平方向的是真少见，今天碰巧有水平方向滚动条的需求。
类似这种情况：ul li 列表，li不管多少个，都不换行，超过就出现水平滚动条。
解决办法：

宽度固定。用min-width就可以实现
宽度不固定。ul设置：white-space: nowrap;li设置：display:inline-block;实现。
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .test ul{  
            list-style-type: none;
            width: 100%;
            white-space: nowrap;  
        }  
        .test ul li{  
            display: inline-block;
            width:20%;
            text-align: center;
        }  
    </style>
</head>
<body>
    <div class="test">
        <ul>
            <li>审讯</li>
            <li>询问</li>
            <li>管理</li>
                        <li>审讯</li>
            <li>询问</li>
            <li>sfsf</li>
            <li>sdfs</li>
        </ul>
    </div>
</body>
</html>