web第7天

阿新 • • 發佈：2020-12-16

專案切圖規範

PS常用工具

移動工具
- 移動工具主要負責圖層、選區、等的移動、複製操作。
- 快捷鍵：v
抓手工具
- 快捷鍵：h
- 空格 + 滑鼠左鍵拖動，空格鍵可臨時轉換為抓手工具。
放大鏡工具
- 放大鏡工具可以放大或縮小影象。
- 放大：點選放大工具，點選影象。Ctrl+ 加號。按住 alt+ 滑鼠滾動滾輪。
- 縮小：點選縮小工具，點選影象。Ctrl+ 減號。按住 alt+ 滑鼠滾動滾輪。
文字工具
- 快捷鍵：t
- 文字工具是用來輸入文字的。
吸管工具
- 快捷鍵：i
標尺工具
- 標尺工具可以用來測量影象的高度或者寬度。
- 屬性欄： x 和 y：繪製的起點座標。 W：標尺投射到 x 軸上的寬度。 H：標尺投射到 y 軸上的高度。（正負僅代表方向，x 軸方向向右，y 軸方向向下）。
切片工具
- 根據使用者需求截出圖片中的任何一部分，同時一張圖上可以切多個地方。另存為 web 所用格式的時候能將所切的各個部分分別儲存成一張圖片，完全區分開來。儲存時可選擇圖片格式以及切片型別。
製作表情包
- 將表情素材調入PS中；
- 再找一張臉部細節豐富的人物照片，同樣調入PS裡；
- 利用套索工具，將人物中表情部分扣取下來，拖入表情素材內。Ctrl+T調整一下表情的尺寸，讓它和素材大小協調；
- Ctrl+Shift+U首先對錶情部分去色，然後按下Ctrl+M調出曲線工具，將對比度壓低，整個表情打亮。這裡特別說一下，挑選素材圖時一定要注意去找那些面部打光均勻的照片，避免存在明暗過渡明顯的“陰陽臉”，否則會給後期圖片處理帶來很多麻煩；
- 雙擊表情圖層，然後按住Alt鍵依次拖動混合顏色帶右側兩個高光滑桿，你會發現表情就完美地嵌入到素材中了；

常見的圖片格式和特點

格式	優點	缺點	使用場景
jpg	色彩豐富，檔案小	有失真壓縮，反覆儲存圖片質量下降明顯	色彩豐富的圖片/漸變影象
gif	檔案小，支援動畫、透明，相容性比較好	只支援256種顏色	色彩簡單的logo/icon/動圖
png	無失真壓縮，支援透明，簡單圖片尺寸小	不支援動畫，色彩豐富的圖片尺寸大	logo/icon/透明圖
webp	檔案小，支援有損和無失真壓縮，支援動畫、透明	瀏覽器相容性不好	支援webp格式的app和webview

CSS精靈

什麼是 CSS 精靈

英文叫法 CSS sprites，通常被解釋為“CSS 影象拼合”或“CSS 貼圖定位“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background-image: url(./images/jingling.jpg);
        }
        .box1 {
            background-position: -150px 0;
        }
        .box2 {
            background-position: -200px -50px;
        }
    </style>
</head>
<body>
    <img src="./images/jingling.jpg" alt="">
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

CSS 精靈優缺點
- 優點：
  - 減少網頁的 http 請求，從而大大的提高頁面的效能；
  - 圖片命名上的困擾；
  - 更換風格方便。
- 缺點：
  - 必須要限定容器大小符合背景圖元素位置，需要計算

CSS小箭頭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: blue;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .box1 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent transparent red;
            position: absolute;
            top: 0;
        }
        .box2 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent transparent blue;
            position: absolute;
            top: 0;
            left: -10px;
        }
        .wrap {
            width: 100px;
            height: 200px;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

BFC (Block Formatting Context) 塊級格式化上下文

什麼是bfc？
- Formatting Context：指頁面中的一個渣染區域，並且擁有一套渣染規則，他決定了其子標籤如何定位，以及與其他標籤的相互關係和作用。
  
  BFC塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。
怎樣生成BFC
- 根標籤
- float的值不為none
- overflow 的值不為 visible
- display 的值為 inline-block
- position 的值為 absolute 或 fixed
BFC的特性
- 內部的標籤預設會在垂直方向上一個接一個的放置。
- 垂直方向上的距離由margin決定，屬於同一個BFC的兩個相鄰標籤的margin會發生重疊。
- 每個標籤的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動標籤也是如此。
- BFC 的區域不會與 float 的標籤區域重疊。
- 計算BFC的髙度時，浮動子標籤也參與計算。
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子標籤不會影響到外面標籤，反之亦然。
BFC解決的問題
- 外邊距塌陷
- 清浮動
- 兩欄或者三欄自適應佈局