HTML、CSS的一些编码规范
- HTML：
- 用两个空格表示缩进。
- 嵌套元素应当缩进一次。
- 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
- 不要省略结束标签。
- 引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
- 编写 HTML 代码时，尽量避免多余的父元素。
- HTML 属性应当先写class和id。
- 布尔型属性可以在声明时不赋值。
- 通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
- CSS：
- 每个声明块的左花括号前添加一个空格。
- 声明块的右花括号应当单独成行。
- 每条声明语句的 : 后应该插入一个空格。
- 每条声明都应该独占一行。
- 所有声明语句都应当以分号结尾。
- 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格。
- 对于属性值或颜色参数，省略小于 1 的小数前面的 0。
- 十六进制值应该全部小写，例如，#fff。
- 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
- 为选择器中的属性添加双引号，例如，input[type="text"]。
- 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
- 相关的属性声明应当归为一组，并按照下面的顺序排列：1.定位相关 2.盒模型相关 3.文字属性相关 4.外观相关 5.其它
- 不要使用 @import：与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。
- 将媒体查询放在尽可能相关规则的附近。
- 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
- 对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。
- class 名称中只能出现小写字符和破折号.
- class命名避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
- class 名称应当尽可能短，并且意义明确。
- class命名要使用有意义的名称。如：表示功能，表示内容；不要使用表示外观的名称。
- 选择器要尽可能短，长度尽量不要超过 3 。
垂直居中的7种实现方式
1.对于父元素不定高：
直接使父元素上下padding相等
2.绝对定位，确定宽高
.parent {position: relative;}
.child {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
}
3.绝对定位，不确定宽高
.parent {position: relative;}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
4.利用伪元素使inline-block居中
.parent {
width: 300px;
height: 300px;
text-align: center;
}
.parent::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child {
vertical-align: middle;
}
5.table-cell使inline-block居中
.parent{
width: 300px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
6.拔河效应
.parent {position: relative;}
.child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
7.flex
.parent {
display: flex;
align-items: center;
justify-content: center;
}
实现如下效果，每种效果都只使用一个html 标签来实现 效果范例
