速学伸缩盒布局多栏布局 web字体

最新推荐文章于 2024-10-10 10:17:26 发布

墨韵成香

最新推荐文章于 2024-10-10 10:17:26 发布

阅读量129

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/pangwl/p/7309210.html

版权

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/

多列布局

伸缩盒（弹性盒模型）

概念

相关属性

把元素设置为伸缩容器
```
  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'。