CSS综合
说一说你平时写代码遵守的编码规范
- 缩进:使用 2个空格做为一个缩进层级,不使用 tab 字符
- 空格:选择器 与 { 之间必须包含空格;属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格;列表型属性值 书写在单行时,, 后必须跟一个空格
- 属性选择器中的值必须用双引号包围
- 属性定义后必须以分号结尾
- 在可以使用缩写的情况下,尽量使用属性缩写;使用 border / margin / padding 等缩写时,应注意隐含值对实际数值的影响,确实需要设置多个方向的值时才使用缩写
- 同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性
- 当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式
- 文本内容必须用双引号包围
更多参考
垂直居中有几种实现方式,给出代码范例
- table自带的垂直居中的效果
使用table实现居中的demo - 使用两个空元素(可使用before和after)设置vertical-align: middle;和display: inline-block;将需要居中的元素拉起来
使用before和after实现垂直居中 - 使用DIV里面包裹一个table实现居中
使用DIV包裹table实现垂直居中 - 使用绝对定位和负margin来实现居中
使用绝对定位实现居中 - 使用translate实现居中
translate实现居中 - 使用绝对定位+margin: auto;实现居中
绝对定位+margin: auto;实现 - 使用flex实现居中
flex实现居中