css3-web字体 and CSS3多列布局与伸缩布局

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:flex
  display: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 基准