層在PS中無疑是最重要的存在，因為有了圖層的存在，才使PS在圖像處理軟件中一直處于巔峰位置。

PS的效果圖

我們來打個比方，在一片片透明的玻璃上作畫，透過上面的玻璃紙可以看見下面紙上的內容，但是無論在上一層上如何涂畫，都不會影響到下面的玻璃。但是上面一層，會遮擋住下面的圖像。最后將玻璃紙疊加起來，通過移動各層玻璃紙的位置或者添加更多的玻璃，即可改變最后的合成效果，形成多種不同的效果。

今天我們先認識一下圖層，然后慢慢深入了解。

先新建一個文件（尺寸自己定義），進入我的工作區域。

首先我們看到在軟件的右側會有一個浮動窗口，而在浮動窗口中，這有我們這節課要講的的圖層欄。（如果再右側沒有顯示圖層欄，我們可以在【窗口 圖層】中調出，或快捷鍵F7）

浮動欄中的圖層和窗口命令中的圖層命令

點擊紅色方框位置的按鈕，新建一個圖層。（或shift+ctrl+alt+n）

新建圖層命令按鈕

回到我們的工作區先用畫筆在圖層1上隨意畫幾筆，看下效果。

空白工作區此時效果

然后我們再新建一個圖層，在圖層2上換個顏色，再畫幾筆看下效果。

新建圖層2

看，圖層2蓋住了圖層1。這是為什么呢？

空白畫布工作區此時效果

其實很簡單，因為圖層2在圖層1的上面，這樣我們把圖層2移動到圖層1下面，再看下效果。（移動時出現手掌的標識，拖到圖層1下面即可）

圖層2被圖層1蓋住

這樣圖層1就蓋住了圖層2，通過這個簡答的操作，我們可以聯想到，如果再上百個圖層的情況下，圖層之間的位置關系是多么重要。

我們在圖層1蓋住圖層2的情況下，移動圖層2。

點擊移動選擇工具，選中圖層2.

移動工具和選擇圖層2

將屬性欄里的“自動選擇”前的對號勾掉，“顯示變換控件”的對號勾掉。（此步驟看個人習慣操作）

勾選對號

回到我們的畫面操作區域，移動圖層。

此時被移動的圖層

在隨意挪動的時候，這樣就出現不同的畫面組合，得到不同的畫面效果。

反之，圖層2蓋住圖層1，我們去移動。同樣，我們會得到不同的效果。

不同的效果

初學者要特別注意圖層的層次問題，因為層次會引起遮擋。

另外圖層混合模式是一個難點，按照我們目前的知識水平而言，要理解圖層混合模式是比較困難的。實際上即使是專業的熟練的使用者也未必通曉，在實際使用中大家就自己多試驗各種混合模式的效果。以后再去理解具體的原理。

今天的課就到這里，有問題請私信或評論。

下節預告：PS丨第七課：圖層及相關工具的運用

言

又到了一年一度的“金三銀四的季節了”。不過恐怕大家都有感覺，當下，正面臨著近幾年來的最嚴重的互聯網寒冬，因此今天的“金三銀四”肯定又是一場更為慘烈的江湖廝殺。

為了提升在廝殺中的“生存率”，讓我們從面經開始如果吧。這將是一個長篇系列。這篇文章讓我們先從CSS開始。

CSS

1. 盒模型

頁面渲染時，dom 元素所采用的 布局模型。可通過box-sizing進行設置。根據計算寬高的區域可分為：

• content-box (W3C 標準盒模型)
• border-box (IE 盒模型)
• padding-box
• margin-box

2. BFC

塊級格式化上下文，是一個獨立的渲染區域，讓處于 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

IE下為 Layout，可通過 zoom:1 觸發

• 觸發條件:
• 根元素
• positon: absolute/fixed
• display: inline-block / table
• float 元素
• ovevflow !== visible
• 規則:
• 屬于同一個 BFC 的兩個相鄰 Box 垂直排列
• 屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊
• BFC 中子元素不會超出他的包含塊
• BFC 的區域不會與 float 的元素區域重疊
• 計算 BFC 的高度時，浮動子元素也參與計算
• 文字層不會被浮動層覆蓋，環繞于周圍
• 應用:
• 阻止margin重疊
• 可以包含浮動元素 —— 清除內部浮動(清除浮動的原理是兩個div都位于同一個 BFC 區域之中)
• 自適應兩欄布局
• 可以阻止元素被浮動元素覆蓋

3.層疊上下文

元素提升為一個比較特殊的圖層，在三維空間中 (z軸) 高出普通元素一等。

• 觸發條件
• 根層疊上下文(html)
• position
• css3屬性
• flex
• transform
• opacity
• filter
• will-change
• -webkit-overflow-scrolling
• 層疊等級：層疊上下文在z軸上的排序
• 在同一層疊上下文中，層疊等級才有意義
• z-index的優先級最高(從高往低排，順序如下：)
• z-index正直
• z-index 0 / auto
• 行內元素
• 浮動元素
• 塊級元素
• z-index為負
• background / border

4. 居中布局

• 水平居中
• 行內元素: text-align: center
• 塊級元素: margin: 0 auto
• absolute + transform
• flex + justify-content: center
• 垂直居中
• line-height: height
• absolute + transform
• flex + align-items: center
• table
• 水平垂直居中
• absolute + transform
• flex + justify-content + align-items

5. 選擇器優先級

• !important > 行內樣式 > #id > .class > tag > * > 繼承 > 默認
• 選擇器 從右往左 解析

6.去除浮動影響，防止父級高度塌陷

• 通過增加尾元素清除浮動
• :after /
• : clear: both
• 創建父級 BFC
• 父級設置高度

7.link 與 @import 的區別

• link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css
• 當解析到link時，頁面會同步加載所引的 css，而@import所引用的 css 會等到頁面加載完才被加載
• @import需要 IE5 以上才能使用
• link可以使用 js 動態引入，@import不行

8. CSS預處理器(Sass/Less/Postcss)

CSS預處理器的原理: 是將類 CSS 語言通過 Webpack 編譯 轉成瀏覽器可讀的真正 CSS。在這層編譯之上，便可以賦予 CSS 更多更強大的功能，常用功能:

• 嵌套
• 變量
• 循環語句
• 條件語句
• 自動前綴
• 單位轉換
• mixin復用

面試中一般不會重點考察該點，一般介紹下自己在實戰項目中的經驗即可~

9.CSS動畫

• transition: 過渡動畫
• transition-property: 屬性
• transition-duration: 間隔
• transition-timing-function: 曲線
• transition-delay: 延遲
• 常用鉤子: transitionend
• animation / keyframes
• animation-name: 動畫名稱，對應@keyframes
• animation-duration: 間隔
• animation-timing-function: 曲線
• animation-delay: 延遲
• animation-iteration-count: 次數
• infinite: 循環動畫
• animation-direction: 方向
• alternate: 反向播放
• animation-fill-mode: 靜止模式
• forwards: 停止時，保留最后一幀
• backwards: 停止時，回到第一幀
• both: 同時運用 forwards / backwards
• 常用鉤子: animationend
• 動畫屬性: 盡量使用動畫屬性進行動畫，能擁有較好的性能表現
• translate
• scale
• rotate
• skew
• opacity
• color

總結

通常，CSS 并不是重點的考察領域，但這其實是由于現在國內業界對 CSS 的專注不夠導致的，真正精通并專注于 CSS 的團隊和人才并不多。因此如果能在 CSS 領域有自己的見解和經驗，反而會為相當的加分和脫穎而出。