CSS精靈&什麼是BFC

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

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

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

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

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

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

CSS定位之BFC背後的神奇原理

BFC已經是一個耳聽熟聞的詞語了，網上有許多關於 BFC 的文章，介紹瞭如何觸發 BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。

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

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

webpack 自學筆記 ---4 提取css檔案&css相容&壓縮css

乾坤符籙：　　提取css檔案為單獨檔案（mini-css-extract-plugin）　　css相容（postcss）

01 css 須知&標籤查詢

css 須知&標籤查詢 1. css註釋 # 註釋 /*單行註釋*/ /* 多行註釋1 多行註釋2 多行註釋3

CSS：CSS介紹 & CSS與HTML結合方式

1 什麼是CSS？ CSS是指層疊樣式表 cascading style sheets。通過CSS可以讓我們定義HTML元素如何顯示。

CSS精靈技術與字型圖示詳解

CSS精靈技術（sprite）精靈技術產生的背景當用戶訪問一個網站時，需要向伺服器傳送請求，網頁上的每張影象都要經過一次請求才能展現給使用者。

css-position&z-index顯示問題

css-position&z-index顯示問題 Fixed Header guide無法正確顯示目標dom example <!DOCTYPE html>

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

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

什麼是BFC？CSS中的BFC有什麼作用？

什麼是BFC（BlockFormattingContext）　　Formattingcontext(格式化上下文)是W3CCSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互

CSS – Width & Height Auto and Percentage

前言這個非常基礎, 我在學 W3Schools 之前就已經會了, 所以之前一直沒用記入起來. 但偶爾遇到一些場景時還是會被坑到.

HTML&CSS面試高頻考點(二)

HTML&CSS面試高頻考點(一)♥ 6. W3C盒模型與怪異盒模型標準盒模型（W3C標準）

HTML&CSS面試高頻考點(三)

11. CSS隱藏元素的方式 /*佔據空間，無法點選*/ visibility: hidden; position: relative; top: -999em;

#Google HTML&CSS規範指南

Google HTML&CSS規範指南翻譯自原文目錄 Google HTML&CSS規範指南 1. 背景 2. 通用

css：三角&使用者介面（三角形效果、滑鼠樣式、輸入框與文字域的優化）

1、三角形的實現原理（1）在定義一個塊級元素div的時候，不給它定義寬和高：

[CSS] Create Complex Shapes with CSS Clip Path and Border Radiusc (border-radius & clip-path)

In this lesson, we explore creating the Egghead Shell with CSS. We explore how different properties allow us to create different shapes and how we can use our developer tools to adjust and tweak style

CSS BFC 總結

CSS BFC 總結 01BFC 簡介 BFC(Block Formatting Context)塊格式化上下文 BFC 是一個獨立的區域，是塊盒子的佈局發生的的區域，也是浮動元素和其他元素互動的區域。

第10天, BFC, IE瀏覽器常見相容問題, css Hack, 圖片優化, 專案測試檢查

day 10 一、BFC 1、什麼是BFC BFC（Block Formatting Context），翻譯為”塊級格式化上下文“，該區域擁有一套自己的渲染規則，用來約束子元素在區域內如何進行排列，且與外面的區域無關