“工欲善其事，必先利其器”，Chrome瀏覽器不僅可以調(diào)試頁面、JS、請求、資源、cookie，還可以模擬手機進行調(diào)試。我們現(xiàn)在只是使用html和css，我們先講一下現(xiàn)在常用的調(diào)試。
1. 怎樣使用Chrome調(diào)試工具？
直接在頁面上點擊右鍵，然后選擇“檢查”快捷鍵 F12 或者 ctrl+shift+i。
基本的結(jié)構(gòu)布局是左邊 html 右邊是 css。
小技巧：
- 上圖的小指針按鈕選中之后，鼠標點擊頁面上的元素，下面會自動跳到對應(yīng)的 html 代碼
- 小指針按鈕右邊的圖示是用來進行桌面和手機效果切換的
- ctrl+滾輪 可以放大開發(fā)者工具代碼大小，ctrl + 0 復(fù)原瀏覽器大小
- 右邊CSS樣式可以改動數(shù)值和顏色查看更改后效果
Chrome調(diào)試數(shù)值
可以鼠標點擊后面的數(shù)值，按上箭頭是調(diào)大數(shù)值，下箭頭是調(diào)小數(shù)值。
快速定位css所在行數(shù)
2. Chrome提示的常見布局錯誤
① css單詞書寫錯誤提示
點擊下圖所示的黑色箭頭，點擊我們需要的 html 元素，查看css單詞是否拼寫錯了。
② css無顯示
css文件引入不對或者這個樣式的前面多余了一些符號影響。
③ html 結(jié)構(gòu)不匹配
左側(cè)，展開可以看到 html 標簽是否匹配。
④ 通過顏色判斷盒子
藍色是盒子的寬度高度，青色是內(nèi)邊距，橙色是外邊距，通過這個很方便的看到盒子給的范圍。
⑤ 看看你有如下錯誤嗎？
3. CSS書寫規(guī)范
開始就形成良好的書寫規(guī)范，是你專業(yè)化的開始。
① 空格規(guī)范
- 【強制】 選擇器 與 { 之間必須包含空格。
示例： .selector { }
- 【強制】 屬性名 與之后的 : 之間不允許包含空格，: 與屬性值之間必須包含空格。
示例：font-size: 12px;
② 選擇器規(guī)范
- 【強制】 并集選擇器，每個選擇器聲明必須獨占一行。
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
- 【建議】 選擇器的嵌套層級應(yīng)不大于 3 級，位置靠后的限定條件應(yīng)盡可能精確。
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
③ 屬性規(guī)范
- 【強制】 屬性定義必須另起一行。
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
- 【強制】 屬性定義后必須以分號結(jié)尾。
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
4. VSCode快捷操作
使用VSCode的快捷操作可以提高 html/css 的編寫速度。
- 生成標簽，直接輸入標簽名按tab鍵即可，比如 div 然后 tab 鍵，就可以生成
<div></div> - 如果想要生成多個相同標簽，加上 * 就可以了 比如 div*3，就可以快速生成3個div
- 如果有父子級關(guān)系的標簽，可以用 >，比如 ul > li 就可以了
- 如果有兄弟關(guān)系的標簽，用 + 就可以了，比如 div+p
- 如果生成帶有類名或者id名字的，直接寫 .demo 或者 #two，然后 tab 鍵就可以了
- 如果生成的 div 類名是有順序的，可以用自增符號 $ ，比如：
.demo$*3
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
