openwares.net

Freedom & Beauty

0%

Posted on Edited on In

A4纸的尺寸是210mm297mm，也就是21.0cm29.7cm，而1英寸=2.54cm，如果屏幕DPI分辨率为96像素/英寸,则A4纸在屏幕上占据的像素大小约为:794×1123 (96/2.5421≈794,96/2.5429.7≈1123),在HTML中对应的就是像素单位px。

Posted on Edited on In

xdpyinfo(X display information)用于输出X显示相关的信息,可以使用xdpyinfo grep resolution来获取显示器的DPI,我的是resolution: 96x96 dots per inch。

Posted on Edited on In

KVM客户机正常运行时是不需要在主机上显示图形界面的,以前都是使用-nographic和-daemoniz选项来使客户机后台运行。
但是从qemu-kvm 1.4开始,这招不灵了，会有这样的错误提示:

1
-nographic can not be used with -daemonize

这提示过于简单的,新版本的kvm不再允许-nographic和-daemonize一起使用了,应该使用-display none参数来代替-nographic,这样:

1
2
3
kvm ...
-display none
-daemonize

-display参数用于替代老风格的显示类型选项,如-sdl,-curses,-vnc，其语法如下:

1
-display \[sdl curses vnc=<display>\]

其中,vnc=中的display与显示环境变量$DISPLAY的含义一致,格式为hostname: displaynumber.screennumber(X服务器主机名/地址:显示号.屏幕号)。一般设置为vnc=:0即可,如果有多台虚拟机在同一台主机上需要同时使用VNC,则每台客户机的显示号顺延就可,比如:1,:2,:3等,而通过vnc客户端连接客户机的端口号则分别为5900,5901,5902,5903。5900是默认的vnc端口,对应显示设备:0。

使用-display none选项时,客户机仍然会看到模拟的显卡，但是其显示不会输出给用户。
-display none与-nographic的区别是,-display none仅仅影响显示输出,而-nographic同时还会影响串行口和并行口的输出。

-nographic和-daemonize组合一直以来存在一个小问题,kvm客户机启动后,主机虚拟终端后续的命令回显会被关闭,但命令的输出会显示，只能退出重新登录终端才会恢复正常，这是个很明显的bug,却很久都没有修复。改用-display none参数后就没有此问题了。

kvm更详细的用法,请自行 man qemu

===
[erq]

Posted on Edited on In

HTML标签dl指defination list,dt指defination term,dd指defination description,可以组合这三个标签来展示数据。

Posted on Edited on In

一直以来我们都是使用float,position还有早期的table来做页面布局。现在几乎没有人会用table布局了,但float和position仍然是布局的中坚力量。

虽然table,float,position可以用来布局, 但它们都不是布局元素,只是用它们来做布局比较方便罢了。这都是trick。

float的本意是图文混排时的环绕,而position则用于针对单个元素的定位,table则用于展示表格。不过运用一些巧妙的手段(所以叫做trick)可以做到页面布局而已。
但无疑这种布局方式是繁琐的,要经过复杂的计算,填各种浏览器的各种坑,最后得到的布局极有可能自适应性也是很差的。

那么什么叫布局(layout)呢?布局关心的不是单个的元素,布局着眼于如何从整体上划分页面,让划分后页面的各个部分自然的相互联系在一起。如果布局容器的尺寸发生变化,其子页面通过重排会自动的适应这种变化,无需任何额外的计算。设计布局时只要指定好布局的各项属性就可以了。

其实布局管理器的概念在桌面开发中已经出现了好多年了,比如java,gtk等都有各种可用的布局管理器。这二者的概念是比较相近的。

那么为什么要用table,float和position等来做布局呢？因为在以往没有其他更好的选择。但是现在不一样了,最新的CSS标准提供了几个真正的布局模块。其中当前已经可用的而且十分好用的是flex伸缩布局(Flexible Box Layout)。

flex伸缩布局已于09/18/2012进入CR(Candidate Recommendation)状态,当前各大浏览器对flex布局的支持已经基本上十分完善。IE10使用旧版的flex语法,
firefox要到版本28才支持flex多行布局,也就是支持flex-wrap属性的wrap和wrap-reverse。safari还在使用浏览器前缀-webkit-,opera则完整的支持最新的语法。firefox 28差不多两周就可以发布了。如果不考虑那些老旧的、到处是坑的IE浏览器,现在已经可以正式的使用flex布局了。拥抱标准,大胆的抛弃那些“上古神兵”吧！

flex伸缩布局

基础概念

  • 布局轴线
    传统上，行内布局采用水平轴,而块布局使用垂直轴。flex伸缩布局使用了完全不同的概念。flex采用主轴(main axis)和侧轴(cross axis)来管理布局,而且主轴和侧轴的方向并不是固定的。看下面的两张图:
    flex axis
    flex axis
    主轴有可能是水平的也有可能是垂直的,而侧轴一定时垂直于主轴的。主轴的水平/垂直方向由flex-direction决定,取值row和row-reverse时,主轴是水平的。此时水平的主轴还有从左到右和从右到左之分,这依赖于writing-mode的取值。一般来讲,常见的文字都是left to right方向的,此时主轴的方向是从左到右的。第一张图就是最常见的情形,主轴水平从左到右,所有的flex子元素沿主轴排列布局。
  • flex布局容器(container)
    flex布局需要一个布局容器,容器内的子元素按既定规则在容器内排列。flex支持多层嵌套布局,也就是flex容器内的子元素也可以成为其子元素的布局容器。声明一个flex布局容器十分简单:
1
2
display: flex;
display: -webkit-flex
  • flex子元素(items)
    在flex容器内部的子元素按指定的规则进行排列。直接包含在flex容器内的文本自动的被一个匿名flex item包裹,如果匿名的flex子元素只包含空白,那么这个匿名子元素是不显示的,被指定属性display:none。
    相邻flex子元素的margin不会被折叠(collapse)

flex布局容器属性

flex-direction
指定flex容器主轴的方向,取值:

1
2
3
4
5
6
7
8
row
主轴为水平的,其水平上的方向依赖于writing-mode指定的值,默认为left to right,子元素按水平上的方向依次排列。
row-reverse
主轴为水平的,其水平上的方向与writing-mode指定的值刚好相反。比如writing-mode指定为left to right,则其主轴水平方向为从右到左。子元素则从右到左依次排列。
column
主轴为垂直的,其垂直上的方向与writting-mode指定的方向相同。
column-reverse
主轴为垂直的,其垂直上的方向与writting-mode指定的方向相反。

flex-wrap
指定flex容器是否可以换行,取值:

1
2
3
4
5
6
nowrap
不能换行,如果flex items过宽则溢出容器。
wrap
flex items可以在容器内换行,新行的方向与writtng-mode指定的方向相同。firefox从版本28开始才支持。
wrap-reverse
flex items可以在容器内换行,新行的方向与writting-mode指定的方向相反。firefox从版本28开始才支持。

justify-content
主轴方向上对齐flex items,取值:

1
2
3
4
5
6
7
8
9
10
flex-start
flex items沿主轴起始方向按指定顺序排列
flex-end
flex items靠主轴结束方向按指定顺序排列
center
flex items在主轴方向上靠容器中间按指定顺序排列
space-between
容器内剩余的空间在flex items之间平均分配,第一个flex item和最后一个flex item与容器边缘之间没有空隙。
space-around
容器内剩余的空间在flex items以及flex item与容器边缘之间平均分配。也就是所有flex items之间,flex item与容器边缘之间都有相同的空隙。

align-items
侧轴方向上对齐flex items,取值:

1
2
3
4
5
6
7
8
9
10
flex-start
flex items沿侧轴起始方向排列。
flex-end
flex items沿侧轴结束方向排列。
center
flex items沿侧轴居中排列。
baseline
flex items沿侧轴方向依照其基线排列。
stretch
flex items沿侧轴拉伸排列。

align-content
当在侧轴上有空间时,如何对齐flex容器内的多行flex items,如果flex容器内只有单行子元素,则此属性无效。取值:

1
2
3
4
5
6
7
8
9
10
11
12
flex-start
容器内的多行靠测轴起始方向并排排列。
flex-end
容器内的多行靠侧轴结束方向并排排列。
center
容器内的多行沿测轴居中并排排列。
space-between
侧轴方向的空白平均分配到容器内的多行之间,第一行与容器边缘以及最后一行与容器边缘之间没有空隙。
space-around
侧轴方向的空白平均分配到各行以及行与容器边缘之间,子元素行与行之间,已经行与容器边缘之间有相同的空隙。
stretch
容器内的行沿侧轴方向拉伸,自由空间平均分配到各行。

flex-flow
flex-flow为flex-direction和flex-wrap的组合缩写属性,其格式为:

1
flex-flow: flex-direction flex-wrap;

flex布局子元素属性

  • order
    指定flex item在容器内的显示顺序。无需修改html源代码即可为flex item指定新的显示次序,但是语音与导航仍然使用源代码中的顺序,因此这个属性有可能会破坏文档的可访问性(accessibility)。
  • flex
    指定子元素的扩展因子,收缩因子和伸缩基准值。其格式为:
1
flex: flex-grow flex-shrink flex-basis

flex-grow为正向伸展比例因子,主轴方向上的剩余空间会按比例分配到各个flex itme。初始值为0,指定负数无效。
flex-shrink为负向收缩比例因子,当flex items在主轴方向上将会溢出容器时,每个item会按指定的收缩比例因子进行收缩,从而防止items溢出容器。初始值为1,指定负数无效。
flex-basis指定子元素的伸缩基准值。在伸缩基准值的基础上,剩余空间或空间不足时按伸展比例因子或收缩比例因子进行按比例伸缩。
flex属性是这三个属性的组合缩写,也可以单独指定这些属性。

  • align-self
    子元素覆盖容器的align-items属性,如果子元素在侧轴方向的margin设置为auto,则此属性被忽略。
  • margin
    margin指定为auto会合并剩余的空间,可以使item水平和垂直都居中。也可以通过在容器上使用align-items:center;justify-content:center;来使item水平垂直居中。

不影响flex布局的公共属性
float,clear,vertical-align属性对flex items没有影响。对item指定float属性只是使其display值计算为block。

References:
[1]Using CSS flexible boxes
[2]一览CSS布局标准
[3]Internet Explorer 10 中弹性框（“Flexbox”）布局
[4]弹性框（“Flexbox”）布局更新
[5]学习CSS布局
[6]使用Flexbox：新旧语法混用实现最佳浏览器兼容
[7]flexbox 布局使用体会
[8]跨浏览器弹性布局进阶教程
[9]Hold住CSS布局新属性
[10]Flexy Boxes
[11]响应式设计的未来——Flexbox
[12]伸缩布局 — 打开布局天堂之门？

Posted on Edited on In

将调用函数的实际参数转换为数组可以使用语句var args = [].slice.call(arguments);或语句var args = Array.prototype.slice.call(arguments); [].slice.call(arguments)怎么理解?其实就是将arguments对象绑定到数组的slice函数,从而第一个参数arguments成为slice函数的this,而后续的参数成为slice函数的常规参数,形如:[].slice.call(arguments,begin[, end]);比如这样调用:var args = [].slice.call(arguments,1);args变量里存储的是从第二个参数到最后一个参数的数组。