整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          css布局的em的使用方法

          么是彈性布局?

          用戶的文字大小與彈性布局

          用戶的瀏覽器默認渲染的文字大小是“16px”,換句話說,Web頁面中“body”的文字大小在用戶瀏覽器下默認渲染是“16px”。當然,如果用戶愿意他可以改變這種字體大小的設置,用戶可以通過UI控件來改變瀏覽器默認的字體大小。

          彈性設計有一個關鍵地方Web頁面中所有元素都使用“em”單位值?!癳m”是一個相對的大小,我們可以這樣來設置1em,0.5em,1.5em等,而且“em”還可以指定到小數點后三位,比如“1.365em”。而其中“相對”的意思是:

          1.相對的計算必然會一個參考物,那么這里相對所指的是相對于元素父元素的font-size。比如說:如果在一個<div>設置字體大小為“16px”,此時這個<div>的后代元素教程了是將繼承他的字體大小,除非重新在其后代元素中進行過顯示的設置。此時,如果你將其子元素的字體大小設置為“0.75em”,那么其字體大小計算出來后就相當于“0.75 X 16px = 12px”;

          2.如果用戶通過瀏覽器的UI控件改變了文字的大小,那么我們整個頁面也會進行放大(或縮?。?,不至于用戶改變了瀏覽器的字體后會致使整個頁面崩潰(我想這種現像大家都有碰到過,不信你就試試你自己制作過的項目,你會覺得很恐怖)。

          大家可以查看這個彈性布局樣例。此時你使用瀏覽器的UI控件改變了文字的大小或者直接“ctrl + ”和“ctrl - ”,你會發現這個彈性布局實例,在瀏覽器改變字體大小瀏覽會做出相應的放大和縮小,并不會影響整個頁面的布局。注:這個實例的所有HTML和CSS在本教程中教程了都會使用到。

          至于其他的彈性布局的實例,大家可以瀏覽Dan Cederholm的Simplebites,并改變文字的大小去瀏覽。

          體驗后,是不是覺得彈性布局的頁面很靈活呀,而且也像“px”一樣的精確。因此,只要我們掌握了“font-size”、“px”和“em”之間的基本關系,我們就可以民以食快速使用CSS創建精確的布局。

          CSS的Elastigirl引進EM

          Elastigirl的“em”是極其強大和靈活的,他不管字體大小是什么,是12px,16或60,他都可以計算出其值。

          em其實就是一種排版的測試單位,而且他的由來還有一段小故事,關于這段小故事我就不和大家說了,因為大家都不是來聽我講故事的,我想大還是喜歡知道他在CSS中的那些事。

          在CSS中,“em”實際上是一個垂直測量。一個em等于任何字體中的字母所需要的垂直空間,而和它所占據的水平空間沒有任何的關系,因此:

          如果字體大小是16px,那么1em=16px。

          入門

          在我們開始來了解CSS中的這個“em”之前,我們需要知道在瀏覽器下,他的默認字體大小。正好我們前面也這樣做了,在所有現代瀏覽器中,其默認的字體大小就是“16px”。因此在瀏覽器下默認的設置將是:

          1em = 16px

          因此,在一個CSS選擇器被寫入時,瀏覽器就有了一個“16px”大小的默認字體。此時我們Web頁面中的<body>就繼承了這個“font-size:16px;”,除非你在CSS樣式中顯式的設置<body>的“font-size”值,來改變其繼承的值。這樣一來,“1em = 16px”、“0.5em = 8px”、“10em = 160px”等等,那么我們也可以使用“em”來指定任何元素的大小。

          設置Body的font-size

          很多前輩在多年的實踐中得出一個經驗,他們建議我們在<body>中設置一個正文文本所需的字體大小,或者設置為“10px”,相當于(“0.625em或62.5%”),這樣為了方便其子元素計算。這兩種都是可取的。但是我們都知道,<body>的默認字體是“16px”,同時我們也很清楚了,我們改變了他的默認值,要讓彈性布局不被打破,就需要重新進行計算,重新進行調整。所以完美的設置是:

          body {font-size:1em;}

          可是在那個沒人愛的IE底下,“em”會有一個問題存在。調整字體大小的時候,同樣會打破我們的彈性布局,不過還好,有一個方法可以解決:

          html {font-size: 100%;}

          公式轉換——PXtoEM

          如果你是第一創建彈性布局的,最好在身邊準備一個計算器,因為我們一開始少不了很多的計算,有了他放心。

          像素對于我們來說太密切了,因此我們也將從這開始。首先需要計算出1px和em之間的比例,然后是知道我們需要的px值。通過前面的介紹,大家都知道1em總是等于父元素的字體大小,因此我們完全可以通過下面的工式來計算:

          1 ÷ 父元素的font-size × 需要轉換的像素值 = em值

          大家可以參考一下面這張轉換表(body字體為16px時的值)

          接下來我們一起看一個很簡單的實例“使用CSS的EM制作一個960px寬度的彈性布局”

          HTML Markup

          <body>

          <div id="container">…</div>

          </body>

          將960px轉換為em

          1 ÷ 16px × 960px = 60em

          這個計算值的前提條件是<body>的“font-size:16px”。

          CSS Code

          html {

          font-size: 100%;

          }

          body {

          font-size: 1em;

          }

          #container {

          width: 60em;

          }

          通過上面的實例,我想大家更能形像化的理解了,因為有例可詢,其實我們可以把上面的計算公式轉換一下,將更方便你的計算:

          需要轉換的像素值 ÷ 父元素的font-size = em值

          那么我們上面的實例“960px”就可以這樣來轉換成“em”值

          960px ÷ 16px = 60em

          上面我們一起見證了“px”轉換成“em”的計算方式,接下來我們一起來動看制作上面展示過的彈性布局樣例。下面我們主要一起來一步一步的實現他。

          構建一個彈性的容器

          要創建彈性布局樣例那樣的居中效果,我們首先需要創建一個HTML結構,我在此給創建一個<div>并且取名叫“wrap”

          <body>

          <div id="wrap"> content here</div>

          </body>

          我們希望這個容器是一個“740px”寬,適合一個“800px × 600px”顯屏的實例。那么“740px”會等于多少“em”呢?這就是我們需要關心的問題,大家一起來看吧:

          1、將“740px”轉換成“em”設置到我們的容器“div#wrap”:我們都知道“div#wrap”的父元素<body>設置了字體為“16px”,那么此時在沒有進行另外顯示的設置時,他的子元素<div id="wrap">將繼承“font-size”值,這樣我們就可以輕意得到:“1px和1em之間的關系”

          1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em

          這樣一來,我們的“740px”就很容易的能轉換成“em” 0.0625em × 740 = 46.25em

          當然大家也可以按照我們前面所列出的計算公式來進行轉換,這樣你心中更具有一個概念性,也不容易弄錯:

          1 ÷ 16 × 740 = 46.25em (1 ÷ 父元素的font-size × 需要轉換的像素值 = em值)

          這樣一來,您可以使用上面的公式計算出您需要的任何寬度或高度的“em”值,你只需要知道“1px等于多少em”,另外就是你要轉換的“px”值是多少,具備這幾個參數你就能得到你想要的“em”值了。

          2、創建CSS樣式:現在我們可以給“div#wrap”寫樣式了,彈性布局樣例很明顯的告訴我們,給“div#wrap”設置了一個寬度為“740px”居中,帶有上下“margin”為“24px”,而且帶有“1px”的邊框效果,那么我們首先根據上面的公式計算出相應的“em值”,然后在寫到CSS樣式中:

          html {font-size: 100%;}

          body {font-size: 1em;}

          #wrap {

          width: 46.25em;/*740px ÷ 16 = 46.25em */

          margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/

          border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/

          }

          現在我們就輕松的創建了一個包含內容的彈性容器:彈性布局樣例。

          文本樣式與em

          首先我們在前面那個創建的<div id="wrap"></div>中插入一個<h1>和一個<p>:

          <div id="wrap">

          <h1>...</h1>

          <p>...</p>

          </div>

          在彈性布局樣例實例中,我們標題使用了“18px”,而段落設置的是“12px”字體,同時其行高是“18px”。18px將是我們實現彈性布局的一個重要值,可以使用他們都按正比變化。(有關于標題和段落的排版介紹,大家感興趣可以點擊Richard Rutter的basic leading和vertical rhythm以及chapter on vertical motion的相關介紹)。

          根據CSS繼承一說,我們在“div#wrap”的內容容器中沒有顯式的設置字體大小,這樣整個“div#wrap”將繼承了其父元素“body”的字體——“16px”。

          1、給段落設置樣式:——“12px”的字體,“18px”的行高以及margin值

          從CSS繼承中,我們可以得知我們所有段落繼承了其父元素“div#wrap”的“font-size:16px”。同時我們通過前面的介紹得知1px = 1 ÷ 16 = 0.0625em,這樣一來我們就很輕松的知道“12px”等于多少個“em”

          0.0625em × 12 = 0.750em

          這樣我們就可以給段落p設置樣式:

          p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}

          要計算出段落所需的行高和“margin”為“18px”,來滿足Richard Rutter說的basic leading,那我們就需要像下面的方法和來計算:

          18 ÷ 12 = 1.5em

          使用所需的行高值“18px”直接除以“字體大小12px”,這樣就得到了段落“p”的“line-height”值。在本例中行高就等于字體的“1.5”倍,接著我們把“line-height”和“margin”樣式加到段落“p”中

          p{

          font-size: 0.75em;/*0.625em × 12 = 0.750em */

          line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */

          margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */

          }

          2、給標題設置一個18px的字號

          標題“h1”和段落“p”一樣的原理,他也是繼承他父元素“div#wrap”的“16px”的“font-size”,所以我們也是按同樣的方法可以計處出他的“em”

          0.0625em × 18 = 1.125em

          我們可以把得出的值寫到CSS樣式表中

          h1 {

          font-size: 1.125em;/*0.625em × 18 = 1.125em*/

          }

          同樣為了保留Richard Rutter所說的vertical rhythm,我們同樣將標題“h1”的“line-height”和“margin”都設置為“18px”,使用方法前面介紹的方法。很容易得到他們的“em”值為“1em”:

          h1 {

          font-size: 1.125em; /*0.625em × 18 = 1.125em*/

          line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */

          margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */

          }

          設置圖片大小——使用em

          要做出彈性布局樣例這樣的果,我們也需要在html中插入一張圖片:

          <body>

          <div id="wrap">

          <h1>....</h1>

          <p><img src="90.png" alt="" /> Lorem...</p>

          </div>

          </body>

          我們這張圖片具有“90px”的寬和高,同時具有一個右邊距和底邊距為“18px”設置,而且還進行左浮動。下面我們就一起來看其如何實現圖片這幾個樣式效果:

          從HTML結構中,我們很清楚的知道,圖片是段落“p”的子元素,通過前面的介紹,你們知道這個段落“p”的“font-size”值被得定義為“12px”,因此我們計算圖片的屬性值時,不能在按“1px = 0.0625em”或者“1em=16px”來計算,我們需要使用最老的公式計算:

          1 ÷ 父元素的font-size × 需要轉換的像素值 = em值

          這樣一來,按上面所示的公式,我們就可以計算出圖片的大?。?/p>

          1 ÷ 12 × 90 = 7.5em

          現在你就可以將計算出來的值寫到樣式中去:

          p img {

          width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度) = 7.5em */

          height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度) = 7.5em */

          }

          我們在段落中知道了“18px”剛好是“1em”,現在我們也把他使用到圖片的樣式中:

          p img {

          width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度) = 7.5em */

          height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度) = 7.5em */

          margin: 0 1.5em 1.5em 0;

          float: left;

          }

          這樣我們就制作出一個和彈性布局樣例一樣的效果。希望通過這樣的一個實例能幫助大家了解如何使用“em”來創建一個彈性布局的方法。當然大家可能還在擔心使用“em”來制作一個彈性布局,不能像“px”一樣的的精確,如果你真正理解了這篇教程后,我想你不會在有這樣的想法。

          彈性布局的公式總結

          最后我想大家肯定和我會有同一種想法,就是相關參數是的“px”值如何成功而且正確的轉換成“em”值,經過上面的學習,我最后將公式總結一下:

          元素自身沒有設置字號大小時,元素的width、height、line-height、margin、padding、border等值轉換都按下面公式轉換:

          1 ÷ 父元素的font-size × 需要轉換的像素值 = em值

          我們來看一個實例:

          <body>

          <div id="wrapper">test</div>

          </body>

          我們在body默認字體大小為“16px”,此時需要“div#wrapper”的相關參數值為:

          #wrapper {

          width: 200px;

          height: 100px;

          border: 5px solid red;

          margin: 15px;

          padding: 10px;

          line-height: 18px;

          }

          那么我們按照上面的公式,將所在參數進行轉換:

          #wrapper {

          width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/

          height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/

          border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/

          margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/

          padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/

          line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/

          }

          我們一起來看計算出來的值:

          接下來我需要大家在來看一個效果,這一點很關鍵喲,仔細看好,在同樣的參數基礎上稍加一條元素本身設置字體大小為:14px;,大家可以會說很簡單的呀,按前面的公式計算出來加上就是了,那么我現在就按大家說的計算加上:

          #wrapper {

          font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/

          width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/

          height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/

          border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/

          margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/

          padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/

          line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/

          }

          此進我們在firebug下看計算出來的layout值

          為了更好的說明問題,我把元素自身沒有設置字體大小和元素自身設置了字體大小,兩者在firebug計算出來值:

          我截這個圖的主要意圖是,說明一個問題就是元素自身要是設置了字體大小后,其計算公式就不在是前面所說的,我們需要做一下修改:

          1、字體計算公式依舊

          1 ÷ 父元素的font-size × 需要轉換的像素值 = em值

          2、其它屬性的計算公式需要換成

          1 ÷ 元素的font-size × 需要轉換的像素值 = em值

          那么我們現在來計算一回:

          #wrapper {

          font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/

          width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/

          height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/

          border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/

          margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/

          padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/

          line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/

          }

          我們在來看一次計算出來的值:

          總結

          長篇介紹了一大堆,唯一想告訴大家的是以下幾點

          1、瀏覽器的默認字體大小是16px

          2、如果元素自身沒有設置字體大小,那么元素自身上的所有屬性值如“boder、width、height、padding、margin、line-height”等值,我們都可以按下面的公式來計算

          1 ÷ 父元素的font-size × 需要轉換的像素值 = em值

          3、這一種千萬要慢慢理解,不然很容易與第二點混了。如果元素設置了字體大小,那么字體大小的轉換依舊按第二條公式計算,也就是下面的:

          1 ÷ 父元素的font-size × 需要轉換的像素值 = em值

          那么元素設置了字體大小,此元素的其他屬性,如“border、width、height、padding、margin、line-height”計算就需要按照下面的公式來計算:

          1 ÷ 元素自身的font-size × 需要轉換的像素值 = em值

          這樣說,不知道大家理解了整明白了沒有,如果沒有整明白,可以回過頭來看上面的一個實例。轉自:http://www.uml.org.cn/html/201207311.asp

          智元專欄

          人工智能很火,人工智能大神很火。大神們的神器是什么?有人說找到了,就是EM算法。 請看這篇:

          但是最近網上引人關注的另一傳聞是,一位人工智能論文獲獎者在獲獎感言中說深度學習方法是煉金術,從而引起大神家族成員反駁。報道見:NIPS機器學習煉金術之爭

          看到上面兩篇,使我想到:EM算法是煉金術嗎?

          我近兩年碰巧在研究用以改進EM算法的新算法:http://survivor99.com/lcg/CM/Recent.html,對EM算法存在的問題比較清楚。我的初步結論是:EM算法雖然在理論上有問題,但是確實煉出金子了。反過來也可以說,雖然EM算法練出金子了,但是收斂很不可靠,流行的解釋EM算法的收斂理由更是似是而非。有人使之神秘化,使得它是有煉金術之嫌。論據何在?下面我首先以混合模型為例,簡單介紹EM算法,并證明流行的EM算法收斂證明是錯的(沒說算法是錯的)。

          假設n個高斯分布函數是:

          P(X|θj)=Kexp[-(X-cj)2/(2dj2)],j=1,2,…,n

          其中K是系數,cj是中心,dj是標準差。假設一個數據分布P(X)是兩個高斯分布的混合

          P(X)=P*(y1)P(X|θ*1)+P(y2)P(X|θ*2)

          其中P*(y1),P*(y2)是真的混合比例,θ*1θ*2表示真的模型參數。我們只知道模型是高斯分布且n=2。現在我們猜測5個參數P(y1),c1,c2,d1,d2。不是6個參數,是因為p(y2)=1-P(y1)。根據猜測得到的分布是

          Q(X)=P(y1)P(X|θ1)+P(y2)P(X|θ2)

          如果Q(X)非常接近P(X),相對熵或 Kullback-leibler 距離

          H(Q||P)=∑iP(xi)log[P(xi)/P(xi)]

          就接近0,比如小于0.001比特,那么就算我們猜對了。參看下圖:

          混合模型問題之所以重要,是因為它是限制分布類型而不是分布范圍的模糊聚類,是無監督學習的一個典型。

          EM算法起源于這篇文章:Dempster, A.P., Laird, N.M., Rubin,D. B.: Maximum Likelihood from Incomplete Datavia the EM Algorithm. Journal of the Royal Statistical Society, Series B39, 1–38(1977)。通過這個網站http://www.sciencedirect.com/搜索可見,光是標題有EM算法的英文文章就有6.8萬篇(有似然度的文章將近76萬篇),可見研究和應用EM算法的人何其多。

          Wiki百科上的EM算法介紹見這里:

          https://en.wikipedia.org/wiki/Expectation%E2%80%93maximization_algorithm

          一篇中文介紹見這里:

          http://www.cnblogs.com/mindpuzzle/archive/2013/04/05/2998746.html

          EM算法的基本思想是:

          目的是改變預測模型參數求似然度logP(XN)或logP(X)達最大(N表示有N個樣本點,黑體X表示矢量),樣本和θ之間的似然度就是負的預測熵(或交叉熵,廣義熵的一種):

          Hθ’(X)=∑iP(xi)logP(xi)

          其中P(xi)就是上面的曲線Q(X)上的一個點(X是變量,xi是常量),即P(xi)=Q(xi)。我們用X的概率分布P(X)取代X序列。則EM算法的基本公式如下(下面y就是wiki百科中的z):

          其中θt表示M步優化前的θ。這里的Q和上面的Q(X)中的Q含義不同,下面我們用Q(.)表示這里的Q(θ|θt)。

          從語義信息論(http://survivor99.com/lcg/books/GIT/)看,我們可以得到

          [Q(θ|θt)-H]/N=Hθ’(XY)-Hθ’(Y|X)=-Hθ(X,Y)+Hθ(Y|X)

          右邊是兩個負的廣義熵或負的交叉熵,和參數有關。為了討論方便,后面忽略左邊的N。

          EM算法分兩步:

          E-step:寫出預測的yj的條件概率

          M-step:最大化Q(θ|θt),也就是最大化負的聯合熵Hθ’(X,Y),或最小化聯合交叉熵Hθ(XY)。

          為什么這樣能收斂呢?wiki百科這樣說:

          1. Expectation-maximization works to improve Q(θ|θt) rather than directly improving log(X|θ). Here is shown that improvements to the former imply improvements to the latter.[13]

          這就是說,只要Q(.)達最大,log(X|θ)就達到最大。

          2)M-step可以增大Q(.),E-step也不減少Q(.),所以反復迭代就能收斂。

          這篇證明文章比較出名:Wu, C.F.J.: On the Convergence Properties of the EM Algorithm. Annals of Statistics11, 95–10(1983)。

          這等于說,真模型在山頂上,爬山人每一步只上不下就能到達山頂。M步只上,E步不下,所以能到達山頂。

          但是,使用EM算法時,往往在預測分布P(X|θ)和實際分布P(X)不重合就停下來了。流行的解釋是:那叫局部收斂(其實就是收錯了地方);因為大山周圍有一些小山,出發點不對就上到小山頂上了。所以起始點很重要。于是有人專門研究如何通過測試找到較好的出發點,比如隨機選多點測試看哪個好。

          EM有時雖然能收斂,但是常常收斂很慢。為了提高速度,于是又有很多人提出很多改進辦法。其中比較出名的一個就是上面《九層境界》中提到的VBEM算法(詳見Neal, R.,Hinton, G.: A view of the EM algorithm that justifies incremental, sparse, and other variants. in: Michael I. Jordan(ed.) Learning in Graphical Models,pp355–368. MITPress,Cambridge,MA(1999)),就是用

          F(θq)=Q(θ|θt)+H(Y)

          取代Q(θ|θt)(上面忽略了系數N),不斷最大化F(θq)(q=P(Y))。在M步最大化F(.),在E步也最大化F(.)。據說這樣收斂更快。但是VBEM的收斂證明是不是一樣有問題呢?我的結論是:算法好一些,但是收斂證明問題還是存在。

          首先我們看EM算法(包括VBEM算法)的收斂證明錯在哪里。

          在Shannon信息論中有公式:

          H(X,Y)=H(X)+H(Y|X)

          由于引進似然函數,Shannon熵變成預測熵或交叉熵,但是基本關系還是成立

          Hθ(XY)=Hθ(X)+Hθ(Y|X)=-logP(X)+Hθ(Y|X)

          寫成負熵的形式是:

          H’θ(XY)=logP(X|θ)+H’θ(Y|X)

          后面這一項Hθ(Y|X)和Y的熵有關,P(y1)=P(y2)=0.5的時候H(Y)最大,負熵就最小,H’θ(Y|X)也比較小。如果真的比例P*(Y)是接近等概率的,起步時P(y1)=0.1,P(y2)=0.9,Y的負熵較大,我們不斷最大化H’θ(X,Y),就會阻止P(Y)向真比例P*(Y)靠近。這是EM算法收斂慢甚至不收斂的一個原因。這也是為什么VBEM方法要用F(.)取代Q(.)。上式兩邊加上H(Y)以后就有

          H’θ(XY)+H(Y)=logP(X|θ)+H’θ(Y|X)+H(Y)

          H(Y)-Hθ(X,Y)=-Hθ(X)+H(Y)-Hθ(Y|X)

          近似得到(后面解釋近似):

          -Hθ(X|Y)=-Hθ(X)+Iθ(X;Y)

          也就是

          F(θ,q)=-Hθ(X|Y)=-Hθ(X)+Iθ(X;Y)(3)

          可見,F(θ,q)就是負的后驗熵。兩邊加上P(X),左邊就是預測互信息或語義互信息(我早在1993年的《廣義信息論》一書中就提出):

          F(θ,q)+H(X)=H(X)-Hθ(X|Y)=I(X;?)(4)

          從上面兩個公式可以得到

          H(Q||P)=H(X|θ)-H(X)=Iθ(X;Y)-I(X;?)(5)

          我們可以粗略理解,相對熵=Shannon互信息-預測互信息。后面我們將介紹這個公式的更加嚴格形式。

          因為H(X)和模型無關,最大化F(.)就是最大化預測互信息,避免誤改P(Y)。這樣就好理解為什么VBEM比EM好。

          但是,F(θ,q)最大化和logP(X|θ)最大化是否總是一致的?結論是否定的。證明很簡單:

          假設有一個真模型θ*和子模型比例P*(Y),它們產生P(X)。同時相應的Shannon聯合熵是H*(X,Y),X的后驗熵是H*(X|Y),互信息是I*(X;Y)。那么改變X和Y的概率分布,上面三個量都會變。

          我們猜測的時候,如果聯合概率分布P(Y,X|θ)P*(X,Y)更加集中,負熵log(XY|θ)=Hθ(XY)就會大于真模型的負熵-H*(X,Y),繼續增大H’θ(X,Y)就會南轅北轍。

          比如,下圖例子中,第一輪優化參數前就可能有H’θ(XY)>-H*(XY)。它對于EM算法收斂證明來說就是反例。圖中R=I(X;Y),R*=I*(X;Y)。其中真實的Q*(.)和互信息I*(X;Y)比較小。

          這個例子中迭代用的是信道匹配算法,和VBEM算法比,主要差別是,在E步把繼續增大F(.)改為調整P(Y)。其中紅線就是EM算法中Q(θ|θt)的變化軌跡,第一個E步之后,Q(.)就大于真模型的Q*(.)。如果起始參數是隨機的,那么它可能導致Q(.)出現在紅線的任何位置,從而大于Q*(.)。

          F(.)有類似情況,它和預測互信息(圖示是G)走勢完全一致,在每個E步是下降的。原來影響交叉熵有三個因素:

          1)預測的分布和樣本的分布是否符合,如果更符合,負熵Q(.)和F(.)就更大;

          2)X和Y的分布是否集中,如果更集中負熵就更大;

          3)X和Y是否相關,如果更相關負熵就更大。

          流行的收斂證明只考慮了第一條。

          到此有人會問,如果終點不在山頂上,起點很可能高于終點,那么為什么EM算法在大多數情況下是收斂的?

          回答是:EM算法收斂證明中第二條,Q(.)只增不減也錯了!原來在E步,Q(.)和F(.)是可能減小的!一般情況下都會使Q(.)向真模型的Q*=-H*(X,Y)靠攏,使F(.)向-H*(X|Y)靠攏。如果調整P(Y),收斂就更加可靠,EM算法就變為CM算法。

          下面提供CM算法的粗略數學證明。

          先看為什么需要調整P(Y)。在E步的公式(2)(計算Shannon信道的公式)中,P(yj|X)和P(X)及四個參數可能不匹配,導致

          那樣,上面計算出的Shannon信道就是一個不稱職的Shannon信道。調整方法很簡單,就是不斷用左邊的P+1(yj)代替右邊的P(yj),直到兩者相等。

          下面介紹用信道匹配算法(CM算法)用到的公式:

          上面第一行公式就是公式(5)的更加嚴格形式。其中用到子模型θj,P(X|θj) 就等于前面方法中的P(X|yj,θ)。RQ就近似于前面方法中Iθ(X;Y)。為什么說近似呢,因為這里用到Y的廣義熵或交叉熵H(Y+1)=-∑jP+1(yj)logP(yj) 和相對熵H(Y+1||Y)。聯合熵減去這個熵才是預測后驗熵。而在VBEM方法中,增加的H(Y)是Shannon熵。

          有了上面公式(6),我們就可以采用下面三步減小相對熵H(Q||P)——保證每一步都是減小的:

          I:寫出Shannon信道表達式,等于EM算法中的E步;

          II:調整P(Y),使得P(Y+1)=P(Y);如果H(Q||P)<0.001,結束。

          III:改變參數最大化語義互信息G。轉到I。

          詳細討論見這里:http://survivor99.com/lcg/CM.html

          如果EM算法在M步先調整P(Y),固定P(Y)再優化參數,EM算法就和CM算法相同。如果在VBEM算法中添加的H(Y)改為交叉熵,E步調整P(Y)而不是最大化F(.),VBEM算法就和CM算法相同。

          從語義互信息公式看

          迭代就是輪流改變log左邊(I和II)和右邊(III)。改變右邊是語義信道匹配Shannon信道,改變左邊是Shannon信道匹配語義信道。所以該算法叫信道匹配(Channels’Matching)算法或CM算法(保留EM中的M)。我們也可以說CM算法是EM算法的改進版本。但是基本思想是不同的。CM算法也沒用到Jensen不等式。

          為什么CM算法會使Q(X)會收斂到P(X)呢?相對熵會不會表現為很多山洼,有高有低,我們不巧,落到一個較高的山洼里呢?

          這要從Shannon的信息率失真理論談起。Shannon在1948年發表經典文章《通信的數學理論之》,11年之后,他提出信息率失真函數R(D)——就是給定平均損失上限D求互信息I(X;Y)最小值R(D)。我在1993年的《廣義信息論》中把它改造為R(G)函數。G是廣義互信息或語義互信息(也就是平均log標準似然度)的下限。R(G)是給定G時的Shannon互信息I(X;Y)的最小值??梢宰C明,所有R(G)函數都是碗狀的。R(D)函數像是半個碗,也是凹的。證明G是碗狀的很簡單,因為R(D)函數處處是凹的(已有結論),R(G)函數是它的自然擴展,也是處處是凹的。

          進一步結論:R(G)-G也是處處是凹的。所以山洼只有一個。求相對熵最小,就是求R(G)-G最小,就是找R=G的點,也就是上圖中45度斜線和碗狀曲線相切的點。

          像E步那樣,用公式(2)求Shannon信道,并調整P(Y),就能得到R(G)。原來求信息率失真函數也用到迭代算法,也用到和公式(2)類似的公式。EM和VBEM算法之所以慢,除了因為沒有調整P(Y),還和指導思想有關。因為認為增大負熵就能達到目的,所以設置初始參數時就想把負熵弄得小一點,比如把兩個標準差d1和d2設得大一點,防止漏掉真模型。但是在計算試驗中我發現,有時候選擇較小的偏差,收斂反而更快。從文獻數字和我的計算實驗看,CM算法迭代5次收斂比較常見,而EM算法(包括改進的)達到收斂的迭代次數大多超過10次。

          誠然,CM算法也不是完美無缺的。在少數極端情況下(比如兩個分布重疊較多,兩個分量比例相差較大時),初始值選擇不當收斂也很慢。結合已有的EM算法研究中關于初始參數的研究成果,應該還能改進。

          我上面只是證明了流行的EM算法收斂證明是錯的,是否還有其他對的證明?我不能肯定。北大的馬盡文教授是EM算法專家,做過很多推廣和應用。他說有,我很期待。我以為如果有,可能和我的證明異途同歸。我和VBEM的第一作者Neal教授通過信,他說要是E步減小Q(.)或F(.),那就太震動了??磥硭恢毕嘈帕餍械呢撿刂辉霾粶p證明。

          現在回到“煉金術”話題。

          實際上,把深度學習和煉金術聯系起來的AliRahimi教授演講標題是:

          《從“煉金術”到“電力”的機器學習》,他并沒有否定深度學習,只是說要加強理論研究,也不排除先有實踐再有理論。

          根據上面分析,可以說EM算法正在從“煉金術”向“冶金術”過渡。如過它在理論上停滯不前,如果我們把它神話,它就真像是煉金術了。反之,正視已有問題,尋找更簡潔更有說服力理論,才能使“煉金術”成為可靠“冶金”工具。

          作者簡介:

          魯晨光,男,南京航空航天大學畢業(77級). 當過長沙市青年學術帶頭人,赴加拿訪問學者,北師大數學系訪問學者(汪培莊教授指導)…研究興趣是:語義信息論,統計學習,色覺的數學和哲學, 美學和進化論,投資組合。專著有:《廣義信息論》,《投資組合的熵理論和信息價值》,《色覺奧妙和哲學基本問題》,《美感奧妙和需求進化》。于《光學學報》,《機器人》,《通信學報》,《現代哲學》,《Int. J. of General System》等雜志上發表論文多篇。最近主要工作是把語義信息論用到統計學習,用以解決最大似然估計,貝葉斯推理, 多標簽分類, 混合模型等問題。個人網站:http://survivor99.com/lcg/ 信箱:lcguang@foxmail.com。

          前端開發中,單位的使用,有很多種,em、px等,本文主要講解em。不過在做對比之前,我們還是先了解em的一些基礎知識,

          1、 瀏覽器的字體的默認大小是16px

          2、如果元素設置字體大小(有,有,有設了字體大小……)

          1 ÷ 父元素的font-size × 需要轉換的像素值 = em值

          3、如果元素沒有設計字體大小(沒有,沒有,沒有設了字體大小……)

          1 ÷ 元素自身的font-size × 需要轉換的像素值 = em值

          寫下如下的代碼:


          初始顯示效果

          加一段css代碼

          從代碼中我可以看,

          1、p1沒設置字體大小,p1的父級是瀏覽器的<html>,p1字體顯示為16px; border的em值為1,寬度就為16px

          2、p2設置了字體大小為20px,自然而然顯示20px;border的em值為1,顯示的寬度為20px;

          3、p3給設置了一個字體大小為2em;p3_1的em就是相對于p3,p3_1的字體大小32px;border的em值為1,顯示的寬度為32px;

          如下圖顯示的效果:


          進行對比可以得出以下結論:

          一、從1和2對比可以看出,瀏覽器的默認字體大小是16px,em的是相對了父級的

          二、從2和3看出,不管是設置em、還是設置像素px。都代表是:設置了字體大小

          三、從1、2、3可以看出,元素width,height,border-weight等屬性的em,相對元素自身字體的大小而言而言

          做一個有博客的web前端自媒體人,專注web前端開發,關注用戶體驗,加我qq/微信交流:6135833


          主站蜘蛛池模板: 亚洲一区二区视频在线观看| 国产萌白酱在线一区二区| 国产伦精品一区二区三区不卡| 亚洲中文字幕丝袜制服一区| 精品国产aⅴ无码一区二区| 久久精品国产第一区二区| 波多野结衣AV一区二区三区中文 | 国产主播一区二区三区| 国产精品一区二区久久精品涩爱| 久久青草国产精品一区| 变态拳头交视频一区二区| www.亚洲一区| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 国产午夜精品一区理论片飘花| 视频精品一区二区三区| 精品视频一区二区观看| 国产av夜夜欢一区二区三区| 国产伦精品一区二区三区在线观看 | 无码一区二区三区老色鬼| 国模无码人体一区二区| 国产一区二区内射最近更新| 日韩精品无码视频一区二区蜜桃| 国产福利电影一区二区三区,亚洲国模精品一区 | 精品国产福利在线观看一区| 日韩久久精品一区二区三区| 亚洲av乱码中文一区二区三区| 无码人妻精品一区二区三区99性| 亚洲国产av一区二区三区丶| 精品无码一区二区三区在线| 伊人久久大香线蕉AV一区二区| 亚洲AV成人精品日韩一区| 国产精品一区二区久久乐下载 | 中文字幕亚洲一区| 国产一区二区女内射| 亚洲一区二区影视| 国产成人精品亚洲一区| 亚洲国产精品第一区二区三区| 91国在线啪精品一区| 久久久久人妻一区二区三区| 极品少妇一区二区三区四区| 人妻无码一区二区三区|