1、flex佈局

2、box-shadow陰影

 box-shadow: h-shadow(必選) v-shadow(必選) blur spread color inset;

Example：

 box-shadow:0 0 20rpx #aaaaaa;

3、line-gradient漸變

 background: linear-gradient(to right, blue, white);

4、絕對定位使元素居中

可以用left:50%加上margin-left:-(寬度/2)，來實現絕對定位的水平居中，這裡的寬度指的是設定為絕對定位的元素的寬度

/* 可以用left:50%加上margin-left:-(寬度/2)，來實現絕對定位的水平居中，這裡的寬度指的是設定為絕對定位的元素的寬度 */
.popup {
    width:100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

5、vertical-align屬性圖片與文字對齊

      全部訂單
      

6、關於圖片、文字的居中

（1）圖片居中要在圖片本身上設定margin: 0 auto;
（2）文字居中要在其父元素上設定text-align: center;

<!-- html --&gt
113131313

// css
.father {
  text-align: center;
    image {
        width: 90rpx;
        height: 90rpx;
        display: block;
        margin: 0 auto;
    }
    text {
        font-size: 20rpx;
       color: #929292;
    }
}

7、單行居中，多行居左

8、css選擇器-獲取最後一個元素

:last-child  選擇屬於其父元素最後一個子元素每個

元素。

p:last-child {
  background: red;
}


  
這是標題
    
第一個段落。
    
第二個段落。
    
第三個段落。
    
第四個段落。
    
第五個段落。

9、文字溢位並顯示省略號？

white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;

10、文字超過兩行才溢位並顯示省略號？

擴充套件：

{
    width: 561rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}

###11、box-sizing
（1）問題場景
    在CSS中，設定的`width`和`height`只會應用到這個元素的內容區；如果這個元素有`border`或`padding`，那麼繪製到螢幕上時的盒子寬度和高度會加上設定的`borde`和`padding`。
這意味著當你調整一個元素的寬度和高度時需要時刻注意到這個元素的邊框和內邊距，在響應式佈局時，這個特點很煩人。

（2）解決

// 預設值
box-sizing: content-box;

box-sizing: border-box;

border-box告訴瀏覽器去理解你設定的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px，那麼這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數情況下這使得我們更容易的去設定一個元素的寬高。

###12、設定input中placeholder的文字樣式

// .inputClassName是標籤的類名，包括（input,textArea）;
.inputClassName::-webkit-input-placeholder {
color: #b6b6b6;
}
.inputClassName:-moz-placeholder {
color: #b6b6b6;
}
.inputClassName::-moz-placeholder {
color: #b6b6b6;
}
.inputClassName:-ms-input-placeholder {
color: #b6b6b6;
}

![input](https://upload-images.jianshu.io/upload_images/2891127-b4d1f9993aaaf648.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###13、獲取元素位置

![元素位置.jpg](https://upload-images.jianshu.io/upload_images/2891127-cdc8db98428f696c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###14、css3自旋轉動畫

@keyframes mymove {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
// @-moz-keyframes
// @-webkit-keyframes
// @-o-keyframes

.icon {
-webkit-animation: mymove 4.5s infinite linear;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
}

###15、持續更新。。（如果你遇到了坑或者有好的解決方案歡迎留言）

【原創首發於慕課網】