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
字体在线转换 https://www.fontsquirrel.com
字体图标
阿里图标
Font Amsome
多列布局
相关属性
columns
设置的列数和每列的宽度。复合属性
column-width 设置每列
column-count 设置列数宽度
column-gap 列间隙
column-rule 列之间的边框线
column-rule-width
column-rule-coor
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(flex容器为单行,flex子项溢出容器)/
wrap(多行溢出内容放置到新行,)/
wrap-reverse
伸缩流方向和换行的复合属性 flex-flow
主轴方向对齐
jusitify-content:flex-start/
flex-end/center/space-between/
space-around
测轴方向对齐(强)
align-content:strecth/flex-start/
flex-end/center/space-between/
space-around
测轴方向对齐(弱)
设置给伸缩容器align-items:flex-start/
flex-end/center/baseline/stretch
设置给伸缩项目align-self:flex-start/
flex-end/center/baseline/stretch
盒子伸缩和放大 比率
flex-grow 放大比率
flex-shrink 收缩比率
flex-basis 基准
