- 說(shuō)一說(shuō)你平時(shí)寫(xiě)代碼遵守的編碼規(guī)范
常見(jiàn)的編碼規(guī)范
語(yǔ)義化：
1.語(yǔ)義化標(biāo)簽優(yōu)先
2.基于功能命名卡骂、基于內(nèi)容命名崔慧、基于表現(xiàn)命名
3.簡(jiǎn)略狠半、明了、無(wú)后患
命名規(guī)范：
1.所有命名都使用英文小寫(xiě)
2.命名用引號(hào)包裹
3.用中橫線“-”連接
4.命名體現(xiàn)功能弃甥，不涉及表現(xiàn)樣式（顏色爽室、字體、邊框淆攻、背景等）
書(shū)寫(xiě)規(guī)范：
1.tab 用兩個(gè)空格表示
2.css的 :后加個(gè)空格阔墩， {前加個(gè)空格
3.每條聲明后都加上分號(hào)
4.換行，而不是放到一行
5.顏色用小寫(xiě)瓶珊，用縮寫(xiě), #fff
6.小數(shù)不用寫(xiě)前綴, 0.5s -> .5s啸箫；0不用加單位
7.盡量縮寫(xiě)， margin: 5px 10px 5px 10px -> margin: 5px 10px
8.定義相同css屬性的選擇器逗號(hào)隔開(kāi)伞芹，縱向排列
9.每每相鄰選擇器之間空一行
10.HTML 屬性應(yīng)當(dāng)按照以下給出的順序（class>id,name>data->src,for,type,href,value>title,alt>role,aria-）依次排列忘苛，確保代碼的易讀性。
11.相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組唱较，并按照下面的順序排列：
positioning: position top right bottom left z-index
box model: display float width height
typographic: font line-height color txet-align
visual: background-color border border-radius
misc: opacity
12.不要使用@import
13.不要濫用簡(jiǎn)寫(xiě)扎唾，例如background-color：red中color不要簡(jiǎn)寫(xiě)
我遵守的編碼規(guī)范
語(yǔ)義化
1.所有命名都使用英文小寫(xiě)
2.用中橫線“-”連接
3.命名體現(xiàn)功能，不涉及表現(xiàn)樣式（顏色南缓、字體胸遇、邊框、背景等）
書(shū)寫(xiě)規(guī)范
1.tab 用兩個(gè)空格表示
2.css的 :后加個(gè)空格汉形， {前加個(gè)空格
3.每條聲明后都加上分號(hào)
4.換行纸镊，而不是放到一行
5.顏色用小寫(xiě)，用縮寫(xiě), #fff
6.盡量縮寫(xiě)概疆， margin: 5px 10px 5px 10px -> margin: 5px 10px
常見(jiàn)命名：
1 .wrap或.wrapper -- 用于外側(cè)包裹
2 .container或 .ct -- 包裹容器
3 .header -- 用于頭部
4 .body -- 頁(yè)面 body
5 .footer -- 頁(yè)面尾部
6 aside逗威、sidebar -- 用于側(cè)邊欄
7 .content -- 和header footer 對(duì)應(yīng)，用于主要內(nèi)容
8 .navigation -- 導(dǎo)航元素
9 .pagination -- 分頁(yè)
10 .tabs > .tab -- tab 切換
11 .breadcrumbs -- 導(dǎo)航列表岔冀、面包屑
12 .dropdown -- 下拉菜單
13 .article -- 文章
14 .main -- 用于主體
15 .thumbnail -- 頭像庵楷，小圖像
16 .media -- 媒體資源
17 .panel -- 面板
18 .tooltip -- 鼠標(biāo)放置上去的提示
19 .popup -- 鼠標(biāo)點(diǎn)擊彈出的提示
20 .button、.btn -- 按鈕
21 .ad -- 廣告
22 .subnav -- 二級(jí)導(dǎo)航
23 .menu -- 菜單
24 .tag -- 標(biāo)簽
25 .message或者.notice -- 提示消息
26 .summary -- 摘要
27 .logo -- logo
28 .search -- 搜索框
29 .login -- 登錄
30 .register -- 注冊(cè)
31 .username -- 用戶名
32 .password -- 密碼
33 .banner -- 廣告條
34 .copyright -- 版權(quán)
35 .modal或者 .dialog -- 彈窗
- 垂直居中有幾種實(shí)現(xiàn)方式，給出代碼范例
塊級(jí)元素的垂直居中
行內(nèi)元素的垂直居中
用塊級(jí)元素對(duì)行內(nèi)元素包垂直居中
用vertical-align設(shè)置元素的垂直對(duì)齊方式：鏈接
用table-cell設(shè)置垂直居中 - 實(shí)現(xiàn)如下效果尽纽，每種效果都只使用一個(gè)html 標(biāo)簽來(lái)實(shí)現(xiàn)
鏈接
