學習要注重基礎，注重底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。交流，不應該僅僅停留在技術方面，更多的應該是在思維方式。語言只是一種工具，編程的思想才是核心。我們只有在明白了編程的思想之後，才能去創造屬於自己的東西，隨意切換。授之以魚不如授之以漁。在我們的時代應該是去創造而不是模仿。回到學校之後，我開始我學習的新旅程；讀一本好書亦如交一個有趣的朋友。最近讀了一本《CSS揭秘》，裡面有很多有意思的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呢？兩個字，因為簡單。簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗；DOM操作比起非DOM交互需要更多的內存和CPU時間；連續嘗試進行多次的DOM相關操作可能會導致瀏覽器掛起，有時會崩潰；
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:背景描繪在內容區範圍.
calc()
自己動手敲的實現的效果圖如下：
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取透明。
box-shadow
如果你只需要兩層，那就可以設置一層常規的邊框，再加上outline（描邊）屬性來產生內外層邊框；例如我們常見的：
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;
效果圖如下所示：
漸變是可以和背景圖片一起使用的，而且背景圖片的預發和平時的寫法是一樣的。而且寫在前面的優先級會比較高，會蓋在後面的圖片上面
閱讀更多 熱愛代碼勝過愛我自己 的文章
