编码规范、居中
2017-03-14 本文已影响0人
ychenxi
编码规范
- class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。
- 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。如：
推荐：<div class="text-lesser"></div>
不推荐： <div class="light-grey"></div>
- 标签语义化
<article>
<h1>编码规范</h1>
<p>今天讲的内容是编码规范，讲师
<b>若愚</b> @饥人谷</p>
</article>
- 用两个空格来代替制表符（tab）。
- 为选择器分组时，将单独的选择器单独放在一行。
- 为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。
- 每条声明语句的 : 后应该插入一个空格。
-
参考：
- bootstrap 编码规范
- google html css编码规范
- 命名这货真难
居中
- 上下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; 当宽度和高度固定的时候宽度和高度的一半*/
transform: translate(-50%,-50%);
width: 400px;
height: 300px;
http://js.jirengu.com/waquyokaci/1/edit
- 表格法实现居中：
display: table-cell;
display: table-cell;
vertical-align: middle;
http://js.jirengu.com/nape/1/edit?html,css,output
- 行内元素居中：
vertical-align: middle;
http://js.jirengu.com/vetutacuwo/1/edit
