1. CSS的全稱是什么?
CSS（CasCading Style Sheet）全稱層疊樣式表。
2. CSS有幾種引入方式? link 和@import 有什么區別?
- 內聯樣式
<p style="border: 1px solid red; text-align: center;">
- 內部樣式表
<style>
body {
margin: 0;
}
</style>
- 外部樣式表
<link rel="stylesheet" type="text/css" href="index.css">
// 其中type="text/css"可省略
- 導入樣式
@import url(bluish.css); //可寫在內部樣式表中，也可寫在外部樣式表中
link和@import的區別：
1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS。
2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
3. 以下這幾種文件路徑分別用在什么地方，代表什么意思?
css/a.css
相對定位，代表當前目錄下的css目錄下的a.css文件
./css/a.css
相對定位，等價于css/a.css
b.css
相對定位，代表當前目錄下的b.css文件
../imgs/a.png
相對定位， 代表當前目錄的上一級目錄下的imgs目錄下的a.png文件
/Users/hunger/project/css/a.css
絕對定位，代表本地文件夾下a.css文件地址
/static/css/a.css
網站路徑，當前服務器根目錄下的/static/css的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png
網絡路徑，通過HTTP協議獲得8-1.png圖片資源
4. 如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
①把本地圖片上傳至某網站，生成一個線上地址，然后在js.jirengu.com中加載
②在本地打開服務器，通過localhost加載這個圖片。再將圖片放在js.jirengu.com(自己測試時可這樣使用）
5. 列出5條以上html和 css 的書寫規范
html:
參考http://codeguide.bootcss.com/
- 布爾型屬性可以在聲明時不賦值。
<input type="text" disabled> - 使用 4 個空格做為一個縮進層級，不允許使用 2 個空格 或 tab 字符。
- 對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
- 不要省略可選的結束標簽
- HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
- class
- id, name
- data-*
- src, for, type, href, value
- title, alt
- role, aria-*
css:
參考https://github.com/fex-team/styleguide/blob/master/css.md
- 當一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行。
- >、+、~ 選擇器的兩邊各保留一個空格。
- 屬性選擇器中的值必須用雙引號包圍。
- [建議] 選擇器的嵌套層級應不大于 3 級，位置靠后的限定條件應盡可能精確。
- url() 函數中的路徑不加引號。
background: url(bg.png); - url() 函數中的絕對路徑可省去協議名。
background: url(//baidu.com/img/bg.png) no-repeat 0 0; - RGB顏色值必須使用十六進制記號形式 #rrggbb。不允許使用 rgb()
- 屬性書寫順序
- Formatting Model （布局方式、位置）相關屬性包括：position / top / right / bottom / left / float / display / overflow 等
- Box Model （尺寸）相關屬性包括：border / margin / padding / width / height 等
- Typographic （文本相關 ）相關屬性包括：font / line-height / text-align / word-wrap 等
- Visual （視覺效果）相關屬性包括：background / color / transition / list-style 等
6. 截圖介紹 chrome 開發者工具的功能區
chorme開發者工具面板一共包括：Elements、Console、Sources、Network、Performance、Memory、Application、Security、Audits幾個板塊（如下圖所示）
- Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋。
- Console:記錄開發者開發過程中的日志信息，且可以作為與JS進行交互的命令行Shell。
- Sources:斷點調試JS。
- Network:從發起網頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
- Performance:性能監控
- Memory:內存調試工具
-
Application:記錄網站加載的所有資源信息，包括存儲數據（Local -
Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。 - Security:判斷當前網頁是否安全。
- Audits:對當前網頁進行網絡利用情況、網頁性能方面的診斷，并給出一些優化建議。比如列出所有沒有用到的CSS文件等。
