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 基准
