心系少時(shí)言 等一不歸人

注意：以下前綴兼容性寫(xiě)法注釋
-o-：Opera
-ms：//IE10
-moz：//火狐
-webkit：//Safari 4-5, Chrome 1-9

29. 移動(dòng)端1px邊框

.border-1px {
  position: relative;
  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid red;
  }  
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
  .border-1px {
    &::after {
      transform: scaleY(.7);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  .border-1px {
    &::after {
      transform: scaleY(.5);
    }
  }
}

28. 使用div實(shí)現(xiàn)input效果(實(shí)現(xiàn)一段可編輯的段落)

   <div contenteditable="true">這是一個(gè)可編輯的段落。</div>
  // 只需要加contenteditable="true"屬性就可以使div內(nèi)容可編輯

27. select內(nèi)容居中顯示

  select{
    text-align: center;
    text-align-last: center;
  }

select內(nèi)容居中顯示

26. nth-last-child偽類(lèi)選擇最后四個(gè)元素

    div:nth-last-child(-n+4){
      border-bottom: 2px solid red;
    }

nth-last-child偽類(lèi)選擇最后四個(gè)元素

25. 禁止點(diǎn)擊事件/鼠標(biāo)事件“穿透”

div * {
    pointer-events: none;   /*鏈接啊，點(diǎn)擊事件啊，都沒(méi)有效果了*/ 
}

除了指示該元素不是鼠標(biāo)事件的目標(biāo)之外，值"none"表示鼠標(biāo)事件“穿透”該元素并且指定該元素“下面”的任何元素。

24. 用來(lái)控制元素在移動(dòng)設(shè)備上使用滾動(dòng)回彈效果

.main{
    -webkit-overflow-scrolling: touch;
}

23. 文字漸變效果

.text-gradient{
    background-image: linear-gradient(135deg, deeppink, deepskyblue);
    -webkit-background-clip: text;
    color: transparent;
}

文字漸變效果

22. IOS鍵盤(pán)字母輸入，默認(rèn)首字母大寫(xiě)，解決方案

<input type="text" autocapitalize="off" />

21. select 下拉選擇設(shè)置右對(duì)齊

select option {
    direction: rtl;
}

20. 去除 iOS移動(dòng)端 input，textarea輸入框上方內(nèi)陰影樣式

CSS代碼：
input, textarea, select{
   appearance: none;
   -moz-appearance: none;   /*Firefox */
   -webkit-appearance: none;   /*Safari 和 Chrome*/
}

input輸入框上方有內(nèi)陰影效果圖

去除input輸入框上方的內(nèi)陰影效果圖

appearance屬性，用來(lái)移除原生控件樣式。亦可以用來(lái)去除 select 默認(rèn)樣式右側(cè)的下拉小三角形。

19. 自定義滾動(dòng)條樣式

整體部分 ::-webkit-scrollbar
兩端按鈕 ::-webkit-scrollbar-button
外層軌道 ::-webkit-scrollbar-track
內(nèi)層軌道 ::-webkit-scrollbar-track-piece
滾動(dòng)滑塊 ::-webkit-scrollbar-thumb
邊角 ::-webkit-scrollbar-corner
邊角拖動(dòng)塊的樣式 ::-webkit-resizer

橫向滾動(dòng)條

CSS代碼：
.scroll-horizontal::-webkit-scrollbar{
    height: 10px;
}
.scroll-horizontal::-webkit-scrollbar-button{
    display: block;
    width: 5px;
    border: 5px solid transparent;
}
.scroll-horizontal::-webkit-scrollbar-button:start:decrement{
    border-right-color: red;
}
.scroll-horizontal::-webkit-scrollbar-button:end:increment{
    border-left-color: red;
}
.scroll-horizontal::-webkit-scrollbar-button:end:decrement{
    display: none;
}
.scroll-horizontal::-webkit-scrollbar-button:start:increment{
    display: none;
}
.scroll-horizontal::-webkit-scrollbar-thumb{
    background-color: green;
    border-radius: 30px;
}
.scroll-horizontal::-webkit-scrollbar-track-piece{
    /* background-color: #0898b2; */
    border-radius: 30px;
}
.scroll-horizontal::-webkit-scrollbar-track{
    border: 1px solid #721f1f;
    border-radius: 30px;
    margin: 0 5px;
}

橫向滾動(dòng)條

豎向滾動(dòng)條

CSS代碼：
.scroll-vertical::-webkit-scrollbar{
    width: 10px;
}
.scroll-vertical::-webkit-scrollbar-button{
    display: block;
    height: 10px;
    border: 5px solid transparent;
}
.scroll-vertical::-webkit-scrollbar-button:end:increment{
    border-top-color: #1166DF;
}
.scroll-vertical::-webkit-scrollbar-button:start:decrement {
    border-bottom-color: #1166DF;
}
.scroll-vertical::-webkit-scrollbar-button:end:decrement,
.scroll-vertical::-webkit-scrollbar-button:start:increment{
    display: none;
}
.scroll-vertical::-webkit-scrollbar-track-piece{
    border-radius: 30px;
    background-color: #0b97b0;
    margin: 5px auto;
}
.scroll-vertical::-webkit-scrollbar-thumb{
    border-radius: 30px;
    background-color: green;
}

豎向滾動(dòng)條

18. 實(shí)現(xiàn)文字豎向排版

實(shí)現(xiàn)文字豎向排版，最簡(jiǎn)單的方法是設(shè)置較小的寬度，然后高度自適應(yīng)。

p{
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding: 8px 5px;
}

設(shè)置較小的寬度，高度自適應(yīng)

但是當(dāng)想要多列展示時(shí)，設(shè)置寬度就不能實(shí)現(xiàn)我們想要的效果了，此時(shí)可以使用
writing-mode 屬性。

p{
    height: 210px;
    line-height: 30px;
    text-align: justify;
    writing-mode: vertical-lr;  //從左向右    
    writing-mode: tb-lr;        //IE從左向右

    //writing-mode: vertical-rl;  -- 從右向左
    //writing-mode: tb-rl;        -- 從右向左
}

writing-mode 屬性實(shí)現(xiàn)豎向排列

17. 實(shí)現(xiàn)按比例計(jì)算淺紅到深紅的顏色值

設(shè)置 rgb，固定 r 值為 ff, 讓 g = b，從 ff 漸變到 0

紅色由深到淺

效果圖

16. calc 可以使我們不用考慮元素的寬度值，直接交給瀏覽器去計(jì)算

當(dāng)我們遇到左側(cè)寬度值固定，右側(cè)寬度值不定的時(shí)候，使用 calc 去設(shè)置元素的寬度是最好的解決辦法。
在IE9+、FireFox4.0+、Chrome19+、Safari6+都有較好的支持

支持 " + " 、" - " 、 " * " 、" / " （運(yùn)算符前后要加空格）
支持 " px " 、 " % " 、 " em " 、 " rem " 等單位 （可混合使用）

CSS代碼：
div .left{
    width: 200px;   //左側(cè)寬度固定
}
div .right{
    width: calc(100% - 200px);   
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
}

15. CSS實(shí)現(xiàn)圖片自動(dòng)按比例等比例縮小并垂直水平居中，圖片不變形

CSS代碼：
div{
    position: relative;
    width: 270px;
    height: 200px;
    border: 1px solid #e2e2e2;
}
div img{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    max-width: 270px;
    max-height: 200px;
    width:expression(this.width > 270? "270px" : this.width);  //當(dāng)?shù)桶姹綢E瀏覽器 不支持max-width屬性時(shí)執(zhí)行該語(yǔ)句
    height:expression(this.height > 200? "200px" : this.height);
}

14. 多行文本溢出顯示省略號(hào)

CSS代碼：
.box{
    width: 100%;
    overflow: hidden;
    display: -webkit-box;   //將對(duì)象作為彈性伸縮盒子模型顯示  *必須結(jié)合的屬性*
    -webkit-box-orient: vertical;   //設(shè)置伸縮盒對(duì)象的子元素的排列方式  *必須結(jié)合的屬性*
    -webkit-line-clamp: 3;   //用來(lái)限制在一個(gè)塊元素中顯示的文本的行數(shù)
    word-break: break-all;   //讓瀏覽器實(shí)現(xiàn)在任意位置的換行 *break-all為允許在單詞內(nèi)換行*
}

三行溢出點(diǎn)點(diǎn)點(diǎn)

13. 單行文本溢出顯示省略號(hào)

CSS代碼：
a{
    overflow: hidden;   //超出隱藏
    display: block;
    max-width: 116px;
    text-overflow: ellipsis;   //當(dāng)文本內(nèi)容溢出時(shí)顯示省略號(hào)
    white-space: nowrap;   //文本在同一行上不會(huì)換行，直到遇到 <br> 標(biāo)簽為止
    height: 40px;
    line-height: 40px;
    background-color: #f8f8f8;
    padding: 0 10px;
}

主要代碼：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

text-overflow: clip | ellipsis
clip: 不顯示省略號(hào)（...）
ellipsis: 當(dāng)文本內(nèi)容溢出時(shí)顯示省略號(hào)（...）

單行溢出點(diǎn)點(diǎn)點(diǎn)

12. 左右兩邊 div 的高度自適應(yīng)相等

需要將 margin 和 padding 的數(shù)值設(shè)置的越大越好
需要給父元素設(shè)置 overflow: hidden;

html代碼結(jié)構(gòu)：
<div class="w c pagecont">
    <div class="l pageleft"></div>
    <div class="l pageright"></div>
</div>

CSS代碼：
.c{
    overflow: hidden;
    zoom: 1;
}
.pageleft, 
.pageright {
    padding: 30px;
    margin-bottom: -10000px;
    padding-bottom: 10030px;
}

效果圖

11. CSS實(shí)現(xiàn)文本兩端對(duì)齊

CSS代碼：
div{
    text-align: justify;
    text-justify: distribute-all-lines;  //ie6-8
    text-align-last: justify;  //一個(gè)塊或行的最后一行對(duì)齊方式
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

10. IE6瀏覽器常見(jiàn)兼容問(wèn)題

// 橫向雙倍margin
IE6中設(shè)置元素浮動(dòng)后，會(huì)出現(xiàn)橫向雙倍margin值。--添加 _display: inline;
// 3px bug
浮動(dòng)塊元素處于同一行時(shí)，有默認(rèn)的3px間距。--設(shè)置非浮動(dòng)元素浮動(dòng)。
// 透明度
opacity: 0.6; --filter: alpha(opacity = 60);

9. PC端調(diào)用QQ實(shí)現(xiàn)在線聊天

點(diǎn)擊圖標(biāo)或者文字可以直接調(diào)用QQ實(shí)現(xiàn)在線聊天

<a  target="_self"><img border="0" src="http://wpa.qq.com/pa?p=2:80080088:51" title="在線客服" /></a>
//修改兩處QQ號(hào)即可

圖標(biāo)效果圖

<a href="tencent://message/?uin=80080088&amp;Site=Sambow&amp;Menu=yes">80080088</a>
//修改一處QQ號(hào)即可

文字效果圖

8. CSS3 Gradient 漸變

CSS3 Gradient 分為線性漸變和徑向漸變。

html代碼：
<div class = "gradient" style = "width: 120px; height: 80px; "></div>

CSS代碼：
background: #e6e6e6;   //當(dāng)瀏覽器不支持背景漸變時(shí)該語(yǔ)句將會(huì)被執(zhí)行
background: -o-linear-gradient(top, #fdfdfd,  #e6e6e6); 
background: -moz-linear-gradient(top, #fdfdfd, #e6e6e6); 
background: -webkit-linear-gradient(top, #fdfdfd, #e6e6e6);   //最新發(fā)布語(yǔ)法
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), #e6e6e6);   //老式語(yǔ)法

示例：

background: -webkit-linear-gradient(left top, #ccc, green, yellow, red);   //線性漸變
background: -webkit-radial-gradient(center, red, blue, #f96, green);   //徑向漸變
//不設(shè)置位置，將會(huì)均勻分布

效果圖

效果圖

background: -webkit-linear-gradient(top, #ccc 5%, #F95 30%, red);   //線性漸變
background: -webkit-radial-gradient(center, red 5%, blue 10%, #f96 40%,  green 100%);   //徑向漸變
//設(shè)置位置

效果圖

效果圖

background: -webkit-repeating-linear-gradient(-45deg, #f96, #f96 3px, green 3px, green 8px);   //線性重復(fù)漸變
background: -webkit-repeating-radial-gradient(red, #f96 2px, green 2px, green 8px);   //徑向重復(fù)漸變

效果圖

效果圖

共有三個(gè)參數(shù)，第一個(gè)參數(shù)表示線性漸變的方向，top是從上到下，left是從左到右，如果定義成left top 或者角度(-45deg)，那就是從左上角到右下角。第二個(gè)參數(shù)是起點(diǎn)顏色，第三個(gè)參數(shù)是終點(diǎn)顏色。可以在它們之間插入更多的參數(shù)，表示多種顏色的漸變。

IE依靠濾鏡實(shí)現(xiàn)漸變。
startColorstr表示起點(diǎn)的顏色，endColorstr表示終點(diǎn)顏色。GradientType表示漸變類(lèi)型，0表示垂直漸變，1表示水平漸變。

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f96, endColorstr=#ccc);   //IE9
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f96, endColorstr=#ccc)";   //IE8+

實(shí)例 （實(shí)現(xiàn)鼠標(biāo)移上時(shí)出現(xiàn)黑心圓點(diǎn)效果）

CSS代碼：
span{
    display: block;
    float: left;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #ccc;
    font-size: 0;
    background: #fff;
    margin: 0 5px;
}
span:hover{
    background: #676767;  
    background: -o-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
    background: -moz-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
    background: -webkit-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
}

實(shí)現(xiàn)黑心圓效果

7. CSS3 columns多列布局

div{
    //把div元素中的文本劃分為4列
           -moz-columns: 4;
        -webkit-columns: 4;
                columns: 4;
    //將div元素中的文本分為三列，并列間30px的間隔
        -moz-column-gap: 30px;
     -webkit-column-gap: 30px;
             column-gap: 30px;
    //規(guī)定列之間的寬度、樣式和顏色
       -moz-column-rule: 1px outset #fff;
    -webkit-column-rule: 1px outset #fff;
            column-rule: 1px outset #fff;
}

多列布局效果圖

6. 設(shè)置表單file控件上傳文件時(shí)可以選擇多個(gè)文件

<input type='file' multiple='true'>   //設(shè)置multiple屬性值為true

5. CSS實(shí)現(xiàn)一行水平居中，多行左對(duì)齊效果

html代碼：
<p class='text'><span>一行水平居中，多行左對(duì)齊。</span></p>
<p class='text'><span>一行水平居中，多行左對(duì)齊。一行水平居中，多行左對(duì)齊。一行水平居中，多行左對(duì)齊。</span></p>

css代碼：
.text {text-align: center;}
.text span {display: inline-block; text-align: left;}

4. 空白會(huì)被保留

css代碼:
white-space: pre;

3. 修改input輸入框中光標(biāo)的顏色不改變字體的顏色

input{
    color:  #fff;
    caret-color: red;
}

字體白色 光標(biāo)紅色

2. 修改input 輸入框中 placeholder 默認(rèn)字體樣式

//webkit內(nèi)核的瀏覽器 
input::-webkit-input-placeholder {
    color: #c2c6ce;
}
//Firefox版本4-18 
input:-moz-placeholder {
    color: #c2c6ce;
}
//Firefox版本19+
input::-moz-placeholder {
    color: #c2c6ce;
}
//IE瀏覽器
input:-ms-input-placeholder {
    color: #c2c6ce;
}

1. 去除瀏覽器中 input button 等標(biāo)簽獲得焦點(diǎn)時(shí)的帶顏色邊框

CSS代碼：
input, textarea, button{
    outline:none;
}

獲得焦點(diǎn)時(shí)的效果圖

去除樣式后的效果圖