經常使用css+css3集錦

時間 2019-11-19

標籤經常使用 css+css3 css 集錦欄目 CSS 简体版

原文原文鏈接

就平時看到的，對本身有幫助的，暫且先記錄下來，備用。css

CSS強制英文、中文換行與不換行

　　　　一、word-break:break-all;只對英文起做用，以字母做爲換行依據
　　　　二、word-wrap:break-word; 只對英文起做用，以單詞做爲換行依據
　　　　三、white-space:pre-wrap; 只對中文起做用，強制換行
　　　　四、white-space:nowrap; 強制不換行，都起做用
　　　　五、white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行，超出部分隱藏且以省略號形式出現html

CSS Reset標準寫法

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, cc,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

圖片預加載

div.loader{
    background:url(images/hover.gif) no-repeat;
    background:url(images/hover2.gif) no-repeat;
    background:url(images/hover3.gif) no-repeat;
    margin-left:-10000px;
}

文本選擇

::selection { background:#d3d3d3; color:#555;}
::-moz-selection { background:#d3d3d3; color:#555;}
::-webkit-selection { background:#d3d3d3; color:#555;}

根據連接屬性統一替換連接樣式

/* external links */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內

　　最基本的：web

　　　　設置display屬性爲none，或者設置visibility屬性爲hidden瀏覽器

　　技巧性：app

　　　　設置寬高爲0，設置透明度爲0，設置z-index位置在-1000less

rgba()和opacity的透明效果有什麼不一樣？

　　rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，函數

　　而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）字體

Sass、LESS是什麼？

他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。flex

　　例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算，函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。網站

　　爲何要使用它們？

結構清晰，便於擴展。
能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對瀏覽器語法差別的重複處理，減小無心義的機械勞動。
能夠輕鬆實現多重繼承。
徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯。
display:none與visibility:hidden的區別

　　display : 隱藏對應的元素但不擠佔該元素原來的空間。

　　visibility: 隱藏對應的元素而且擠佔該元素原來的空間。

　　便是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。

垂直居中

1. 利用lineheight

2. 將父級div的設置爲display:table,將子div設置爲display:table-cell。而後就可使用table特有的vertical-align:middle屬性了。

3. 利用負邊距,先設置position：absolute而後設置top:50%接着設置margin-top:-(height/2)

4. 首先設置display:box,而後box-align:center爲兼容各瀏覽器請加相應前綴

水平居中

1. 塊級元素可使用margin:0 auto;

2. 行內元素想button之類的可使用text-align:center;

3. 使用負邊距，原理同垂直居中

4. 利用flexible-box，原理同垂直居中，設置box-pack:center

5. 若是父級元素的高度是未知的呢， line-height就很差肯定了，下面三行代碼爲你搞定由於再也不考慮父級元素的寬度了：

section{ //父元素
     display: -webkit-box;    
    -webkit-box-align: center;
    -webkit-box-pack: center;

     }

禁止a標籤點擊高亮,這些都是非官方屬性，但實用性超強

html,body{
     -webkit-touch-callout: none; //禁止或顯示系統默認菜單
     -webkit-user-select: none; //禁止長按複製選擇
     -webkit-tap-highlight-color: rgba(0,0,0,0);//禁止觸摸a標籤高亮 這個特別實用
 }

禁止換行多餘省略號

html代碼：

<div class='word'>
     看！我只顯示一行，多餘的用省略號表示喲
 </div>

css代碼：

.word{
    display:block; //若是是塊兒級元素能夠不用加
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

如果碰到需求是這樣的，讓文字顯示兩行多餘用省略號顯示呢？解決辦法以下：

.word{
    font-size:2.4rem; 
    line-height:130%;
    height: 7.0rem;
    line-height: 130%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //顯示的行數 
    -webkit-box-orient: vertical;

}

用百分比控制line-height

　　移動端應儘可能少使用px，用百分比控制更精確

line－height:100%;//兩行文字之間無空隙

使用：當拿到設計PSD時咱們先看字號是多少，好比24px; 文字的間距，好比10px; 那麼line-height=100%+(10/24)*100%; 這樣的行間距是最精確的而且響應各類設備。

文字上劃斜線

咱們知道在文字上劃橫線是 text-decoration: line-through;可是默認沒有劃斜線的屬性，這個經常使用於電商網站好比將原價用斜線劃掉
或者說用del標籤

　　　　　<div style="text-decoration: line-through">
            文字上劃斜線1
        </div>
        <div>
            <del>文字上劃斜線2</del>
        </div>

字號的使用變遷 px->em->rem->vw

前三種都不能到達響應的效果
vw是根據設備屏幕的百分比設置
 好比
 .a{
   font-size:10vw;//大小爲屏幕寬度的百分之十 固然不多有設這麼大的字
  }
由於vw設置的字體大小是根據屏幕大小改變而改變 因此在大屏幕上顯示會變大 根據可根據 需求使用

畫1px的細線

html代碼以下：

<div class='border1px'></div>

css代碼以下：

.border1px{  position: relative;}
.border1px:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid red;
    border-left:1px solid red;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}