暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。交流，不應該僅僅停留在技術方面，更多的應該是在思維方式。語言只是一種工具，程式設計的思想才是核心。我們只有在明白了程式設計的思想之後，才能去創造屬於自己的東西，隨意切換。授之以魚不如授之以漁。在我們的時代應該是去創造而不是模仿。回到學校之後，我開始我學習的新旅程；讀一本好書亦如交一個有趣的朋友。最近讀了一本《CSS揭祕》，裡面有很多有意思的CSS技巧，有時間有興趣的朋友可以去讀讀這本書，讀完之後我們可以一起交流，學習，一起解答你我的迷惑知識點，期待和你的交流。讀完這本書的時候我也對書中的知識點進行了總結歸納：
以上是我所用到的知識點概要
本文所有連結均來自《CSS揭祕》，內容基本都來自原書
歡迎交流sunseekers
css編碼技巧
儘量減少程式碼重複的重複，儘量減少改動時要編輯的地方，易維護，效能高；
使用css變數，currentColor,inherit...目前css變數很少，相容性有待改善
響應式網頁設計，每個媒體查詢都會增加成本；避免媒體查詢
使用百分比長度來取代固定長度,或者使用與視口相關的單位（vw,vh,vmin,vmax)，她們的值解析為視口寬度或高度的百分比
當你需要在較大解析度下得到固定寬度， 使用max-width代替width，因為他可以適應較小的解析度，而無需使用媒體查詢
替換元素（img,object,video,iframe)設定一個max-width值為100%；
圖片元素以行列式進行佈局時，讓視口的寬度來決定列的數量，彈性和佈局（flexbox，display：inline-block）;
使用多列文字時，指定column-width（列寬）而不是指定column-count（列數），目的他就可以在較小的螢幕上自動顯示單列布局
合理使用簡寫
合理使用簡寫，是一種良好的防衛性編碼方式，可以抵禦未來的風險；
css小技巧
為什麼說能使用html/css解決的問題就不要使用JS呢？兩個字，因為簡單。簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗；下面我介紹哪些或許你不知道css小技巧。
1. 半透明邊框
實現半透明邊框可以有很多的實現方法，比如：偽元素和定位相結合，多層div包裹和定位相結合...,一千個讀者就有一千個哈利波特，每個人都有一套自己的實現方法，或許那都不是最優的；
問題：程式碼量有點多，不符合我前面說的css程式設計技巧，在實際中會出現各種我們想象不到的bug；
解決：利用背景的工作原理，背景與邊框的關係；
background-clip:設定元素的背景（背景圖片或者顏色)是否延伸到邊框下面；重點在切割的位置
border-box: 預設情況 背景延伸到邊框外延(但是在邊框之下)
padding-box: 邊框下面沒有背景，即背景延伸到內邊距外延
content-box: 背景裁剪到內容去外延
自己動手敲的實現的效果圖如下：
試一試
2. 靈活背景定位
有時候我們希望圖片和容器的邊角之間能留出一定的空隙，類似padding的效果，對於固定尺寸大小的容器來說我們可以利用 background-position 實現，但是內容往往是不固定？background-position的值和padding一致也可實現，但是每次修改都要三個地方，程式碼不夠DRY
解決：background-origin calc()
background-origin: 規定了指定背景圖片background-image 屬性的原點位置的背景相對區域,重點在background-position位置的源點
border-box: 背景將會延伸到延伸到外邊界的邊框，而且是「邊框在上、背景在下」，這個用border-style 為dashed可以直接看得出來
padding-box:預設情況 背景描繪在padding盒子，邊框裡不會有背景出現。同樣，背景將會延伸到最外邊界的padding.
content-box:背景描繪在內容區範圍.
試一試
自己動手敲的實現的效果圖如下：
試一試
3. 多重邊框
你還在用多個元素層層包裹來模擬多重邊框嗎？不，我在用偽元素實現，哈哈。但是她們都需要我們新增額外的元素，或者大量的程式碼來汙染我們的結構
解決方案：box-shadow,outline
- box-shadow: 向框新增一個或多個陰影;
inset : 預設陰影在邊框外。
使用inset後，陰影在邊框內（即使是透明邊框），背景之上內容之下。offset-x,offset-y :
這是頭兩個 length 值，用來設定陰影偏移量。offset-x 設定水平偏移量，如果是負值則陰影位於元素左邊。 offset-y 設定垂直偏移量，如果是負值則陰影位於元素上面。可用單位請檢視 length 。
如果兩者都是0，那麼陰影位於元素後面。這時如果設定了 blur-radius 或 spread-radius 則有模糊效果。blur-radius : 這是第三個 length 值。值越大，模糊面積越大，陰影就越大越淡。 不能為負值。預設為0，此時陰影邊緣銳利。
spread-radius : 這是第四個 length 值。取正值時，陰影擴大；取負值時，陰影.收縮。預設為0，此時陰影與元素同樣大。
color：邊框的 color 。如果沒有指定，則由瀏覽器決定——通常是color的值，不過目前Safari取透明。
如果你只需要兩層，那就可以設定一層常規的邊框，再加上outline（描邊）屬性來產生內外層邊框；
例如我們常見的：
outline: 是用來設定一個或多個單獨的輪廓屬性的簡寫屬性 ， 例如 outline-style, outline-width 和 outline-color;輪廓不佔據空間，它們被描繪於內容之上
outline-offset: 一個元素邊緣或邊框之間的間隙;
4. 邊框內圓角
有時候我們需要一個容器，只有內側有圓角，邊框或者描邊的四個角在外部仍然保持直角形狀
解決方案：box-shadow和outline結合
實現原理： outline（描邊）不會跟著元素的圓角走（因而顯示直角）；box-shadow卻是會跟著元素走的；，兩者相結合，box-shadow會填補描邊和容器圓角之間的空隙；
試一試
5. 連續的影像邊框
有時候我們想把一副圖案應用為邊框，而不是背景？你或許會想到border-image，但是行不通，border-image他的原理基本上就是九宮格伸縮法，把圖片切割成九塊，然後把她們應用到元素邊框相應的邊和角
border-image的工作原理：
效果圖如上所示：
解決方案：css漸變和背景的擴充套件，在背景圖之上在加一層純色實色背景，給兩層背景指定不同的background-clip;
漸變是可以和背景圖片一起使用的，而且背景圖片的預發和平時的寫法是一樣的。而且寫在前面的優先順序會比較高，會蓋在後面的圖片上面
7. 平行四邊形
有沒有辦法只讓容器的形狀傾斜而保持其內容不變呢？或許你會想到巢狀兩層元素，外層skew（）,對內容在應用一次反相skew變形，從而抵消變形的效果。但是意味著我們不得不使用一層額外的HTML元素包裹內容.有些累贅
解決方案：偽元素，把樣式應用到偽元素上，對偽元素進行變形，再把偽元素定位+層級放到到住宿元素下面
光說不練，假把式試一試
8. 梯形標籤頁
在網頁中我們經常見到梯形形狀的標籤頁，常見的技巧都是比較雜亂，或者說難以維護的，那他們是如何實現的呢？
解決方案： 三維世界中旋轉一個矩形，由於透視關係，我們在二維影像上看到一個梯形，再結合平行四邊實現的方法便能實現
perspective: 觀察者與z=0平面的距離;
對元素使用了3D變形之後，其內部的變形效應是"不可逆轉的"，和2D變形不同（2D變形內部的逆向變形可以抵消外部的變形效應）；
為了讓他的尺寸更好掌握，我們可以為他指定transform-origin：bottom;也可用scale()對他在進行美觀操作；
9. 簡單的餅圖
餅圖在網頁中的運用極為常見，比如簡單的統計表，進度指示器，如果我們不用影像處理器，和JavaScript，那要如何去實踐呢？
解決方案:偽元素，變形屬性和css漸變實現
1.把這個元素設定為一個圓形；
2.用一個簡單線性漸變來把影像的有半部分設為其他顏色
3.用偽元素覆蓋到這個元素的漸變區域上面去（看起來這個元素和第一步效果一樣），通過旋轉來決定漏出多大扇區；
4.選擇任意角度
如果我們想要看到一個靜態的不同比率的餅狀圖哪有如何解決呢？
解決方案： 很簡單，我們只需將上面用到的那個動畫處於暫停狀態就好了
animation-play-state: paused;
animation-delay: 設定為負；負的動畫延時，讓動畫一開始就直接跳至設定的時間點。即負負得正；
10. 自適應內部元素
如果不給一個元素指定具體的height，他就會自動適應其內容的高度，如果我們希望width也具有類似的行為該怎麼實現呢？？
解決方案: css內部與外部尺寸模型:min-content
max-content,min-content,fit-content
min-content：寬度表示的並不是內部那個寬度小就是那個寬度，而是，採用內部元素最小寬度值最大的那個元素的寬度作為最終容器的寬度。
首先，我們要明白這裡的“最小寬度值”是什麼意思。替換元素，例如圖片的最小寬度值就是圖片呈現的寬度，對於文字元素，如果全部是中文，則最小寬度值就是一箇中文的寬度值；如果包含英文，因為預設英文單詞不換行，所以，最小寬度可能就是裡面最長的英文單詞的寬度。So，大家明白的說。
試一試
11. 滿幅的背景，定寬的內容
類似的佈局我們在網頁中經常遇見，通常是在頁尾和導航；如果我們只使用一個元素該如實現這個效果呢？
解決方案calc()函式
margin:0 auto;所產生的左右外邊距實際上都等於視口寬度的一半減去內容寬度的一半；
因此我們可以使用margin：0 calc(50%-width/2);
如果你覺得還有疑慮的話：試一試
12. 垂直居中
在css中對元素進行水平居中垂直居中，我們在頁面佈局的時候會經常用到。相信每個人都有一套自己實現的方式；
我想介紹一下FlexBox的解決方案
display: flex;
align-items：垂直方向上的對齊方式；
justify-content：水平方向上的對齊方式；
試一試我推薦的方案吧！試一試
13. 緊貼底部的頁尾
一個具有塊級樣式的頁尾，當頁面內容足夠長時他一切正常，但是當頁面比較短時，就會出現問題；頁尾就不能像我們期望中那樣緊貼在視口的最底部，而是在內容的下方
解決方案:flex彈性佈局
- flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
flex-grow：定義專案的放大比例。預設0，不放大。1等分剩餘空間
flex-shrink：專案的縮小比例預設為1，如果空間不足，等比縮小
flex-basis：專案佔據主軸空間
14. 緩動效果
給過渡和動畫加上緩動效果是一種流行的表現手法，可以讓介面顯得更加生動和真實，但是在現實世界中，物體從a到b點的移動往往不是 完全勻速的，因此我們需要對動畫效果加以調整，使得更加逼真
解決方案：我們可以用animation-timing-function的調速函式和反向版本，模擬現實世界的速度變化css的transform只對塊級元素有用
如果是反反覆覆的迴圈函式，我們也可以用可用animation-direction來反轉迴圈的周期函式；
animation-direction:reverse;反轉每一個迴圈週期；
animation-direction:alternate;反轉第偶數迴圈週期；
animation-direction:alternate-reverse;反轉第奇迴圈週期；
首先介紹一下animation-timing-function
animation-timing-function：屬性定義CSS動畫在每一動畫週期中執行的節奏。可能值為一或多個；(ease-in,ease-out,ease-in-out,linear,steps(),cubic-bezier())；
cubic-bezier()函式，允許我們指定自定義調速函式；cubic-bezier(x1,y1,x2,y2);(x1,y1)表示第一個-P1控制錨點的座標,(x2,y2)，表示第二個-P2;曲線的片段分別固定在(0,0)-P0起點,(1,1)-P4終點;
我們需要關注的是 P1 和 P2 兩點的取值，而其中 X 軸的取值範圍是 0 到 1，當取值超出範圍時 cubic-bezier 將失效；Y 軸的取值沒有規定，當然也毋須過大。
把控制錨點的水平座標和垂直座標互換，就可以得到任何調速函式的反向版本
steps()：是一個階躍函式，用於把整個操作領域切分為相同大小的間隔，每個間隔都是相等的。
steps 第一個引數指定了時間函式中的間隔數量（必須是正整數）；第二個引數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設為 end。
彈跳動畫，球體自由落體運動，在下降的過程中勻加速我們可用ease-out;彈起方向是勻減速我們可用ease-in;
動手看效果吧！試一試
15. 逐幀動畫
有時候我們想要實現連續的動畫幀，動畫幀之間然不需要過渡的狀態。而我們在實現中往往會失敗？
解決方案:steps()會根據你指定的步數量，把整個動畫切分為多個針，而且整個動畫幀與幀之間硬切，不會有任何過渡效果
step-start和step-end是steps(1,start)和steps(1,end)的簡寫；
動手看效果吧！試一試
16. 沿環形平移的動畫
當一個元素沿著環形進行移動的同時，我們希望它能儲存自己原本的的朝向。那我們該如何去實現呢？或許你已經有了你的方法啦！但我的方法可能會比你的更加優化
我們可以用前面介紹的巢狀的兩層相互抵消，用內層的變形來抵消外層變形的效果；即兩層的旋轉方向相反；
動手看效果吧！試一試
但是這樣還不是特別理想，如果只用一個元素那要怎麼去實現呢？
transform-origin只是一個語法糖，實際上你總是可以用translate()來代替；變形函式並不是孤立存在；如下圖可證實：
這個原理我目前還不是特別能夠理解，但你可以試試
試一試
17. 自定義核取方塊
我們對於美得追求是永無止境的，但是核取方塊，單選框的樣式的樣式總是不如我們如意。雖然js能夠實現效果，但是程式碼停臃腫。那我們有什麼去實現呢？
解決方案：:checked偽類，這個偽類只有在核取方塊被勾選時才會匹配，不論是由使用者互動觸發，還是有指令碼觸發
當< label > 元素與核取方塊關聯之後，可以起到觸發開關的作用
label 不是核取方塊那樣的替換元素,我們可以為他新增生成性內容(偽元素),並基於核取方塊的狀態來為其設定樣式，然後把真正的核取方塊隱藏起來（但不能把它從tab鍵切換焦點的佇列中完全刪除），再生成性內容美化一番，用來頂替原來的核取方塊！
可替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容
- 例如瀏覽器會根據
標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果檢視(x)html程式碼，則看不到圖片的實際內容；又例如根據< input >標籤的type屬性來決定是顯示輸入框，還是單選按鈕等。