編碼規(guī)范
- class 名稱中只能出現(xiàn)小寫字符和破折號(dashe)(不是下劃線咙好,也不是駝峰命名法)篡腌。
- 使用有意義的名稱。使用有組織的或目的明確的名稱勾效,不要使用表現(xiàn)形式(presentational)的名稱嘹悼。如:
推薦:<div class="text-lesser"></div>
不推薦: <div class="light-grey"></div>
- 標(biāo)簽語義化
<article>
<h1>編碼規(guī)范</h1>
<p>今天講的內(nèi)容是編碼規(guī)范,講師
<b>若愚</b> @饑人谷</p>
</article>
- 用兩個空格來代替制表符(tab)层宫。
- 為選擇器分組時杨伙,將單獨的選擇器單獨放在一行。
- 為了代碼的易讀性萌腿,在每個聲明塊的左花括號前添加一個空格限匣。聲明塊的右花括號應(yīng)當(dāng)單獨成行。
- 每條聲明語句的 : 后應(yīng)該插入一個空格毁菱。
-
參考:
- bootstrap 編碼規(guī)范
- google html css編碼規(guī)范
- 命名這貨真難
居中
- 上下padding相等:
.ct {
padding: 40px 0;
text-align: center;
background: #eee;
border: 1px solid red;
}
http://js.jirengu.com/xiyetevone/1/edit
- 絕對定位的元素居中:
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -200px;
margin-top: -150px; 當(dāng)寬度和高度固定的時候?qū)挾群透叨鹊囊话?/
transform: translate(-50%,-50%);
width: 400px;
height: 300px;
http://js.jirengu.com/waquyokaci/1/edit
- 表格法實現(xiàn)居中:
display: table-cell;
display: table-cell;
vertical-align: middle;
http://js.jirengu.com/nape/1/edit?html,css,output
- 行內(nèi)元素居中:
vertical-align: middle;
http://js.jirengu.com/vetutacuwo/1/edit