專案切圖規範 css精靈圖 css小箭頭程式碼 BFC (Block Formatting Context) 塊級格式化上下文

阿新 • • 發佈：2021-01-09

專案切圖規範

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解決的問題
- 外邊距塌陷
- 清浮動
- 兩欄或者三欄自適應佈局

阿里向量圖示

https://www.cnblogs.com/xiaonian0327/p/7735799.html

專案切圖規範 css精靈圖 css小箭頭程式碼 BFC (Block Formatting Context) 塊級格式化上下文

專案切圖規範 PS常用工具移動工具移動工具主要負責圖層、選區、等的移動、複製操作。

【CSS 精靈圖（sprite）】相關知識總結

技術標籤：前端csshtml 【CSS 精靈圖（sprite）】有這篇文章學習精靈圖技術就夠了

CSS精靈圖Sprite，offset()方法獲取偏移位置

一.CSS精靈圖Sprite 精靈技術：就是一種處理網頁背景影象的方式，它需要將一個頁面中涉及到的所有或一部分較小的背景影象合併到一張較大的圖片中，然後再將這個圖片應用到網頁中。通常情況下，我們只是將背景影象中

css sprites（精靈圖）如何使用？

cssSprites是一種效能優化技術，一種網頁圖片應用處理方式：將多個影象組合成單個影象檔案以在網站上使用的方法，以提高效能；也被稱為css精靈圖。

2-1 css加精靈圖

技術標籤：csshtml css加精靈圖 1.前言·基礎知識 1-1. visual studio code軟體 Microsoft在2015年4月30日Build 開發者大會上正式宣佈了 Visual Studio Code 專案：一個運行於 Mac OS X、Windows和 Linux

精靈圖css

今天學習精靈圖的使用用起來時非常舒服，用的有好處也有壞處精靈圖的好處：

CSS的reset,CSS優先順序,雪碧圖

12.什麼是CSS reset？ reset.css ====》重置css樣式的非要說他問題：體積了一點點點

按鈕不閃爍（精靈圖）

效果展示：　　程式碼：　　 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

[Vue音樂專案] 第四節輪播圖

既然上節已經獲取到資料，那麼本節將使用輪播圖展示這些資料，輪播圖屬於常用元件，可以獨立成一個公共元件。

sprites 精靈圖（雪碧圖）

技術標籤：css隨記什麼是精靈圖 css精靈(CSS sprites)，又稱雪碧圖,是一種網頁圖片應用處理技術。

07 PS常用工具、常見的圖片格式和特點、CSS精靈、BFC

07 PS常用工具、常見的圖片格式和特點、CSS精靈、BFC 專案切圖規範 PS常用工具移動工具

前端筆記記錄---精靈圖的實現

技術標籤：htmlcsshtmlcss 宣告：以下內容為個人學習總結，初衷是方便自己學習複習記錄。如有錯誤之處，煩請多多指正！

CSS精靈&什麼是BFC

PS常用工具移動工具移動工具主要負責圖層、選區、等的移動、複製操作。快捷鍵：v

django框架前後端混合專案之首頁輪播圖、主頁、後臺管理、頭像顯示等相關內容-79

1 首頁頁面搭建（輪播圖）前端 <div class=\"lbt\"><div id=\"carousel-example-generic\" class=\"carousel slide\" data-ride=\"carousel\"><ol class=\"carousel-indic