编码规范

[yongheng2016]

命名规范

• 语义化：

  • 1. 语义化标签优先
  • 2. 基于功能命名、基于表现命名，尽量不要不要通过外观命名
  • 3. 简略、明了、无后患

书写规范

• tab 用两个空格表示
• css的 :后加个空格， {前加个空格
• 每条声明后都加上分号
• 换行，而不是放到一行
• 颜色用小写，用缩写, #fff
• 小数不用写前缀, 0.5s -> .5s；0不用加单位
• 尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px

垂直居中：

• 可变内容居中（上下padding相等）

网页中有一部分内容大小可变的垂直居中，直接用上下padding相等即可；

代码： http://js.jirengu.com/rudut/1/edit?html,css,output

• 行内元素居中（line-height）

  • tip:注意line-height只能写在块级元素內，作用于行内元素

当网页中有一部分不易变动的简短的内容需要居中，且其父元素有固定height；可以用line-height，但只适用于单行内容。

代码： http://js.jirengu.com/vupuw/1/edit?html,css,output

• 根据基线居中（vertical-align）

文字、图片还有？都存在基线的概念，通过基线可以使这些元素达到垂直居中的效果。

代码： http://js.jirengu.com/zifi/1/edit?html,css,output

• 绝对垂直居中（position、translate或margin）

  • tip: translate: 50%是自身容器的 border+padding+content

但父元素宽高都固定的时候，子元素可以设置相对于父元素的绝对定位，设置水平竖直绝对居中；

代码： http://js.jirengu.com/yayem/3/edit

---

效果代码：

http://js.jirengu.com/veyov/1/edit?html,css,output

http://js.jirengu.com/ticuf/1/edit?html,css,output

http://js.jirengu.com/vivez/1/edit?html,css,output