日本特黄一级-日本特黄特色aa大片免费-日本特黄特色aaa大片免费-日本特黄特黄aaaaa大片-二级特黄绝大片免费视频大片-二级片在线观看

LOGO logo

需求 開發 交付;每一步修改到滿意后在付款。

下載到桌面 免費獲取解決方案
當前位置: 網站建設/ 網站建設服務/ 網站建設服務中常用的幾個前端css小知識

網站建設服務中常用的幾個前端css小知識

日期: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 元素隱藏,但元素仍舊存在,頁面中無法觸發該元素的事件。


友情鏈接