重慶潤雪科技有限公司(2008年至今),專注于網站建設、網站制作、網頁設計、小程序開發、公眾號開發、app開發的技術服務商。
每一步都修改到滿意后在付款,用價格、質量、服務說明一切。
日期:2021-05-06 10:27 瀏覽量:1438
在開發網站建設服務的時候難免會遇到各種小問題,將小問題整理以下方便下此直接使用。
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 元素隱藏,但元素仍舊存在,頁面中無法觸發該元素的事件。