前端程式設計師需要知道的7種新型的CSS長度單位

眾所周知css技術我們雖然很熟悉，在使用的過程卻很容易被困住，這讓我們在新問題出現的時候變得很不利。隨著web繼續不斷地發展，對於新技術新解決方案的要求也會不斷增長。因此，作為網頁設計師和前端開發人員，我們別無選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰不殆。

這就意味著有那麼些個特別的貨，雖然平常都不怎麼會用上，但是一旦某個地方需要它們了，他們就真的是特麼得合適不過來了呢。
今兒，我就準備向大夥兒介紹一些你們之前可能很少見過css傢伙們。他們每個都是度量的單位，類似pixel
和em這樣的，但是很有可能你之前從來就沒聽過這些傢伙們！就讓我們一起來交個朋友吧~
我們首先介紹下和我們熟悉的很相似的貨。em被定義為相對於當前物件內文字的字型大小。炒個栗子，如果你給body小哥設定了font-size字型大小，那麼body小哥的任何子元素的1em就是等於body設定的font-size。
class="test">testdiv>
body>
body
div 

但是，如果你用em一層一層級聯得定義巢狀元素的字型大小又會花生什麼事情呢？在下面這一小段**裡我們應用了和上面一樣一樣的css，每乙個div都從它上一級父元素繼承了字型大小，並且逐漸得增加。

test 

test 
test 
div>
div>
div>
body>
雖然在某些地方這正是我們想要的，但是通常情況下我們還是希望就依賴單一的相對度量單位就好。這時候嘛，我們就可以使用rem
了。 『r』是「root」的縮寫，意思就是1rem等於根元素的字型大小；大部分情況下，根元素就是元素了。
html
div 

rems 不僅僅只是在設定字型大小上很方便。再炒個栗子，你可以用基於html根元素字型大小的rem作為整個網格布局或者ui庫的大小單位，然後在其他特定的地方用em單位。這樣將會給你帶來更多的字型大小和伸縮的可控性，

.container

響應式web設計離不開百分比。但是，css百分比並不是所有的問題的最佳解決方案。css的寬度是相對於包含它的最近的父元素的寬度的。但是如果你就想用視口（viewpoint）的寬度或者高度，而不是父元素的，那該腫麼辦？ 這就是vh和vw單位為我們提供的。

1vh等於1/100的視口高度。栗子：瀏覽器高度900px, 1vh= 900px/100 = 9 px。同理，如果視口寬度未750， 1vw= 750px/100 = 7.5 px。

可以想象到的，他們有很多很多的用途。比如，我們用很簡單的方法只用一行css**就實現同螢幕等高的框。

.slide

vh和vm依據於視口的高度和寬度，相對的，vmin和vmax則關於視口高度和寬度兩者的最小或者最大值。比如，瀏覽器的寬度設定為1100px，高度設定為700px，1vmin= 1px，1vmax= 11px。如果寬度設定為800px,高度設定為1080px,1vmin就等於8px,1vmax則未10.8px。

那麼問題來了，我們應該在什麼場景下使用這兩個單位呢？

假設有乙個元素，你需要讓它始終在螢幕上可見。只要對其高度和寬度使用vmin單位，並賦予其低於100的值就可以做到了。再來個栗子，可以這樣定義乙個至少有兩個邊觸控到螢幕的方形：

如果你要讓這個方形框框始終鋪滿整個視口的可見區域（四邊始終觸控到螢幕的四邊）

結合使用這些單位可以為我們提供乙個新穎有意思的方式來靈活地利用我們視口的大小。

ex和ch單位，類似於em和rem, 依賴於當前的字型和字型大小。 但是，不同的是，這兩貨是基於字型的度量單位，依賴於設定的字型。

ch單位通常被定義為數字0的寬度。你可以在eric meyers的部落格裡找到關於它的一些有意思的討論，例如將乙個等寬字型的字母」n」的寬度設定為40ch，那麼在另一種型別的字型裡它卻可以包含40個字母。這個單位的傳統用途主要是盲文的排版，但是除此之外，肯定還有可以應用他的地方。

ex定義為當前字型的小寫x字母的高度或者 1/2 的1em。 很多時候，它是字型的中間標誌。

這些單位有很多用途，大部分用於版式的微調。比方說，sup元素（上角文字標），可以通過position:relative;bottom: 1ex;實現 。類似的方法，你可以實現乙個下角文字標。瀏覽器預設的方式是利用

上標和下標特定垂直對齊規則，但是如果你想更細粒度更精確得控制，你可以像下面這樣做：

sup 

sub 

程式設計師需要知道ThreadLocal的這幾個點

threadlocal是什麼呢？在實際開發中經常被用來繫結使用者資訊 日誌號。資料庫連線等等。這樣一來，我們編碼時就不用通過傳遞引數方式而影響業務邏輯。就如名字一般，我們可以簡單的認為它的作用就是把資料繫結到當前執行緒上，然後用於後續的操作。既然是將資料繫結到當前執行緒上，那最方便高效的資料儲存方式...

程式設計師OR非程式設計師，有些程式設計的事需要知道

我們的日常生活深受軟體和web開發的影響。越來越多的人意識到了軟體的重要性，例如，假如你想前往巴西看世界盃，你應該首先在網上預訂機票，訂機票時應該用你的信用卡支付費用，成功預訂機票後，你的電子郵箱會收到乙個電子機票。當你到達機場時，你的身份證資訊會被移民資料庫系統檢測，當這些都ok了，登機飛往巴西。...

程式設計師OR非程式設計師，有些程式設計的事需要知道

程式設計師or非程式設計師，有些程式設計的事需要知道 我們的日常生活深受軟體和web開發的影響。越來越多的人意識到了軟體的重要性，例如，假如你想前往巴西看世界盃，你應該首先在網上預訂機票，訂機票時應該用你的信用卡支付費用，成功預訂機票後，你的電子郵箱會收到乙個電子機票。當你到達機場時，你的身份證資訊...