首先不管你承不承認幹前端這一行除了沒 bug 還需要介面美觀度達到一定的值。否則是不可能讓你通過的，這篇文章不是講如何用 css 做酷炫的效果，比如實現個三角形、多邊形、土星的。這裡寫的都是最普通的常用的操作，例如如何快速重置預設樣式，如何實現文字最多隻有三行，超過三行省略顯示，這裡總結的是平常非常常見的操作但是比起設定元素的寬、高、顏色、字型又沒那麼好記憶。於是我幫你分門類別的記錄了一下
經常使用，又記不住的 CSS 樣式
1. 快速重置表單元素 unset
原始的 button 按鈕要重置挺麻煩的。洋洋灑灑的要設定好幾個屬性，就像下面這樣：
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}複製程式碼其實你只需要這樣就可以(像平時用的特別多的 input textarea )：
button { all: unset; }複製程式碼2.文字省略號顯示
文字省略號是非常常見的需求，而省略號展示又通常分為倆種情況折行和不折行。不折行：
div {
white-space:nowrap;/* 規定文字是否折行 */
overflow: hidden;/* 規定超出內容寬度的元素隱藏 */
text-overflow: ellipsis;
/* 規定超出的內容文字省略號顯示，通常跟上面的屬性連用，因為沒有上面的屬性不會觸發超出規定的內容 */
}複製程式碼折行(能主動控制行數,這裡設定的超出 4 行顯示省略號)：
div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /* 將物件作為彈性伸縮盒子模型顯示 */
-webkit-line-clamp: 4; /* 控制最多顯示幾行 */
-webkit-box-orient: vertical; /* 設定或檢索伸縮盒物件的子元素的排列方式 */
}複製程式碼3.改變盒模型的寬高計算方式
預設：盒模型的寬高 = 內容寬 + padding + border
通常我們寫頁面的時候會直接固定好元素的寬高，後面才會在接著設定 padding，border 這些細節。然後設定了 padding，border 之後發現元素尺寸發生了變化，這種情況很是煩人，所以我們需要下面的理想情況↓
理想: 盒模型直接設定的寬為最終寬，不會隨 padding，border 改變
box-sizing:border-box;複製程式碼4.改變滾動條樣式
首先要明確滾動條的組成分為三個部分，滾動條容器 scrollbar, 滾筒條軌道 scrollbar-track,滾動條滑塊 scrollbar-thumb。然而我寫這篇文字的時候嘗試了一下軌道的內容可以直接在容器設定，也就是沒有清晰的區分容器和軌道之間的區別，有知道的同學還麻煩告知，謝謝。
div::-webkit-scrollbar {
/* 這裡的寬是指豎向滾動條的寬，高是指橫向滾動條的高*/
width: 16px;
height: 16px;
background: pink;
}
div::-webkit-scrollbar-thumb {
border-radius: 10px;
background:
linear-gradient(red,orange);
}複製程式碼
5.最後一個 div 不顯示下邊框
div:not(:last-child) /* 匹配非最後一個 div 元素的 div 元素 */複製程式碼6.設定文字倆端對齊
div { width: 100px; padding: 0 10px; background: pink; margin-bottom: 10px; text-align-last:justify; /* 這是關鍵屬性 */}
<div>賬號</div><div>密碼設定</div><div>手機號</div>複製程式碼
7.規定影像展示方式
顯示圖片的時候會遇到這種問題，對面返回的圖片寬高比例是不一樣的。但是設定的容器大小是一樣的，這個時候需要讓圖片保持比例最大填充容器。
object-fit：fill | contain | cover | none | scale-down複製程式碼具體的例子可以看這個：codepen.io/pen/?&e…
總結
這些是使用場景特別多的不易記錄的技巧，如果想看更多的騷操作可以看這篇文章：
常用的幾種佈局方式
佈局最常用的就是垂直居中，水平居中的實現。然後元素分為塊狀元素和行內元素，因此導致實現的方式大有不同，所以我來幫你歸歸類
1.行內元素
讓行內元素垂直居中對其你肯定知道只要設定行高=包裹元素的高度，text-align=center即可。那如果是不同字型大小的行內元素放在同一個水平線上呢？
可以很明顯看到大號字型是垂直居中了，小號字型並沒有垂直居中。要想居中內就要用到 vertical-align 屬性了。這個屬性用起來是有區別於正常的頂對齊，底對其的，講解這個不在本篇文章的範圍，不過我幫你找了倆片文章好讓你輕鬆理解。
上面的行內元素垂直居中的場景還是蠻多的，像圖片跟文字組合。像字型圖表跟文字組成的按鈕，像付款的時候金額永遠標紅並且字號要大
2.塊元素
1.將塊元素變為行內元素，繼續沿用上文的方式進行垂直居中
2.變為 flex 佈局。設定主軸和交叉軸垂直
align-items:center
justify-content:center
複製程式碼3.採用定位，這種方式多見於做一些提示框。並且通常都根據瀏覽器定位的比較多
position:absolute
top:50%
left:50%
transfrom:translate(-50%, -50%)複製程式碼總結
專門寫垂直居中佈局的文章列舉的花樣是我這個的好幾倍，但我這邊不是為了增加記憶負擔。只分析最長見得情況，用最樸素的程式碼實現最簡單的效果快速交付
樣式提高
自從 css3 出來之後湧現了大量簡單實用的技巧，介面開始加入的漸變、陰影、旋轉、動畫也越來越多。所以這些屬性不僅僅要知道，還要更好的投入實戰當中。
1.漸變
線性漸變
/* 第一個引數倆種形式一種是角度另一正是英文描述例如: to left, to right */
/* 語法, [] 中的內容為一組， + 代表內容能夠出現 1 - N 次 */
background: liner-gradient([angle]+, color-stop[, color-stop]+)
/* 舉例 */
background: linear-gradient(0deg, red, blue, ...)複製程式碼漸變當中最簡單的漸變,可以設定多種顏色，顏色之間的漸變距離是等分的。需要注意的是漸變方向的問題。你可以理解為角度指向的方向就是定義最後顏色的方向。
重複線性漸變
/* 單位不僅僅侷限於百分比，畫素也是可以的 */
background: repeating-linear-gradient(45deg, white, white 10%, black 10%, black 20%)複製程式碼
可以看出來它能夠控制漸變的範圍，是 linear-gradient 的升級版。不加範圍效果跟 linear-gradient 是一樣的。而這個屬性使用的整個難度也都在範圍上。但其實你稍加註意一下這些規則就沒問題了。
- radial-gradient(circle, red, blue, green);開始和結束，不設定百分比分別代表 0% 和 100%
- 最後設定的百分比代表一組的位置，比如 20% 。代表能夠重複 5 組
- 想要沒漸變，可以重複設定相同的顏色值，上圖的意思就是 0-10% 設定白色 10%-20% 設定黑色就可以實現沒有漸變的顏色
徑向漸變
這個語法蠻複雜的，貼一下 MDN 上的語法
看懂這個需要注意幾個限定符和特殊字元（語法跟正則挺像）
- + 匹配 1-N 次
- ？匹配 0-1 次
- | 或者
- {2} 匹配倆次，正好倆次，多了少了都不行
background: radial-gradient(circle closest-corner at 50% 50%, red, blue, green);複製程式碼
重複徑向漸變
/* 關鍵詞*/
repeating-radial-gradient複製程式碼跟重複徑向漸變差不多，就不過多敘述了
2.陰影
box-shadow:[inset] offset-x offset-y color [, [inset] x-shadow y-shadow color]+複製程式碼- inset 控制是內 / 外陰影。不填外陰影，填了內陰影
- offset-x 可正可負，正值在右邊，負值在左邊
- offest-y 可正可負，正值在下邊，負值在右邊
- color 顏色
- 上面的可以重複設定
box-shadow: -10px 0 10px red,
10px 0 10px yellow,
0 -10px 10px blue,
0 10px 10px green;複製程式碼
總結
這篇文章給我的總體感覺並不怎麼突出主題，除了上面的第一部分經常使用又記不住的 css 感覺還可以。剩下的並沒有太多心意，但是給自己定的每週一篇的目標又必須完成，所以只能先發表後期在完善了。廣大同學如果有好的意見還請多多評論。有喜歡用微信看文章的可以關注一波我的公眾號《點滴前端》
