html、css页面小效果、小功能总结

可能你刚开始接触前端，可能你第一次做项目，可能你刚开始工作。有一些页面的动画样式，一时不知道怎么写，每次看到都需要去百度，别慌，以下小功能的总结，让你学习办公更轻松。

1.文字过多，变成省略号形式

 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;

实现效果：    

2. 修改scroll滚动条默认样式

   /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 0.75rem;
        height: 0.75rem;
        background-color: #F5F5F5;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0.375rem #999;
        border-radius: 0.625rem;
        background-color: #F5F5F5;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 0.625rem;
        box-shadow: inset 0 0 0.375rem #999;
        background-color: #333;
    }

3. 设置盒子的上下左右阴影

box-shadow:

-2px 0 3px -1px green, //左边阴影

0 -2px 3px -1px blue, //顶部阴影

0 2px 3px -1px red, //底部阴影

2px 0 3px -1px yellow; //右边阴影

4. tr标签设置边框

border-collapse: collapse; //表格设置合并边框。将该语句放在table类(表格类的标签）里面均可。

5.点击其他位置关闭下菜单

有时后我们除了用表单中的select作为下拉菜单使用，同时也用ul,li,div,span 等做下拉菜单。点击菜单之外的位置使得下拉菜单关闭。

$("body").click(function (e) {
//closest()里面放点击不使下拉菜单关闭的元素
    if (!$(e.target).closest(".dropdown li,.container-fluid .active,.list-main input").length) {
        $('.dropdown').hide()
    }
})

6.有时候span标签会出现谜之间距。

span标签有的时候会出现谜之间距，span默认是行元素，在页面中展示的是连续并排排列的，可是有的时候两个span 标签之间会出现一个小间距，这可能是在页面中写的标签的格式不对

//会出现间隔
 <div class="customer-grade">
      <span>A级</span>
      <span>B级</span>
      <span class="active">C级</span>
      <span>D级</span>
</div>

//间隔消失
 <div class="customer-grade">
      <span>A级</span><span>B级</span><span class="active">C级</span><span>D级</span>
</div>

7. 如何获得元素的标签名

$(that)[0].tarName=='LI'

8.iframe //子集接受父级传来的参数

window.addEventListener('message', function (event) {
    EmpID = event.data.emptid
    getdata(EmpID)
})