摘要：在前端開發中，我經常碰到一些不能馬上理解的屬性，于是打算以后但凡碰到這些微妙又模糊的屬性，都歸納到這里。如圖看過有關相關博客收集在這里個人覺得第一篇最好立方體旋轉鼠標鍵盤可控旋轉方向理解與曖昧關系好吧，變換，不過如此的屬性

在前端開發中，我經常碰到一些不能馬上理解的css屬性， 于是打算以后但凡碰到這些微妙又模糊的屬性，都歸納到這里。

@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

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是我個人感覺蠻好用的位移動畫函數，好像translate在Safari中的支持并不是很好，所以現在做位移動畫我一般都用translate3d。但對于該函數參數的認識卻一直比較模糊，往往是現做現試，沒有一個清晰的認識。
通過一些摸索， 首先可以明確的是該函數的參數是位移的增量設置（我是不會說一開始接觸css動畫時我曾經用過left，right這種奇蠢無比的方式來設置位置，囧rz）， 設置增量的一個好處就是便于維護， 對象的位置與對象的動畫無關（當然也就便于我們直接copy代碼，哈） 還有一個需要注意的地方就是y軸的參數， 當參數為正的時候時向下運動（并非我們印象中坐標軸的正數向上）
如圖：

關于translate3d的詳細解讀，微軟的這篇博客寫得很詳細，收藏下：
使用 CSS 轉換讓頁面變得更生動

在做雪碧圖的時候有接觸過background-position屬性，用于顯示一個圖像的特定位置， 其實還有一個類似的屬性也可以實現該效果，就是clip屬性， 顧名思義就是圖像裁剪，但是初次接觸該屬性的時候需要注意它的參數設置，它的格式是這樣的：clip:rect(top,right,bottom,left); 按順時針方向設置，繼承了css上下左右設置的習慣， 但是要注意的是：rect的四個參數都是以矩形的上邊與左邊為參考線 也就是說假設一副圖像是300*300px的大小， 設置該屬性但不裁剪的參數是這樣的clip:rect（0 ，300px，300px，0） 因為右邊距與底邊距的設置同樣是以“左邊”和“上邊”為參考的。
如圖：

關于這個屬性， 張鑫旭大神的文章還做了個詳細的demo，戳這里【CSS clip:rect矩形剪裁功能及一些應用介紹】

關于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屬性