美文网首页
聊一聊代码规范, 垂直居中和伪类伪元素

聊一聊代码规范, 垂直居中和伪类伪元素

作者: 饥人谷_鸭脖 | 来源:发表于2017-10-25 07:31 被阅读0次
  1. 说一说你平时写代码遵守的编码规范.
  • 命名规范
    (1)都用英文小写
    (2)用引号包裹
    (3)用中横线连接
    (4)体现功能, 不涉及表现样式.

  • css规范
    (1)tab用两个空格表示
    (2)css的:后加个空格, {前加个空格
    (3)每条声明后都加分号
    (4)换行, 而不是放到一行
    (5)颜色用小写, 用缩写
    (6)小数不用写前缀, 0.5s->.5s, 0不用加单位
    (7)尽量缩写.

  1. 垂直居中有几种实现方式,给出代码范例

方法一.
padding-top, padding-bottom相同
适用于父元素没有固定宽高的居中, 父元素的宽高靠内容撑开.
实例:
代码

方法二.
绝对定位 + 负margin(或者transfrom)
实例:
代码

方法三.
vertical-align: middle + 伪元素
适用于父容器有固定的宽高.
实例:
代码

方法四.
line-height + vertical-align: middle
实例:
代码

方法五.
display: table-cell + vertical-align: middle
实例:
代码

  1. 实现如下效果,每种效果都只使用一个html 标签来实现

代码

相关文章

网友评论

      本文标题:聊一聊代码规范, 垂直居中和伪类伪元素

      本文链接:https://www.haomeiwen.com/subject/jdvfpxtx.html