1. 樣式調(diào)試
outline
html * {
outline: 1px solid red;
}
通過添加outline可以清楚的看到各個(gè)塊大小阎抒，便于調(diào)整樣式
outline.jpg
hover等動(dòng)態(tài)樣式
對于hover等動(dòng)態(tài)樣式調(diào)試很頭疼，以往操作都是開好F12，鼠標(biāo)移到div上去觸發(fā)hover档泽，極難調(diào)試。
進(jìn)階操作，利用styles調(diào)試器谷遂，如下：
hover.jpg
這里分享一個(gè)小技巧（動(dòng)畫效果也OK），先開啟F12開發(fā)者工具卖鲤，然后切到sources，回到頁面觸發(fā)hover，鼠標(biāo)不要挪開，按F8會(huì)發(fā)現(xiàn)進(jìn)入斷點(diǎn)了欺旧，就可以開始你的調(diào)試了，如下圖
F8.gif
2. 水平居中、垂直居中
水平居中：
（1）text-align: center;
（2）margin: 0 auto;
垂直居中：
（1）推薦使用這種
div{
display: flex;
justify-content: center;
align-items: center;
}
（2）利用position+transform
div{
position: relative;
>div{
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
}
3. 省略號(hào)（左右）
（1）右省略
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: 120px;
(2)左省略
/* 讓省略符顯示在文本左側(cè) */
direction: rtl;
