编码规范+垂直居中

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

HTML篇

• ** 用两个空格来代替制表符（tab） **

这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合元素的尾部添加斜线,不要省略可选的结束标签（例如， 或 ）。

• 属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

• 减少标签的数量
  编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：

CSS篇

语法
用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

注释
代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。
对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。

class 命名
class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。class 名称应当尽可能短，并且意义明确。

编辑器配置
将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：
用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。
保存文件时，删除尾部的空白符。
设置文件编码为 UTF-8。
在文件结尾添加一个空白行。

参考

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

• 行内元素文本居中

• 绝对定位实现居中
  原理:设置盒模型的绝对定位,left:-50%,top:50%;
  设置margin-top:-(盒模型高度一半),margin-left:-(盒模型高度一半)

• vertical-align实现居中
  原理:

.wrap:before{
  content:'';
  display:inline-block;
  height:100%;
  vertical-align :middle;
}

• table-cell实现居中

重点:
text-align:center;
  display:table-cell;
  vertical-align:middle;

3.

利用边框做尖角的练习

实心半三角
.box2 {
  position: relative;
  margin-top: 30px;
  border: 1px solid #ccc; 
  width: 250px;
  height: 100px;
}

.box2:before {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-top: 10px solid green;
  border-right: 10px solid red;
  right: -1px;
  top: -1px;
}


空心金字塔行的三角
.box3 {
  position: relative;
  margin-top:30px;
  border:1px solid #ccc;
  height:100px;
  width:250px;
}
.box3:before {
  content: '';
  position: absolute;
  top:-9px;
  left:15px;
  transform:rotateZ(45deg);
  
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  width: 15px;
  height: 15px;
  background: #fff;
}

伪元素**必须**和content搭配.