更新

參考文章：https://www.cnblogs.com/coco1s/p/14439760.html
鼠標(biāo)覆蓋按鈕實(shí)現(xiàn)變色

        .buttonArea {
           background: #47e;
        }
        .buttonArea:hover{
           background: #356cef;
        }

換行：
normal：只在允許的斷字點(diǎn)換行
break-word：在長單詞或 URL 地址內(nèi)部進(jìn)行換行

word-wrap: normal|break-word;

css選擇器

:first-child 用于選取屬于其父元素的首個(gè)子元素
：last-child 指定屬于其父元素的最后一個(gè)子元素

object-fit 屬性指定元素的內(nèi)容應(yīng)該如何去適應(yīng)指定容器的高度與寬度。
object-fit 一般用于 img 和 video 標(biāo)簽，一般可以對這些元素進(jìn)行保留原始比例的剪切、縮放或者直接進(jìn)行拉伸等。

ul li img { 
width: 150px; 
height: 100px; 
object-fit: cover; 
}

利用 object-fit: cover，使圖片內(nèi)容在保持其寬高比的同時(shí)填充元素的整個(gè)內(nèi)容框。

調(diào)整前

調(diào)整后

優(yōu)化手勢,用戶點(diǎn)擊時(shí)鼠標(biāo)手勢:

cursor: pointer; // 可點(diǎn)擊

布局：
flex-grow默認(rèn)值為0，用于子元素的寬度之和小于父元素的寬度時(shí)分配剩余空間
設(shè)置flex-grow:1,表示占滿剩余空間

為什么兩個(gè)頁面同樣的寫法樣式卻不一樣呢？

.table-content-item {
        padding:13px 15px;
        &.long-data {
          width: 210px;
        }
}

頁面1

頁面2

原因：因?yàn)槭褂昧私M件，第一個(gè)頁面自動(dòng)添加了box-sizing：border-box的樣式，造成了兩個(gè)頁面的寬度不一致。
box-sizing 有兩個(gè)常用屬性：
content-box 是默認(rèn)值。內(nèi)容寬度=width
border-box ：內(nèi)容寬度+padding+border=width

漸變色：

background: linear-gradient(90deg, #f47100 0%, #e60000 100%);

輸入框提示字體樣式
可設(shè)置input提示語的大小，顏色等樣式（與input輸入不同）

input::-webkit-input-placeholder{
     font-size: 14px;
     font-weight: 400;
     color: #999999;
     line-height: 16px;
}

輸入框在chorme瀏覽器自動(dòng)填充問題：

input:-webkit-autofill {
      box-shadow: 0 0 0 1000px white inset !important;
    }

修改前

修改后

文字超過固定寬度，顯示省略號（元素需是塊元素，否則不生效）

.overFont{
     // display：block；
     width: 200px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
}

多行文本省略

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

滾動(dòng)條樣式（當(dāng)想要實(shí)現(xiàn)滾動(dòng)效果又想滾動(dòng)條不可見時(shí)，設(shè)置height為0，或者display:none）

/*定義滾動(dòng)條高寬及背景 高寬分別對應(yīng)橫豎滾動(dòng)條的尺寸*/  
 ::-webkit-scrollbar  
 {  
     width: 16px;  
     height: 16px;  
     background-color: #F5F5F5;  
}