css 【實用】

CodeSheep 發布于2019-08-30 15:56 / 492人閱讀

摘要：可以用來多行文本的情況下，用省略號隱藏超出范圍的文本。設置或檢索伸縮盒對象的子元素的排列方式。限制在一個塊元素顯示的文本的行數。

實用樣式

以下內容：要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背

慎用寬高 盡量不要加 容易出現 bug 及兼容問題

清除浮動 在浮動的父級加

/* css */

.className::after{
    content:"";
    display: block;
    clear:both;
}

rem算法

/* css */

html { font-size: 62.5%; } /* IE9以下兼容 */
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

單行溢出變點點：

/* css */

.className{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

多行溢出變點點：

/* css */

.className{
    overflow: hidden;    
    display: -webkit-box;               // 將對象作為彈性伸縮盒子模型顯示 。
    text-overflow: ellipsis;        // 可以用來多行文本的情況下，用省略號“...”隱藏超出范圍的文本 。
    -webkit-box-orient: vertical;       // 設置或檢索伸縮盒對象的子元素的排列方式 。
    -webkit-line-clamp: 2;              // 限制在一個塊元素顯示的文本的行數。

}

文字兩端對齊：

css 

/* 中文文字兩端對齊 */

.className1{ 
    text-align:justify;
    text-justify:inter-ideograph
}

/* 英文文字兩端對齊 */
.className1{ 
    text-align:justify;
    text-justify:newspaper
}

css中如何讓第一個和最后一個不被選中?

tr:not(:first-child):hover {
        background: #ffffdd;
    }
/* 如果上面的代碼出現問題，使用下面的會更安全 或者 :not(class) */
.b:not(.b-n):hover {
    background: #ffffdd;
}

圖片變灰與原色

/* css */

.gray {  //灰色
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
    
    filter: gray;
}

.init {  //原色
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    
    filter: grayscale(0%);
    
    filter: ;
}

清除a的默認樣式

/* css */

.className1{ 
    text-decoration:none;
    out-line:none;
}

點擊跳轉頁面

/* html */
在新窗口跳轉至百度
在當前窗口跳轉至百度

云服務器 GPU云服務器漂亮實用實用實用函數比較實用

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

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

實用的 CSS — 動畫性能對比

摘要：歡迎移步我的博客閱讀實用的動畫性能對比前言在現代瀏覽器中，渲染頁面所要負責的線程主要有兩個主線程和排版線程。經過上面的實驗，我們對屬性有了比較好的了解同時我們對上述動畫性能也有一個了解。歡迎移步我的博客閱讀：《實用的 CSS — 動畫性能對比》前言在現代瀏覽器中，渲染頁面所要負責的線程主要有兩個：主線程和排版線程。主線程運行 JS 計算 HTML 元素的 CSS 樣式布局...

jonh_felix 2019-08-29 12:57 評論0 收藏0
CSS進階篇--CSS實用技巧制作三角形

摘要：實現如圖所示的三角形圖標代碼樣式需要猛點該文字，百度云盤下載實現如圖所示的三角形圖標：showImg(https://segmentfault.com/img/bVpG2N); html代碼： css樣式： body{background:#faf7ef;} div{margin:20px auto} div.arrow-up { width:0px; height...

Steven 2019-08-28 18:15 評論0 收藏0
js實用方法記錄-js動態加載css、js腳本文件

摘要：測試動態加載到標簽并執行回調方法調用加載成功動態加載腳本地址回調函數加載樣式站中下載打開方法測試頁面跳轉到微信中不能打開其他安卓手機嘗試調用未指定需要打開的可參考自定義協議參數轉換參考參數轉對象使用對象轉參數 js實用方法記錄-動態加載css/js 1.動態加載js文件到head標簽并執行回調方法調用：dynamicLoadJs(http://www.yimo.link/static/...

shusen 2019-08-23 13:10 評論0 收藏0
js實用方法記錄-js動態加載css、js腳本文件

摘要：測試動態加載到標簽并執行回調方法調用加載成功動態加載腳本地址回調函數加載樣式站中下載打開方法測試頁面跳轉到微信中不能打開其他安卓手機嘗試調用未指定需要打開的可參考自定義協議參數轉換參考參數轉對象使用對象轉參數 js實用方法記錄-動態加載css/js 1.動態加載js文件到head標簽并執行回調方法調用：dynamicLoadJs(http://www.yimo.link/static/...

Dogee 2019-08-02 11:59 評論0 收藏0
js實用方法記錄-js動態加載css、js腳本文件

摘要：測試動態加載到標簽并執行回調方法調用加載成功動態加載腳本地址回調函數加載樣式站中下載打開方法測試頁面跳轉到微信中不能打開其他安卓手機嘗試調用未指定需要打開的可參考自定義協議參數轉換參考參數轉對象使用對象轉參數 js實用方法記錄-動態加載css/js 1.動態加載js文件到head標簽并執行回調方法調用：dynamicLoadJs(http://www.yimo.link/static/...

sanyang 2019-08-29 17:14 評論0 收藏0