css3-web字型 and CSS3多欄版面配置與伸縮布局

標籤：void   dir   效果   表徵圖   asi   order   conf   結束   格式   

WEB字型文法

@font-face{    font-family:"";    src:url() format()    ....}

相容性寫法

@font-face {        font-family: ‘diyfont‘;        src: url(‘diyfont.eot‘); /* IE9+ */        src: url(‘diyfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */             url(‘diyfont.woff‘) format(‘woff‘), /* chrome、firefox */             url(‘diyfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/             url(‘diyfont.svg#fontname‘) format(‘svg‘); /* iOS 4.1- */}

字型格式

• ttf
• eot
• woff
• svg

工具

• 有字型檔 https://www.youziku.com/
• 阿里web字型 http://www.iconfont.cn/webfont/#!/webfont/index
• 字型線上轉換

字型表徵圖

• 阿里表徵圖
• Font Amsome

多欄版面配置相關屬性

• columns 複合屬性，設定列數和每列的寬度，可以唯寫一個數值
• column-width 列的寬度
• column-count 列的數目
• column-gap 每列間隙
• column-rule 列之間的邊框線（類似於border屬性）
• columu-rule-color
• column-rule-width
• column-rule-style
• column-fill none/balance 列高度
• column-span none（預設）/all （跨所有列）
• column-break-before 設定項目前面是否斷行 auto/always/avoid
• column-break-after 設定項目後面是否斷行 auto/always/avoid
• column-break-inside 設定項目內部是否斷行 auto/avoid

伸縮盒（彈性盒模型）概念相關屬性

• 把元素設定為伸縮容器

  display:flexdisplay:inline-flex

• 設定伸縮流方向（主軸）

  flex-direction:row（從左往右排列）/column（從上往下排列）/row-reverse（對齊與row相反）/column-reverse（對齊與row相反）

• 設定換行（只考慮側軸）

  flex-wrap:nowrap（預設 不換行）/wrap（換行）/wrap-reverse（先排下面的行再排上面行）

• 伸縮流方向和換行的複合屬性 flex-flow

• 主軸方向對齊

  jusitify-content: flex-start（預設）/flex-end（向靠右對齊 不改變流的方向）/center/space-between（各行在彈性盒容器中平均分布 兩端緊貼盒子）/space-around（各行在彈性盒容器中平均分布 兩端保留子項目與子項目之間距離的一半）

• 側軸方向對齊 (強)

  • 堆棧伸縮行 align-content

  • 當伸縮容器的側軸還有空間時，本屬性可以用來調準伸縮行在容器裡的對齊，這與調準伸縮項目在主軸上的對齊的justify-content屬性類似。注意：本屬性在只有一行的伸縮容器上沒有效果

    align-content: strecth（各行將伸展佔用剩餘空間）/flex-start（各行向起始位置堆疊）/flext-end（各行向結束位置堆疊）/center（各行向中間位置堆疊 各行在緊緊靠住的同時，在他彈性盒中置中對齊）/space-between（各行在彈性盒容器中平均分布 兩端緊貼盒子）/space-around（各行在彈性盒容器中平均分布 兩端保留子項目與子項目之間距離的一半）

• 側軸方向對齊 （弱）

  align-items:flex-start/flex-end/center/baseline/stretch    /*設定給 伸縮容器  可以在`一行`中起效果*/ align-self: auto/flext-start/flex-end/baseline/strectch     /*設定給伸縮項目*/

• 盒子伸縮盒放大 比率：

  • flex-grow 放大比率
  • flex-shrink 收縮比率(0不收縮)
  • flex-basis 基準

css3-web字型 and CSS3多欄版面配置與伸縮布局