vip10-1220作业

问题1:平时的编码规范


  • CSS书写顺序
    1.位置属性(position, top, right, z-index, display, float等)
    2.大小(width, height, padding, margin)
    3.文字系列(font, line-height, letter-spacing, color- text-align等)
    4.背景(background, border等)
    5.其他(animation, transition等)
  • 语法规范
    1.用两个空格来代替制表符(tab)。
    2.为选择器分组时,将单独的选择器单独放在一行。
    3.为了代码的易读性,在每个声明块的左花括号前添加一个空格
    4.声明块的右花括号应当单独成行。
    5.对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格。

问题2:垂直居中有几种实现方式,给出代码范例


  • line-height方法

适合单行文字的垂直居中,只需要将包含文字元素的容器行高设置为大于字体大小并且等于元素的高度

vip10-1220作业_第1张图片
Paste_Image.png

img图片也可以用 line-height垂直居中
包含图片的父元素设置 line-height,img设为 verticla-align: middle
vip10-1220作业_第2张图片
Paste_Image.png

  • vertical-aligh方法
    vertical-align:middle这个属性是对table元素垂直居中起作用。他只对table-cell和行内元素起作用,vertical-aligh的值相对于其父元素。也就是说父元素也必须是行内元素。
    vip10-1220作业_第3张图片
    Paste_Image.png

同样还有将父元素转化为table属性结合上文实现垂直居中

vip10-1220作业_第4张图片
Paste_Image.png
  • 绝对定位

父容器宽高不固定,子元素需要在父亲内容绝对居中的时候,可以用绝对定位+负边框。


vip10-1220作业_第5张图片
Paste_Image.png
  • padding方法
    设置上下padding相等实现垂直居中,但是父容器不能设置高度
    vip10-1220作业_第6张图片
    Paste_Image.png

问题3

待补充

你可能感兴趣的:(vip10-1220作业)