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 列之间的边框线
- columu-rule-coor
- 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/column-reverse
-
设置换行(侧轴)
flex-wrap:nowrap/wrap/wrap-reverse
-
伸缩流方向和换行的复合属性 flex-flow
-
主轴方向对齐
jusitify-content: flex-start/flex-end/center/space-between/space-around
-
侧轴方向对齐 (强)
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/strect /*设置给伸缩项目*/
-
盒子伸缩盒放大 比率
- flex-grow 放大比率
- flex-shrink 收缩比率
- flex-basis 基准