CSS综合
2017-08-24 本文已影响0人
marmot_ning
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实现居中
