首頁 > 開發者 > JavaScript
CSS查缺補漏篇，CSS缺補漏篇
前面的話：關於CSS，之前我已經做過一些基礎的知識點介紹。CSS主要是用來給版面設定樣式的，一般說來，在一個網站中，CSS應該獨立封裝在一個單獨的.css外部檔案中。樣式的設定總體來說是不難的，但是需要足夠的細心和耐心，本人之前做簡單的靜態頁面時，也常出現bug，比如說清除浮動、聖杯布局等問題。這些知識點不難，但是很瑣碎，本人也尚未能夠整理完全，之後我也會根據具體問題做出具體分析，今天主要是對上次做的總結查缺補漏，有興趣的可以在下面互相交流喲。1、fireworks工具
——該工具的使用是根據設計圖來進行網頁的編寫，常用的還有picpick等，本人慣用這一款工具，下面是對該工具的簡單介紹。
1.1 正常切換
| K | V | H | Z | U | T | I | G |
| 切片 | 小黑 | 小手 | 縮放 | 圖形 | 文本 | 取色 | 填色 |
1.2臨時切換
| ctrl——小黑 | ctrl+空格——放大 |
| 空格——小手 | ctrl+Alt+空格——縮小 |
| 普通的放大縮小會自動移動到圖片中間，臨時的放大縮小仍然在原來的位置，使用起來很方便（Ctrl+N建立；Ctrl+O開啟） | |
1.3其他技巧
不需要的輔助線，拖回到尺規上會自動刪除；
Ctrl+加號或者滾輪 放大圖片 Ctrl+減號或者滾輪 縮小圖片（不方便）
1.4 在測量圖片之前要鎖定圖片：
2、網站的兩種構建策略
漸進增強——progressive enhancement，一開始只構建網站的最少特性，然後不斷針對各瀏覽器追加功能
優雅降級——graceful degradation，一開始就構建網站的完整功能，然後針對瀏覽器測試和修複
3、常見布局簡介1）固定式配置 Fixed Layout
2）響應式布局 Responsive Layout
3）流式布局 Fluid Layout
4）柵格布局 Grid Layout
5）瀑布流布局 Waterfall Layout
6）聖杯布局、雙飛翼布局 Holy Grail Layout 兩邊固定中間流動
4、設定網站表徵圖4.1 開啟http://www.jd.com/favicon.ico即可看到網站表徵圖；按右鍵表徵圖，選擇圖片另存新檔並儲存到本地；
4.2 將表徵圖放在根目錄下(也可以是其他目錄)，在頁面源檔案的<head></head>標籤之間插入
4.3 shortcut 捷徑 捷徑
4.4 使用網頁表徵圖的網站：http://www.bitbug.net/
5、引用樣式檔案 注意引用順序：base是公用樣式，index是特定樣式，特定網頁的樣式應該放在公用樣式後面，以便對其進行覆蓋| link標籤 | 瞭解即可 | |
| charset | 被連結文檔的字元編碼方式 | 幾乎沒有主流瀏覽器支援該屬性 |
| href | 被連結文檔的位置 | |
| hreflang | 被連結文檔中文本的語言 | |
| rel | 被連結文檔與當前文檔之間的關係 | 常用的有stylesheet 和 shortcut icon （sizes——網站表徵圖的尺寸，僅適用於 rel="icon"） |
| rev | 與rel相反 reversed relationship | 幾乎沒有主流瀏覽器支援該屬性 |
| target | 被連結文檔在哪個視窗或架構中載入 | 幾乎沒有主流瀏覽器支援該屬性 |
| type | 被連結文件類型 |
6.1 一定要記得加定位,否則z-index不生效
6.2 後面的盒子會壓住前面的盒子，z-index高的盒子會壓住z-index低的盒子；盒子不是自身z-index越高就一定會越靠上，除了看他自身還要看他們的父級，父級層級越高的，子級越靠上。
總結： 層級不但要比較子級，還要比較父級(拼爹)。z-index理論上沒有最大值，但實際上是21474836472的32次方；最小值不是0，可以取負數。
7、CSS3圓角（border-radius 邊框-半徑）7.1 CSS3屬性，用於向元素添加圓角邊框：
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
7.2 簡寫形式： border-radius:2px; 順序從左上方開始順時針設定（左上 右上 右下 左下）
8、絕對位置可以改變元素的顯示方式，但相對定位不可以9、半透明效果：background:rgba(0,0,0,.2);
red green blue alpha （紅色值 綠色值 藍色值 透明度）
色值取值範圍是0~255；透明度取值範圍是0~1；如果是零點幾，前面的零可以省略。
補充一：Emmet文法
http://docs.emmet.io/cheat-sheet/
補充二：網頁效能最佳化css壓縮
http://tool.oschina.net/jscompress/
網頁效能測試
http://www.webpagetest.org/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
