哪些你知道或不知道的css，在這裏或許都齊全

暑假實習的時候帶個人師傅，告訴我要注重基礎，底層實現原理。才能在突飛猛進的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，因此咱們應該不斷的去學習，去交流。交流，不該該僅僅停留在技術方面，更多的應該是在思惟方式。語言只是一種工具，編程的思想纔是核心。咱們只有在明白了編程的思想以後，才能去創造屬於本身的東西，隨意切換。授之以魚不如授之以漁。在咱們的時代應該是去創造而不是模仿。回到學校以後，我開始我學習的新旅程；讀一本好書亦如交一個有趣的朋友。最近讀了一本《CSS揭祕》，裏面有不少有意思的CSS技巧，有時間有興趣的朋友能夠去讀讀這本書，讀完以後咱們能夠一塊兒交流，學習，一塊兒解答你個人迷惑知識點，期待和你的交流。讀完這本書的時候我也對書中的知識點進行了總結概括：

有問題歡迎討論sunseekers

本文全部連接均來自《CSS揭祕》，內容基本都來自原書

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小技巧。

• 半透明邊框

實現半透明邊框能夠有不少的實現方法，好比：僞元素和定位相結合，多層div包裹和定位相結合...,一千個讀者就有一千個哈利波特，每一個人都有一套本身的實現方法，或許那都不是最優的；

問題：代碼量有點多，不符合我前面說的css編程技巧，在實際中會出現各類咱們想象不到的bug；

解決：利用背景的工做原理，背景與邊框的關係；

background-clip:設置元素的背景（背景圖片或者顏色)是否延伸到邊框下面；重點在切割的位置

border-box: 默認狀況 背景延伸到邊框外延(可是在邊框之下)

padding-box: 邊框下面沒有背景，即背景延伸到內邊距外延

content-box: 背景裁剪到內容去外延

本身動手敲的實現的效果圖以下：

試一試

• 靈活背景定位

有時候咱們但願圖片和容器的邊角之間能留出必定的空隙，相似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:背景描繪在內容區範圍.

試一試

本身動手敲的實現的效果圖以下：

試一試

• 多重邊框

你還在用多個元素層層包裹來模擬多重邊框嗎？不，我在用僞元素實現，哈哈。可是她們都須要咱們添加額外的元素，或者大量的代碼來污染咱們的結構

解決方案：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: 一個元素邊緣或邊框之間的間隙;

試一試

• 邊框內圓角

有時候咱們須要一個容器，只有內側有圓角，邊框或者描邊的四個角在外部仍然保持直角形狀

解決方案：box-shadow和outline結合

實現原理： outline（描邊）不會跟着元素的圓角走（於是顯示直角）；box-shadow倒是會跟着元素走的；，二者相結合，box-shadow會填補描邊和容器圓角之間的空隙；

試一試

• 連續的圖像邊框

有時候咱們想把一副圖案應用爲邊框，而不是背景？你或許會想到border-image，可是行不通，border-image他的原理基本上就是九宮格伸縮法，把圖片切割成九塊，而後把她們應用到元素邊框相應的邊和角

border-image的工做原理：

效果圖如上所示：

解決方案：css漸變和背景的擴展，在背景圖之上在加一層純色實色背景，給兩層背景指定不一樣的background-clip;
漸變是能夠和背景圖片一塊兒使用的，並且背景圖片的預發和平時的寫法是同樣的。並且寫在前面的優先級會比較高，會蓋在後面的圖片上面

試一試

• 平行四邊形

有沒有辦法只讓容器的形狀傾斜而保持其內容不變呢？或許你會想到嵌套兩層元素，外層skew（）,對內容在應用一次反相skew變形，從而抵消變形的效果。可是意味着咱們不得不使用一層額外的HTML元素包裹內容.有些累贅

解決方案：僞元素，把樣式應用到僞元素上，對僞元素進行變形，再把僞元素定位+層級放到到住宿元素下面

光說不練，假把式試一試

• 梯形標籤頁

在網頁中咱們常常見到梯形形狀的標籤頁，常見的技巧都是比較雜亂，或者說難以維護的，那他們是如何實現的呢？

解決方案： 三維世界中旋轉一個矩形，因爲透視關係，咱們在二維圖像上看到一個梯形，再結合平行四邊實現的方法便能實現

perspective: 觀察者與z=0平面的距離;

對元素使用了3D變形以後，其內部的變形效應是"不可逆轉的"，和2D變形不一樣（2D變形內部的逆向變形能夠抵消外部的變形效應）；

爲了讓他的尺寸更好掌握，咱們能夠爲他指定transform-origin：bottom;也可用scale()對他在進行美觀操做；

試一試

• 簡單的餅圖

餅圖在網頁中的運用極爲常見，好比簡單的統計表，進度指示器，若是咱們不用圖像處理器，和JavaScript，那要如何去實踐呢？

解決方案:僞元素，變形屬性和css漸變實現

1.把這個元素設置爲一個圓形；

2.用一個簡單線性漸變來把圖像的有半部分設爲其餘顏色

3.用僞元素覆蓋到這個元素的漸變區域上面去（看起來這個元素和第一步效果同樣），經過旋轉來決定漏出多大扇區；

試一試

若是咱們想要看到一個靜態的不一樣比率的餅狀圖哪有如何解決呢？

解決方案： 很簡單，咱們只需將上面用到的那個動畫處於暫停狀態就行了
animation-play-state: paused;
animation-delay: 設置爲負；負的動畫延時，讓動畫一開始就直接跳至設置的時間點。即負負得正；

試一試

• 自適應內部元素

若是不給一個元素指定具體的height，他就會自動適應其內容的高度，若是咱們但願width也具備相似的行爲該怎麼實現呢？？

解決方案: css內部與外部尺寸模型:min-content

max-content,min-content,fit-content

min-content：寬度表示的並非內部那個寬度小就是那個寬度，而是，採用內部元素最小寬度值最大的那個元素的寬度做爲最終容器的寬度。

首先，咱們要明白這裏的「最小寬度值」是什麼意思。替換元素，例如圖片的最小寬度值就是圖片呈現的寬度，對於文本元素，若是所有是中文，則最小寬度值就是一箇中文的寬度值；若是包含英文，由於默認英文單詞不換行，因此，最小寬度可能就是裏面最長的英文單詞的寬度。So，你們明白的說。

試一試

• 滿幅的背景，定寬的內容

相似的佈局咱們在網頁中常常碰見，一般是在頁腳和導航；若是咱們只使用一個元素該如實現這個效果呢？
解決方案calc()函數

margin:0 auto;所產生的左右外邊距實際上都等於視口寬度的一半減去內容寬度的一半；
所以咱們可使用margin：0 calc(50%-width/2);

若是你以爲還有疑慮的話：試一試

• 垂直居中

在css中對元素進行水平居中垂直居中，咱們在頁面佈局的時候會常常用到。相信每一個人都有一套本身實現的方式；
我想介紹一下FlexBox的解決方案

display: flex;

align-items：垂直方向上的對齊方式；

justify-content：水平方向上的對齊方式；

試一試我推薦的方案吧！試一試

• 緊貼底部的頁腳

一個具備塊級樣式的頁腳，當頁面內容足夠長時他一切正常，可是當頁面比較短時，就會出現問題；頁腳就不能像咱們指望中那樣緊貼在視口的最底部，而是在內容的下方

解決方案:flex彈性佈局

• flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

flex-grow：定義項目的放大比例。默認0，不放大。1等分剩餘空間

flex-shrink：項目的縮小比例默認爲1，若是空間不足，等比縮小

flex-basis：項目佔據主軸空間

試一試

• 緩動效果

給過渡和動畫加上緩動效果是一種流行的表現手法，可讓界面顯得更加生動和真實，可是在現實世界中，物體從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;

動手看效果吧！試一試

• 逐幀動畫

有時候咱們想要實現連續的動畫幀，動畫幀之間然不須要過渡的狀態。而咱們在實現中每每會失敗？

解決方案:steps()會根據你指定的步數量，把整個動畫切分爲多個針，並且整個動畫幀與幀之間硬切，不會有任何過渡效果

step-start和step-end是steps(1,start)和steps(1,end)的簡寫；

動手看效果吧！試一試

<h2 style='color:rgb(230,3,135);'>16. 沿環形平移的動畫</h2>

當一個元素沿着環形進行移動的同時，咱們但願它能保存本身本來的的朝向。那咱們該如何去實現呢？或許你已經有了你的方法啦！但個人方法可能會比你的更加優化

咱們能夠用前面介紹的嵌套的兩層相互抵消，用內層的變形來抵消外層變形的效果；即兩層的旋轉方向相反；

動手看效果吧！試一試

可是這樣還不是特別理想，若是隻用一個元素那要怎麼去實現呢？

transform-origin只是一個語法糖，實際上你老是能夠用translate()來代替；變形函數並非孤立存在；以下圖可證明：

這個原理我目前還不是特別可以理解，但你能夠試試
試一試

• 自定義複選框

咱們對於美得追求是永無止境的，可是複選框，單選框的樣式的樣式老是不如咱們如意。雖然js可以實現效果，可是代碼停臃腫。那咱們有什麼去實現呢？

解決方案：:checked僞類，這個僞類只有在複選框被勾選時纔會匹配，不管是由用戶交互觸發，仍是有腳本觸發

當< label > 元素與複選框關聯以後，能夠起到觸發開關的做用

label 不是複選框那樣的替換元素,咱們能夠爲他添加生成性內容(僞元素),並基於複選框的狀態來爲其設置樣式，而後把真正的複選框隱藏起來（但不能把它從tab鍵切換焦點的隊列中徹底刪除），再生成性內容美化一番，用來頂替原來的複選框！

可替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容

• 例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片信息並顯示出來，而若是查看(x)html代碼，則看不到圖片的實際內容；又例如根據<input>標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。

試一試