1. 程式人生 > 其它 >iconfont 和 行高,文字的水平和垂直對齊

iconfont 和 行高,文字的水平和垂直對齊

 

一、iconfont

具體見第79節

二、行高 line - height

  1. 指的是文字佔有的實際高度;

  2. 可以指定一個大小(px),也可以設定一個整數,此時行高是字型的倍數;

  3. 行高會在字型框上下平均分配(字型框:字型所在的格子,設定 font-size 實際上就是在設定字型框高度);

  4. 可以將行高設定為和高度一樣的值,使單行文字在一個元素中垂直居中 ;

三 、水平和垂直對齊

  1. 文字的水平對齊:text - align;

    -- 可選值 : left ,right,center,justify(兩端對齊)

   2.    垂直對齊 :vertical - align ;

    -- 可選值: baseline(預設值,基線對齊,如果有圖片,不要設定這個) ,top,bottom,middle ,x px ;

四、其他

  1.  text - decoration

    --設定文字修飾

      --可選值: none 什麼都沒有;

             underline    下劃線;

             line - through   刪除線;

             over - line   上劃線; 

  2. white -space

    --設定網頁處理空白

      --可選值: normal 正常;

             nowrap 不換行;

             pre 保留空白;

              --eg

                      .abc{                                   width :  200px ;                                   white - space : nowrap ;                                   overflow : hidden ;                                   text-overflow : ellipsis(溢位內容設定省略號)
;
                              }

                  效果:他害怕所有人的眼光,總覺…(要實現這個效果,以上四個屬性缺一不可