task13编码规范、垂直居中

1、说一说你平时写代码遵守的编码规范。

编码规范主要在命名技巧和CSS规范两个方面
（1）命名技巧
语义化：选择合适的标签和命名

• 如何选择标签：语义化标签优先；
• 如何命名，基于功能命名、基于内容命名、基于表现命名（不好、不用）；

命名用英文小写，用引号包裹
用中横线连接-
命名体现功能，不涉及表现样式（颜色、字体、边框、背景等）
常见命名

Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png

（2）CSS规范

Paste_Image.png

参考规范：http://codeguide.bootcss.com/

2、垂直居中有几种实现方式，给出代码范例

（1）块级元素，上下padding相同
居中参考点： 父容器上下边框距离。
（2）绝对定位居中
absolute+margin
absolute+transform
参考点： 父容器起始点（左上角坐标原点）.
（3）对于行内元素、表格，vertical-align: middle实现居中
参考点：两个行内元素，互为参考，若行内元素1设置了vertical-align: middle，则以行内元素1的middle为参考点，元素2的基线（底部）会与元素1的middle位置对齐。若量元素均设置vertical-align: middle，则它们的中线对齐。通过设置高度来实现垂直居中。

Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png
（4）使用table-cell实现居中
父容器display: table-cell；vertical-align: middle；

3、每种效果都只使用一个html 标签来实现。

demo