css综合

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 标签来实现 效果范例

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