CSS中那些微妙模糊的属性

在前端开发中，我经常碰到一些不能马上理解的css属性， 于是打算以后但凡碰到这些微妙又模糊的属性，都归纳到这里。

CSS打印页面中的 orphans和widows

@media print打印页面用得较少，对于打印页面中的属性一直比较陌生， orphans与widows（注意不是windows）属性主要用来控制打印页面中排版中保留的最少行问题，理解该属性，也更能体会到CSS在排版上对于各种页面输出的灵活控制。

比如在打印页面排版的时候， 某些段落在分页的情况下会不得不出现截断，orphans的作用就是控制出现截断时在前一页中需要保留最少行数（在分栏情况下也会出现截断）一般的文字处理器在这种情况下会为某个出现截断的段落保留2行（因为如果没有这项机制，将出现只有一行出现在截断处，而这种排版在很多时候是影响美观和阅读的），这里直接用用该帖中的栗子（原帖地址?orphans）

同样的逻辑， 在打印页面中，段落被截断后在后一页面中出现的截断由widows属性控制，widows控制在后一页中段落被截断后保留的最少行数。
CSS spec文档中的原文：

The 'orphans' property specifies the minimum number of lines in a block container that must be left at the bottom of a page. The 'widows' property specifies the minimum number of lines in a block container that must be left at the top of a page. Examples of how they are used to control page breaks are given below.

文档地址：?13.3.2 Breaks inside elements: 'orphans', 'widows'
如下图中标红的文字就是截断处所保留的最少行数，改段落的orphans属性设置为3：

代码为：

@media print {
  p {
    orphans: 3;
  }
}

这两个属性的默认值（default）是2。
这两个属性仅适用于打印页面， 貌似在常规的屏幕页面中似乎我还不知道关于段落截断控制的方法， 考虑到屏幕页面中的情况太复杂了， 所以大多数情况也应该交给浏览器来处理。
关于这两个属性的更多参考，mark在此：
MDN orphans
Wiki Widows and orphans

animation-fill-mode属性值中的“both”

css3 动画中animation－fill-mode中的“both”属性，无论在mdn或者w3school的文档中对该属性的解释都是：

动画将会执行 forwards 和 backwards 执行的动作

而MDN的原版文档中对该属性的解释为：

The animation will follow the rules for both forwards and backwards,
thus extending the animation properties in both directions.

这样的解释让人摸不着头脑， 实践出真知，我们还得试一下才能知道。
用demo说话：
播放次数为1，animation-fil-lmode为both时的动画停留状态
播放次数为1 没有设置animation-fill-mode时的动画停留状态
附上css的代码：

#box{
  width:100px;
  height:100px;
  background:black;
/* 在此设置有没有both以及播放次数的对比 */
  -webkit-animation: move 1s ease 1 alternate both;
  animation:move 1s ease 1 alternate both ;
  }
@-webkit-keyframes move{
  100%{
    -webkit-transform:translate3d(150px,0,0);
    transform:translate3d(150px,0,0);
     -ms-transform: translate3d(150px,0,0);
}
}

从demo中可知， both的属性是与动画方向（animation－direction）以及动画播放次数（animation-iteration-count）联系起来的，当方向设置为alternate时，次数为奇数次时，动画的停留状态为结束时状态（forwards），反之偶数次时为初始状态（backwards）

translate3d中的参数设置

translate3d是我个人感觉蛮好用的位移动画函数，好像translate在Safari中的支持并不是很好，所以现在做位移动画我一般都用translate3d。但对于该函数参数的认识却一直比较模糊，往往是现做现试，没有一个清晰的认识。
通过一些摸索， 首先可以明确的是该函数的参数是位移的增量设置（我是不会说一开始接触css动画时我曾经用过left，right这种奇蠢无比的方式来设置位置，囧rz）， 设置增量的一个好处就是便于维护， 对象的位置与对象的动画无关（当然也就便于我们直接copy代码，哈） 还有一个需要注意的地方就是y轴的参数， 当参数为正的时候时向下运动（并非我们印象中坐标轴的正数向上）
如图：

关于translate3d的详细解读，微软的这篇博客写得很详细，收藏下：
使用 CSS 轉換讓頁面變得更生動

图像遮罩clip属性中rect的参数设置

在做雪碧图的时候有接触过background-position属性，用于显示一个图像的特定位置， 其实还有一个类似的属性也可以实现该效果，就是clip属性， 顾名思义就是图像裁剪，但是初次接触该属性的时候需要注意它的参数设置，它的格式是这样的：clip:rect(top,right,bottom,left); 按顺时针方向设置，继承了css上下左右设置的习惯， 但是要注意的是：rect的四个参数都是以矩形的上边与左边为参考线 也就是说假设一副图像是300*300px的大小， 设置该属性但不裁剪的参数是这样的clip:rect（0 ，300px，300px，0） 因为右边距与底边距的设置同样是以“左边”和“上边”为参考的。
如图：

关于这个属性， 张鑫旭大神的文章还做了个详细的demo，戳这里【CSS clip:rect矩形剪裁功能及一些应用介绍】

CSS3 Transform的perspective属性

关于css 3d变换中的perspective属性，网上很多文章都讨论过，但很多时候越看越糊涂， 比如在张鑫旭大神的这篇博客中（好吧，CSS3 3D transform变换，不过如此！）他将perspective直接翻译为视角， 并且在用词上直接将其说成将视角大小设置为xxx 像素， 这种说法让我一开始对该属性产生不小的疑惑， 自己揣摩之后发现这种说法让我产生了该参数是大小或者说宽高上的错觉， 其实该属性所表示的是距离的值，也就是镜头到元素的距离， 我认为更合适的说法应该是“景深”，它设置的是镜头（或者说人眼）到元素的距离， 比方说一个正方体，它的长宽高都是100px，当其父元素（perspective作用于后代并非元素本身）设置perspective为100px的时候，镜头距离该正方体距离为100px，也就是说镜头贴着正方体表面了（此时perspective等于正方体的长），当perspective参数小雨100px时， 镜头进入正方体内部。另一种情况假设元素是二维的，那么其translateZ属性大于perspective时，元素就在镜头后面了。 如此，将其理解为“景深”我觉得更为契合。
如图：

看过有关perspective相关博客收集在这里（个人觉得第一篇最好）：
【HTML5】3D立方体旋转——鼠标/键盘可控旋转方向
理解：translate rotate 与 perspective 暧昧关系
好吧，CSS3 3D transform变换，不过如此！
CSS3 Transform的perspective属性