前端中的各种小知识点

来源：互联网发布：博拉网络股份有限公司编辑：程序博客网时间：2024/06/05 07:56

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

z-index无效

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

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

父标签 position属性为relative；
问题标签无position属性（不包括static）；
问题标签含有浮动(float)属性。
解决办法：
- position:relative改为position:absolute；
- 浮动元素添加position属性（如relative，absolute等）；
- 去除浮动。

水平方向滚动条

竖直方向上的滚动条比较常见，但是水平方向的是真少见，今天碰巧有水平方向滚动条的需求。
类似这种情况：ul li 列表，li不管多少个，都不换行，超过就出现水平滚动条。
解决办法：
1. 宽度固定。用min-width就可以实现
2. 宽度不固定。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>

获取iframe的父级

js: window.parent.document.getElementById()
jquery: $.(‘#objld’, window.parent.document);

mouseout和click冲突

在事件绑定的过程中，如果同时绑定了mouseout和click就会造成冲突的后果。解决办法：（参考mouseleave和mouseout以及mouseenter和mouseover的差别。）
1. 就是尽量用css伪类实现

阅读全文

0 0