CSS 常用方法小計

avwu 發布于2019-08-30 13:06 / 561人閱讀

摘要：清除浮動是在處理兼容性問題單行多行文字超出省略號多行單行移動端刪除默認的蘋果工具欄和菜單欄控制狀態欄顯示樣式頂部時間那一塊瀏覽器設置成急速模式頁面滾動穿透當彈出彈框的

1.清除浮動

1st:
.clear{
    clear:both; height: 0; line-height: 0; font-size: 0
}

2ed:
.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
}

3rd:
.outer {zoom:1;}    /*IE6/7*/
.outer :after {
    clear:both;content:".";display:block;
    width: 0;height: 0;visibility:hidden;
}   /*FF/chrome/opera/IE8*/

2.單行多行文字超出省略號

多行：
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;

單行：
width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

3.移動端meta



apple-mobile-web-app-capable : 刪除默認的蘋果工具欄和菜單欄
apple-mobile-web-app-status-bar-style : 控制狀態欄顯示樣式(頂部時間那一塊)


360瀏覽器設置成急速模式

4.頁面滾動穿透

當彈出 彈框的時候，給body設置overflow: hidden;
$("body").css("overflow","hidden");

彈框消失的時候，overflow: initial;
$("body").css("overflow","initial");

5.垂直水平居中

#parent {display: table}
#child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

//css3
.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

6.單詞換行中間加上

hyphens:auto

7.輸入框只能輸入數字

8.跨瀏覽器透明度

.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

9.CSS開啟硬件加速

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

//webkit內核
.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

10.Chrome and Safari中，使用CSS transforms 或者 animations閃爍

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

11.placeholder 不垂直居中

    line-height: normal;
    
    input::-webkit-input-placeholder { /* WebKit browsers */
      line-height: 1.5em;
    }
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      line-height: 1.5em;
    }
    input::-moz-placeholder { /* Mozilla Firefox 19+ */
      line-height: 1.5em;
    }
    input:-ms-input-placeholder { /* Internet Explorer 10+ */
      line-height: 1.5em;
    }

12.placeholder 顏色



:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

云服務器 GPU云服務器 query常用方法深度學習常用方法 file類常用方法 jquery常用的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115308.html

2018.12.24 無障礙學習小計

摘要：在中的規范，包括關于角色可以使用哪些元素和不使用哪些元素的指導英不啟用將網頁某個部分標記為，以便及時向用戶顯示更新內容，而不是用戶瀏覽這部分網站時更新可能位于初始頁面加載中不同的屏幕閱讀器和輔助技術對不同更改的響應不同，如果輔助技術不 ARIA 在 HTML 中的規范，包括關于 ARIA 角色可以使用哪些 HTML 元素和不使用哪些 HTML 元素的指導 https://www.w3....

Fundebug 2019-08-30 15:55 評論0 收藏0
2018.12.24 無障礙學習小計

摘要：在中的規范，包括關于角色可以使用哪些元素和不使用哪些元素的指導英不啟用將網頁某個部分標記為，以便及時向用戶顯示更新內容，而不是用戶瀏覽這部分網站時更新可能位于初始頁面加載中不同的屏幕閱讀器和輔助技術對不同更改的響應不同，如果輔助技術不 ARIA 在 HTML 中的規范，包括關于 ARIA 角色可以使用哪些 HTML 元素和不使用哪些 HTML 元素的指導 https://www.w3....

masturbator 2019-08-02 13:58 評論0 收藏0
2018.12.24 無障礙學習小計

摘要：在中的規范，包括關于角色可以使用哪些元素和不使用哪些元素的指導英不啟用將網頁某個部分標記為，以便及時向用戶顯示更新內容，而不是用戶瀏覽這部分網站時更新可能位于初始頁面加載中不同的屏幕閱讀器和輔助技術對不同更改的響應不同，如果輔助技術不 ARIA 在 HTML 中的規范，包括關于 ARIA 角色可以使用哪些 HTML 元素和不使用哪些 HTML 元素的指導 https://www.w3....

weapon 2019-08-23 14:16 評論0 收藏0
工作技術點小計14條 hybrid + animate 方向

摘要：設置動畫的時候直接設置和變化值不會起作用需要先設置等一小會再設置變化值安卓端窗口不可見時為關鍵幀圖片動畫響應式坑若設置的動畫為中代表階段分五步階段分步達到關鍵幀響應式設計方法為以為例圖片要按照計算后實際尺寸做動畫然后在兩幀之間按照圖的總幀設置transition 動畫的時候 , js直接設置duration 和變化值不會起作用 , 需要先設置duration , 等一小會再設置變...

mikasa 2019-08-21 17:37 評論0 收藏0