编码规范与垂直居中

1. 编码规范

• 命名规范

1. 命名时遵从语义化原则

• 语义化标签优先
• 基于功能命名、基于内容命名
• 命名尽量简略、明了

2. 命名时需要养成良好习惯

• 所有命名都使用英文小写
• 命名用引号包裹
• 命名时不是一个既有单词用中横线连接
• 命名尽量体现出元素的功能，不涉及到表现样式

3. 借鉴根据业界经验总结得出的常见命名

• CSS规范

  • tab用两个空格表示（不是四个空格）
  • CSS的:后面加个空格，{前面加个空格
  • 每条声明都加上分号
  • 换行，而不是放到一行，这样方便查看和修改
  • 颜色用小写，尽量用缩写，比如白色#ffffff应该写成fff
  • 小数不用前缀，比如0.5s应该写成.5s，且0不用加单位
  • 尽量缩写：比如padding: 10px 20px 10px 20px;应该写成padding: 10px 20px;
  • 遵循PBTV原则：A. Positioning（位置相关）B. Box Model（盒模型）C. Typographic（文字相关）D. Visual（视觉相关）

• 总结
  命名的确挺难，想出一个合适的名字有挑战性，我认为应该记住或者熟悉一些通用的常见命名，然后努力要求自己遵守以上规范，最好是写完代码后认真检查，长久以来就可以形成自己的习惯和手感，以后的代码在这样的严格要求下会有更强的可读性、也便于修改维护，更加方便团队协作，让大家一起写的代码看起来像一个人写的一样。

2. 垂直居中的实现方式

• 方法1：设置上下padding相等

设置上下padding相等

适用场景：外层容器不设定高度，其高度被内部的内容自动撑开

• 方法2：绝对定位，搭配margin-left与margin-top，其值分别为负的width/2，负的height/2

绝对定位加margin

适用场景：外层容器宽高固定，尤其适合于“弹窗”效果

• 方法3：使用vertical-align

vertical-align: middle

原理：由于vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐，因此可以在固定宽高的父容器之前加上一个内容为空的inline-block，让它宽度与父容器宽度保持一致，这样目标元素的基线就能相对这个inline-block基线垂直对齐。

• 方法4：使用display: table-cell

display: table-cell

原理：display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。但是存在兼容性问题，IE6&7不支持这一属性。