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

在前端開發(fā)中，我經(jīng)常碰到一些不能馬上理解的css屬性， 于是打算以后但凡碰到這些微妙又模糊的屬性，都?xì)w納到這里。

@media print打印頁面用得較少，對于打印頁面中的屬性一直比較陌生， orphans與widows（注意不是windows）屬性主要用來控制打印頁面中排版中保留的最少行問題，理解該屬性，也更能體會到CSS在排版上對于各種頁面輸出的靈活控制。

比如在打印頁面排版的時候， 某些段落在分頁的情況下會不得不出現(xiàn)截斷，orphans的作用就是控制出現(xiàn)截斷時在前一頁中需要保留最少行數(shù)（在分欄情況下也會出現(xiàn)截斷）一般的文字處理器在這種情況下會為某個出現(xiàn)截斷的段落保留2行（因為如果沒有這項機(jī)制，將出現(xiàn)只有一行出現(xiàn)在截斷處，而這種排版在很多時候是影響美觀和閱讀的），這里直接用用該帖中的栗子（原帖地址?orphans）

同樣的邏輯， 在打印頁面中，段落被截斷后在后一頁面中出現(xiàn)的截斷由widows屬性控制，widows控制在后一頁中段落被截斷后保留的最少行數(shù)。
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"
如下圖中標(biāo)紅的文字就是截斷處所保留的最少行數(shù)，改段落的orphans屬性設(shè)置為3：

代碼為：

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

這兩個屬性的默認(rèn)值（default）是2。
這兩個屬性僅適用于打印頁面， 貌似在常規(guī)的屏幕頁面中似乎我還不知道關(guān)于段落截斷控制的方法， 考慮到屏幕頁面中的情況太復(fù)雜了， 所以大多數(shù)情況也應(yīng)該交給瀏覽器來處理。
關(guān)于這兩個屬性的更多參考，mark在此：
MDN orphans
Wiki Widows and orphans

css3 動畫中animation－fill-mode中的“both”屬性，無論在mdn或者w3school的文檔中對該屬性的解釋都是：

動畫將會執(zhí)行 forwards 和 backwards 執(zhí)行的動作

而MDN的原版文檔中對該屬性的解釋為：

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

這樣的解釋讓人摸不著頭腦， 實(shí)踐出真知，我們還得試一下才能知道。
用demo說話：
播放次數(shù)為1，animation-fil-lmode為both時的動畫停留狀態(tài)
播放次數(shù)為1 沒有設(shè)置animation-fill-mode時的動畫停留狀態(tài)
附上css的代碼：

#box{
  width:100px;
  height:100px;
  background:black;
/* 在此設(shè)置有沒有both以及播放次數(shù)的對比 */
  -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）以及動畫播放次數(shù)（animation-iteration-count）聯(lián)系起來的，當(dāng)方向設(shè)置為alternate時，次數(shù)為奇數(shù)次時，動畫的停留狀態(tài)為結(jié)束時狀態(tài)（forwards），反之偶數(shù)次時為初始狀態(tài)（backwards）

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

關(guān)于translate3d的詳細(xì)解讀，微軟的這篇博客寫得很詳細(xì)，收藏下：
使用 CSS 轉(zhuǎn)換讓頁面變得更生動

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

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

關(guān)于css 3d變換中的perspective屬性，網(wǎng)上很多文章都討論過，但很多時候越看越糊涂， 比如在張鑫旭大神的這篇博客中（好吧，CSS3 3D transform變換，不過如此！）他將perspective直接翻譯為視角， 并且在用詞上直接將其說成將視角大小設(shè)置為xxx 像素， 這種說法讓我一開始對該屬性產(chǎn)生不小的疑惑， 自己揣摩之后發(fā)現(xiàn)這種說法讓我產(chǎn)生了該參數(shù)是大小或者說寬高上的錯覺， 其實(shí)該屬性所表示的是距離的值，也就是鏡頭到元素的距離， 我認(rèn)為更合適的說法應(yīng)該是“景深”，它設(shè)置的是鏡頭（或者說人眼）到元素的距離， 比方說一個正方體，它的長寬高都是100px，當(dāng)其父元素（perspective作用于后代并非元素本身）設(shè)置perspective為100px的時候，鏡頭距離該正方體距離為100px，也就是說鏡頭貼著正方體表面了（此時perspective等于正方體的長），當(dāng)perspective參數(shù)小雨100px時， 鏡頭進(jìn)入正方體內(nèi)部。另一種情況假設(shè)元素是二維的，那么其translateZ屬性大于perspective時，元素就在鏡頭后面了。 如此，將其理解為“景深”我覺得更為契合。
如圖：

看過有關(guān)perspective相關(guān)博客收集在這里（個人覺得第一篇最好）：
【HTML5】3D立方體旋轉(zhuǎn)——鼠標(biāo)/鍵盤可控旋轉(zhuǎn)方向
理解：translate rotate 與 perspective 曖昧關(guān)系
好吧，CSS3 3D transform變換，不過如此！
CSS3 Transform的perspective屬性