黑馬程式設計師

ZN.zn發表於2020-10-22
程式設計師

精靈圖
為什麼需要精靈圖
一個網頁中往往會應用很多小的背景影像作為修飾，當網頁中的影像過多時，伺服器就會頻繁地接收和傳送請求圖片，造成伺服器請求壓力過大，這將大大降低頁面的載入速度。
為什麼使用精靈圖（目的）：

​ 為了有效地減少伺服器接收和傳送請求的次數，提高頁面的載入速度，出現了 CSS 精靈技術（也稱 CSS Sprites、CSS 雪碧）。
核心原理：

​ 將網頁中的一些小背景影像整合到一張大圖中 ，這樣伺服器只需要一次請求就可以了。
精靈圖（sprites）的使用
使用精靈圖核心：

  1. 精靈技術主要針對於背景圖片使用。就是把多個小背景圖片整合到一張大圖片中。
  2. 這個大圖片也稱為 sprites 精靈圖 或者 雪碧圖
  3. 移動背景圖片位置， 此時可以使用 background-position 。
  4. 移動的距離就是這個目標圖片的 x 和 y 座標。注意網頁中的座標有所不同
  5. 因為一般情況下都是往上往左移動，所以數值是負值。
  6. 使用精靈圖的時候需要精確測量，每個小背景圖片的大小和位置。

使用精靈圖核心總結：

  1. 精靈圖主要針對於小的背景圖片使用。

  2. 主要藉助於背景位置來實現—background-position 。

  3. 一般情況下精靈圖都是負值。（千萬注意網頁中的座標： x軸右邊走是正值，左邊走是負值， y軸同理。）
    字型圖示
    字型圖示的產生
    字型圖示使用場景： 主要用於顯示網頁中通用、常用的一些小圖示。

精靈圖是有諸多優點的，但是缺點很明顯。

1.圖片檔案還是比較大的。

2.圖片本身放大和縮小會失真。

3.一旦圖片製作完畢想要更換非常複雜。

此時，有一種技術的出現很好的解決了以上問題，就是字型圖示 iconfont。

字型圖示可以為前端工程師提供一種方便高效的圖示使用方式，展示的是圖示，本質屬於字型。
字型圖示的優點
輕量級：一個圖示字型要比一系列的影像要小。一旦字型載入了，圖示就會馬上渲染出來，減少了伺服器請求

  • 靈活性：本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果、旋轉等
  • 相容性：幾乎支援所有的瀏覽器，請放心使用
  • 注意： 字型圖示不能替代精靈技術，只是對工作中圖示部分技術的提升和優化。

總結：

1.如果遇到一些結構和樣式比較簡單的小圖示，就用字型圖示。[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-uUA4UGpj-1603378090992)(images/1571519724473.png)]

2.如果遇到一些結構和樣式複雜一點的小圖片，就用精靈圖。
使用步驟

字型圖示是一些網頁常見的小圖示，我們直接網上下載即可。 因此使用可以分為：

1.字型圖示的下載

2.字型圖示的引入 （引入到我們html頁面中）

3.字型圖示的追加 （以後新增新的小圖示）
字型圖示的下載
推薦下載網站：

  • icomoon 字型檔 htt-p://icomoon.io 推薦指數 ★★★★★

IcoMoon 成立於 2011 年，推出了第一個自定義圖示字型生成器，它允許使用者選擇所需要的圖示，使它們成一字型。該字型檔內容種類繁多，非常全面，唯一的遺憾是國外伺服器，開啟網速較慢。

  • 阿里 iconfont 字型檔 http://www.iconfont.cn/ 推薦指數 ★★★★★

這個是阿里媽媽 M2UX 的一個 iconfont 字型圖示字型檔，包含了淘寶圖示庫和阿里媽媽圖示庫。可以使用 AI製作圖示上傳生成。 重點是，免費！
字型圖示的引入
下載完畢之後，注意原先的檔案不要刪，後面會用。

  1. 把下載包裡面的 fonts 資料夾放入頁面根目錄下
    • 字型檔案格式

不同瀏覽器所支援的字型格式是不一樣的，字型圖示之所以相容，就是因為包含了主流瀏覽器支援的字型檔案。

1).TureType( .ttf )格式.ttf字型是Windows和Mac的最常見的字型，支援這種字型的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2).Web Open Font Format( .woff )格式woff字型，支援這種字型的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3).Embedded Open Type( .eot )格式.eot字型是IE專用字型，支援這種字型的瀏覽器有IE4+；

4).SVG( .svg )格式.svg字型是基於SVG字型渲染的一種格式，支援這種字型的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

2.在 CSS 樣式中全域性宣告字型： 簡單理解把這些字型檔案通過css引入到我們頁面中。

一定注意字型檔案路徑的問題
html 標籤內新增小圖示。
給標籤定義字型。
注意：務必保證 這個字型和上面@font-face裡面的字型保持一致
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-rVmCySuJ-1603378468403)(images/1571520485350.png)]
字型圖示的追加
如果工作中，原來的字型圖示不夠用了，我們需要新增新的字型圖示到原來的字型檔案中。

把壓縮包裡面的 selection.json 從新上傳，然後選中自己想要新的圖示，從新下載壓縮包，並替換原來的檔案即可。
CSS 三角
介紹
網頁中常見一些三角形，使用 CSS 直接畫出來就可以，不必做成圖片或者字型圖示。

一張圖， 你就知道 CSS 三角是怎麼來的了, 做法如下：
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-color: red green blue black;
line-height:0;
font-size: 0;
}

  1. 我們用css 邊框可以模擬三角效果
  2. 寬度高度為0
  3. 我們4個邊框都要寫， 只保留需要的邊框顏色，其餘的不能省略，都改為 transparent 透明就好了
  4. 為了照顧相容性 低版本的瀏覽器，加上 font-size: 0; line-height: 0;
    CSS 使用者介面樣式
    什麼是介面樣式

所謂的介面樣式，就是更改一些使用者操作樣式，以便提高更好的使用者體驗。

  • 更改使用者的滑鼠樣式
  • 表單輪廓
  • 防止表單域拖拽
    滑鼠樣式 cursor
    li {
    cursor: pointer;
    }
    設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。
    輪廓線 outline
    給表單新增 outline: 0; 或者 outline: none; 樣式之後，就可以去掉預設的藍色邊框。
    input {
    outline: none;
    }
    防止拖拽文字域 resize
    實際開發中，我們文字域右下角是不可以拖拽的。
    textarea{
    resize: none;
    }
    vertical-align 屬性應用
    CSS 的 vertical-align 屬性使用場景： 經常用於設定圖片或者表單(行內塊元素）和文字垂直對齊。

官方解釋： 用於設定一個元素的垂直對齊方式，但是它只針對於行內元素或者行內塊元素有效。

語法：vertical-align : baseline | top | middle | bottom
圖片、表單和文字對齊
圖片、表單都屬於行內塊元素，預設的 vertical-align 是基線對齊。
此時可以給圖片、表單這些行內塊元素的 vertical-align 屬性設定為 middle 就可以讓文字和圖片垂直居中對齊了。
解決圖片底部預設空白縫隙問題
bug：圖片底側會有一個空白縫隙，原因是行內塊元素會和文字的基線對齊。

主要解決方法有兩種：

1.給圖片新增 vertical-align:middle | top| bottom 等。 （提倡使用的）

2.把圖片轉換為塊級元素 display: block;
溢位的文字省略號顯示
單行文字溢位顯示省略號
單行文字溢位顯示省略號–必須滿足三個條件：
/1. 先強制一行內顯示文字/
white-space: nowrap; （ 預設 normal 自動換行）

/2. 超出的部分隱藏/
overflow: hidden;

/3. 文字用省略號替代超出的部分/
text-overflow: ellipsis;
常見佈局技巧

  1. margin負值的運用
  2. 文字圍繞浮動元素
  3. 行內塊的巧妙運用
  4. CSS三角強化
    margin負值運用
    讓每個盒子margin 往左側移動 -1px 正好壓住相鄰盒子邊框

2.滑鼠經過某個盒子的時候，提高當前盒子的層級即可（如果沒有有定位，則加相對定位（保留位置），如果有定位，則加z-index）
文字圍繞浮動元素
巧妙運用浮動元素不會壓住文字的特性
行內塊巧妙運用
頁碼在頁面中間顯示:

  1. 把這些連結盒子轉換為行內塊， 之後給父級指定 text-align:center;
  2. 利用行內塊元素中間有縫隙，並且給父級新增 text-align:center; 行內塊元素會水平會居中
    CSS 三角強化 案例
    原理
<head>
  <style>
      .box1 {
          width: 0;
          height: 0;

          /* 把上邊框寬度調大 */
          /* border-top: 100px solid transparent;
          border-right: 50px solid skyblue; */
          /* 左邊和下邊的邊框寬度設定為0 */
          /* border-bottom: 0 solid blue;
          border-left: 0 solid green; */

          /* 1.只保留右邊的邊框有顏色 */
          border-color: transparent red transparent transparent;
          /* 2. 樣式都是solid */
          border-style: solid;
          /* 3. 上邊框寬度要大， 右邊框 寬度稍小， 其餘的邊框該為 0 */
          border-width: 100px 50px 0 0 ;
      }
  </style>
</head>
<body>
    <div class="box1"></div>
</body>

CSS 初始化
不同瀏覽器對有些標籤的預設值是不同的，為了消除不同瀏覽器對HTML文字呈現的差異，照顧瀏覽器的相容，我們需要對CSS 初始化

簡單理解： CSS初始化是指重設瀏覽器的樣式。 (也稱為CSS reset）

每個網頁都必須首先進行 CSS初始化。

這裡我們以 京東CSS初始化程式碼為例。

相關文章