网站建设服务中常用的几个前端css小知识

在开发网站建设服务的时候难免会遇到各种小问题，将小问题整理以下方便下此直接使用。

1、手机端当元素超出需要滚动的时候不流畅问题

overflow:scroll;-webkit-overflow-scrolling:touch;

2、css文字单行超出显示省略号

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

3、css文章多行超出显示省略号，下面的2就是显示的行数

text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;

4、修改滚动条的样式

div::-webkit-scrollbar 滚动条整体部分

div::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条

div::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb

div::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置

div::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去

div::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大，父级元素使用 overflow-hidden 截掉滚动条部分。暴力且直接。

5、用css小一个三角形，元素宽高设置为 0，通过 border 属性来设置，让其它三个方向的 border 颜色为透明或者和背景色保持一致，剩余一条 border 的颜色设置为需要的颜色。

div{

    width: 0;

    height: 0;

    border:5px solid transparent;

    border-top-color: red;

}

6、常用的隐藏元素的方法

display:none 元素不存在，从 dom 中删除

opacity:0  元素透明度将为 0，但元素仍然存在，绑定的事件仍旧有效仍可触发执行。

visibility:hidden 元素隐藏，但元素仍旧存在，页面中无法触发该元素的事件。