WEB字体
语法
@font-face{
font-family:"";
src:url() format()
....
}
例如：@font-face{
font-family:"X2b";
src:url("./dist/images/myfont.jpg") format("truetype");
}
p:nth-of-type(2){
font-family: "X2b";
}
兼容性写法
@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
- 字体在线转换
字体图标
- 阿里图标
http://www.iconfont.cn/ - Font Amsome
http://fontawesome.dashgame.com/
多列布局
相关属性
-
column-width 值：长度单位/auto（根据列数自定分配宽度）
-
column-count
columns:width color;复合属性可以同时设置列宽和列数 -
column-gap 列间隙
长度单位：不能为负值 normal： 与 <' font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px。 -
column-rule 列之间的边框线
- columu-rule-coor
- column-rule-width
- column-rule-style
-
column-fill none/balance
balance： 所有列的高度以其中最高的一列统一 -
column-span 是否横跨所有列 none/all
-
column-break-before 设置项目前面是否断行 auto/always/avoid
always： 总是在元素之前断行并产生新列 avoid： 避免在元素之前断行并产生新列 auto： 既不强迫也不禁止在元素之前断行并产生新列 (默认) -
column-break-after 设置项目后面是否断行 auto/always/avoid
-
column-break-inside 设置项目内部是否断行 auto/avoid
伸缩盒（弹性盒模型）
概念
相关属性
-
把元素设置为伸缩容器
display:flex display:inline-flex -
设置伸缩流方向（主轴）
flex-direction:row/column/row-reverse/column-reverse row：横向从左到右排列（左对齐）。 row-reverse： 对齐方式与row相反。 column:纵向从上往下排列（顶对齐）。 column-reverse： 对齐方式与column相反。 -
设置换行（侧轴）
flex-wrap:nowrap/wrap/wrap-reverse nowrap： flex容器为单行(不换行)。该情况下flex子项可能会溢出容器 (默认) wrap： flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse： 反转（沿X轴翻转） wrap 排列。 -
伸缩流方向和换行的符合属性 flex-flow
-
主轴方向对齐
jusitify-content: flex-start/flex-end/center/space-between/space-around； flex-start： 弹性盒子元素将向行起始位置对齐。（相当于左对齐） flex-end： 弹性盒子元素将向行结束位置对齐。（相当于右对齐） center： 弹性盒子元素将向行中间位置对齐。（如果剩余空间是负数，则保持两端相等长度的溢出）。 space-between： 两边与边界对齐（靠边）而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。 如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。 space-around： 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。 stretch： 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。 -
侧轴方向对齐 (强)
align-content: strecth/flex-start/flext-end/center/space-between/space-around 当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。 -
侧轴方向对齐 （弱）
align-items:flex-start/flex-end/center/baseline/stretch /*设置给 伸缩容器*/ flex-start： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 baseline： 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 stretch： 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 align-self: auto/flext-start/flex-end/baseline/strect /*设置给伸缩项目*/ auto： 如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。 -
盒子伸缩盒放大 比率
- flex-grow 放大比率 值 number:一般为1，表示自动充满容器
- flex-shrink 收缩比率 值 number：为0表不收缩
- flex-basis 基准 auto/content/一般不设置 值：长度单位/百分比