CSS综合

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实现居中

作业3

代码作业