font-family: Helvetica, Arial, sans-serif;
font-size: 60px;
text-transform: uppercase; // 大寫
text-decoration: underline; // 下劃線
color: #8001ff;
border: 5px dashed salmon;
border-radius: 5px;
cursor: pointer;
box-shadow: 5px 5px 20px #ccc;
display: block; // 塊元素
display: inline; // 內聯元素
inline, weight 和 height 無效。
box-sizing: border-box; // width 計算 padding 和 border
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
text-align: justify; // 左右對齊
垂直對齊
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
行高
line-height:1.2;
line-height:19.2px;
line-height:120%;
居中對齊
margin: 0 auto;
outline: 1px solid red !important; // border 外框，outline是不占空間的，既不會增加額外的width或者height，邊框占用寬度
@media only screen and (max-width: 300px) {
/* style */
}
img,
embed,
object,
video {
max-width: 100%;
}
手指大約 40px，小屏按鈕最小設置為 48 * 48px，兩個之間最好空 40px
min-height: 48px;
min-width: 48px;
<meta name="viewport" content="width=device-width, initial-scale=1.0">
padding: 1.5em inhenit;
display: flex;
flex-wrap: wrap;
calc(100px - 10%)
*有效，* calc(100px-10%)
*則無效
`!important` 優先級最高
.testClass{
color:blue !important;
}
你是否注意到，將 height
和 width
設置為 100vmax
或 100vmin
會如何改變圖片的寬高比？它會將你的圖片壓縮成正方形，所以，如果你想要保留其他寬高比，請小心！
壓縮、優化和自動化
開始編寫你自己的自動化 ImageMagick 或 ImageOptim 工具前，你需要安裝 Node.js 和 npm。 ImageMagick:
ImageMagick
Mac 上的一個簡單的 ImageMagick 安裝包
GraphicsMagick (ImageMagick 的一個分叉)
Grunt:
Grunt 簡介
Grunt 使用入門
用 Grunt 生成不同分辨率的圖片
用于生成多張圖片的 grunt-responsive-images 插件
用于響應式圖片工作流的 grunt-respimg 插件
腳本編制示例中使用的文件：
convert.sh (含說明)
Gruntfile.js (對于 Windows，移除第 7 行：engine: 'im',
)
Imager.js：為 BBC 新聞開發的響應式圖片加載。
圖片處理工具：
ImageOptim (Mac)
Trimage - 和 ImageOptim 類似 (Windows, Mac, Linux)
ImageAlpha
圖片壓縮
PageSpeed Insights 示例
Grunt PageSpeed 插件
PageSpeed Node module
cURL 示例
PageSpeed Insights Node module
練習: 項目第 1 部分
請從 此處下載項目文檔。*
請確保通過 localhost 運行項目。 對于 Mac/Linux，請 cd
至工作目錄并設置一個簡單的 HTTP 服務器。對于 Windows，請參見下文。
Make sure you are running the Udacity Feedback Chrome Extension to get feedback. 確保你已經安裝了優達學城前端反饋插件。
打開控制臺，看看圖片的總體積！
了解更多有關 figure 標簽的信息！
性能
延遲會什么會成為新的瓶頸？看看 Ilya 在高性能瀏覽器網絡中有什么要說的。請注意縮短延遲如何不斷改善頁面加載時間，而使帶寬的圖表趨于平緩：
要減少圖片下載次數，你也可以使用 CSS 圖片精靈或[響應式精靈](http://blog.brianjohnsondesign.com/responsive-background-image-sprites-css-tutorial/%EF%BC%89%E3%80%82%E7%B2%BE%E7%81%B5%E9%A1%B5 圖片組合了大量圖片，這些圖片可以通過將精靈頁設置為元素背景，然后通過 CSS 調整背景位置來單獨顯示。此技巧對圖標和其他重復圖形尤為有用。
無論你采用何種技巧來避免延遲，都請注意 HTTP/2 帶來的更改。
簡單地說，HTTP/2 表示請求多個文件的成本更小：準備停止使用腳本編寫、連接和其他 HTTP/1 技巧！
如需了解更多信息，請查看面向前端 Web 開發的 HTTP2。
CSS 背景圖片
Div with background image
CSS background-size: cover
Body with background image
Body with background image and gradient
Body with elaborate background using only CSS
Using CSS background images for conditional image display
Using CSS background images for alternative images
image-set()
background-color: cover;
background-color: contain;
符號字符
例子：Unicode 代替圖片
Unicode 字符集
Unicode 符號集合
圖標字體
Zocial
Font Awesome
We Love Icon Fonts!
Icon fonts on CSS-Tricks
SVG 和數據 URI 行內圖片
例子：
SVG Data URI in HTML
示例：
srcset with w values
srcset with w values, 50vw
Sizes 屬性
示例：
srcset with w values
srcset with w values, 50vw
srcset 和 sizes 練習
我想總結你剛剛學習的關于圖片屬性 srcset
和 sizes
的內容。 你可以借此機會先詳細了解每個屬性的語法，然后在下面兩道測試題中，在真正的頁面上嘗試使用它們。
在本測試題中，你將嘗試使用 srcset
。在下一道測試題中，你將添加 sizes
，以便為瀏覽器提供更多信息。
語法
srcset
有兩種自定義方式，一種使用 x
來區分設備像素比 (DPR)，另一種使用 w
來描述圖像的寬度。
對設備像素比的反應
<img src="image_2x.jpg" srcset="image_2x.jpg 2x, image_1x.jpg 1x" alt="a cool image">
將 srcset
設置為與逗號分隔的一連串 filename multiplier
對相等，其中每個 multiplier
必須是后跟 x
的整數。
例如，1x
表示 1 倍顯示屏，2x
表示像素密度為兩倍的顯示屏，如 Apple 的 Retina 顯示屏。
瀏覽器會下載與其 DPR 對應的最佳圖片。
另請注意，有一個作為備用的 src
屬性。
對圖片寬度的反應
<img src="image_200.jpg" srcset="image_200.jpg 200w, image_100.jpg 100w" alt="a cool image">
將 srcset
設置為與逗號分隔的一連串 filename widthDescriptor
對相等，其中每個 widthDescriptor
都以像素為測量單位， 并且必須是后跟 w
的整數。在這里，widthDescriptor
指定每個圖片文件的自然寬度，使瀏覽器能夠根據窗口大小和 DPR 選擇要請求的最適當的圖片。 （如果沒有 widthDescriptor
，瀏覽器需要下載圖片才能知道其寬度！）
另請注意，有一個作為備用的 src
屬性。
準備好嘗試一下？單擊“繼續”試試吧！
Here are my finished image tags:
DPR (海牙)
<img class="dpi" src="images/Den_Haag_2x.jpg" srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg 1x" alt="Den Haag Skyline">
請注意我如何獲得 src
作為備份。srcset
中的來源順序無關緊要。此外，如果你遺漏了乘數，它將默認為 1x
，也就是說，
srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg 1x"
等同于：
srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg"
圖片寬度（澳大利亞）
<img class="w" src="images/Australia_1280w.jpg" srcset="images/Australia_1280w.jpg 1280w, images/Australia_640w.jpg 640w" alt="Australia from Space">
同樣地，會出現 src
備份，你可以切換 srcset
中的圖片順序。
包含大小的圖片寬度
如果圖片不以全窗口寬度顯示會怎樣？那么，除了 srcset
外，你還需要其他元素（假設圖片將為全窗口寬度）
向包含媒體查詢的圖片添加一個 sizes
屬性和一個 vw
值。srcset
和 sizes
合起來可讓瀏覽器知道圖片的自然寬度以及圖片相對于窗口寬度的顯示寬度。 知道圖片的顯示寬度和可用圖片文件的寬度后，瀏覽器將獲得下載具有滿足其需求的適當分辨率且盡可能小的圖片所需的信息。 而且，瀏覽器在頁面加載初期，解析 HTML 時即可做出此選擇。
srcset 與 sizes 配合使用的語法
這里是一個示例：
<img src="images/great_pic_800.jpg" sizes="(max-width: 400px) 100vw, (min-width: 401px) 50vw" srcset="images/great_pic_400.jpg 400w, images/great_pic_800.jpg 800w" alt="great picture">
sizes
由以逗號分隔的 mediaQuery width
對組成。sizes
會在加載流程初期告訴瀏覽器，該圖片會在點擊 mediaQuery
時以某個 width
顯示。
實際上，如果 sizes
缺失，瀏覽器會將 sizes
默認為 100vw
，表示它預計圖片將以全窗口寬度顯示。
sizes
會為瀏覽器額外提供一條信息，以確保它根據圖片的最終顯示寬度下載正確的圖片文件。說明一下，它實際上不會調整圖片的大小 - 這是 CSS 的工作。
在本示例中，如果瀏覽器的窗口寬度等于或小于 400 像素，瀏覽器知道圖片將為全窗口寬度；如果窗口寬度大于 400 像素，則為一半窗口寬度。瀏覽器知道它具有兩個圖片選項 - 一個具有 400 像素的自然寬度，另一個具有 800 像素。
準備好幫助瀏覽器了？單擊“繼續”親自試試吧！
這里是我已完成的圖片標記：
<img class="w" src="images/Coffee_1280w.jpg" srcset="images/Coffee_1280w.jpg 1280w, images/Coffee_640w.jpg 640w" sizes="(max-width: 960px) 50vw, 100vw" alt="Coffee by Amy March from Turkey">
我沒有在 sizes
中包括第二個媒體查詢，因為如果沒有媒體查詢，列出的寬度會被視為默認值。
另外請注意，sizes
中的媒體查詢與 CSS 匹配。說明一下，更改 sizes
不會影響 CSS。它只會提醒瀏覽器注意最終需要在該處顯示的圖片。
網絡廣播從最初在系統上設置 Grunt 開始， 一直講到設置完整的項目流程。
此處鏈接為 關于此網絡廣播的詳細論壇文章 。 文章中包含對 Grunt 安裝配置和設置任務 的相關向導。
此處鏈接為 在網絡廣播中使用的 GitHub 存儲庫 。
有關網絡廣播的詳細整理，請訪問 此處.
設置 Gulp 工作流演示（概要）
由學習教練 John 主講，有關如何設置 Gulp 的現場演示。
Gulp 可代替前端開發人員完成所有必需的繁瑣、 重復性任務：壓縮、串聯、lint 操作、 圖像優化、Git 提交等多種任務， 都可以交由 Gulp 來實現。從而讓你能夠集中精力處理重要任務，也就是 編寫代碼。
網絡廣播從最初在系統上設置 Gulp 開始， 一直講到設置完整的項目流程。
要查看網絡廣播的詳細概要（包括代碼 段），請參閱此 論壇 文章.
如果想要跟隨演示學習，請在 此存儲庫 中下載起始代碼。
有關網絡廣播的詳細整理，請訪問 此處.
