網(wǎng)站建設(shè)服務(wù)中常用的幾個(gè)前端css小知識(shí)

在開(kāi)發(fā)網(wǎng)站建設(shè)服務(wù)的時(shí)候難免會(huì)遇到各種小問(wèn)題，將小問(wèn)題整理以下方便下此直接使用。

1、手機(jī)端當(dāng)元素超出需要滾動(dòng)的時(shí)候不流暢問(wèn)題

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

2、css文字單行超出顯示省略號(hào)

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

3、css文章多行超出顯示省略號(hào)，下面的2就是顯示的行數(shù)

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

4、修改滾動(dòng)條的樣式

div::-webkit-scrollbar 滾動(dòng)條整體部分

div::-webkit-scrollbar-thumb 滾動(dòng)條里面的小方塊，能向上向下移動(dòng)（或往左往右移動(dòng)，取決于是垂直滾動(dòng)條還是水平滾動(dòng)條

div::-webkit-scrollbar-track 滾動(dòng)條的軌道（里面裝有 Thumb

div::-webkit-scrollbar-button 滾動(dòng)條的軌道的兩端按鈕，允許通過(guò)點(diǎn)擊微調(diào)小方塊的位置

div::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動(dòng)條中間部分（除去

div::-webkit-scrollbar-corner 邊角，即兩個(gè)滾動(dòng)條的交匯處

div::-webkit-resizer 兩個(gè)滾動(dòng)條的交匯處上用于通過(guò)拖動(dòng)調(diào)整元素大小的小控件注意此方案有兼容性問(wèn)題，一般需要隱藏滾動(dòng)條時(shí)我都是用一個(gè)色塊通過(guò)定位蓋上去，或者將子級(jí)元素調(diào)大，父級(jí)元素使用 overflow-hidden 截掉滾動(dòng)條部分。暴力且直接。

5、用css小一個(gè)三角形，元素寬高設(shè)置為 0，通過(guò) border 屬性來(lái)設(shè)置，讓其它三個(gè)方向的 border 顏色為透明或者和背景色保持一致，剩余一條 border 的顏色設(shè)置為需要的顏色。

div{

    width: 0;

    height: 0;

    border:5px solid transparent;

    border-top-color: red;

}

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

display:none 元素不存在，從 dom 中刪除

opacity:0  元素透明度將為 0，但元素仍然存在，綁定的事件仍舊有效仍可觸發(fā)執(zhí)行。

visibility:hidden 元素隱藏，但元素仍舊存在，頁(yè)面中無(wú)法觸發(fā)該元素的事件。