任务13-CSS综合

1、说一说你平时写代码遵守的编码规范

我平时一般遵守如下规范：
1、所有命名都使用英文小写
2、命名用引号包裹
3、每条声明后都加上分号
4、换行，而不是放到一行
5、颜色用小写，用缩写, #fff
6、0不用加单位
7、尽量缩写

2、垂直居中有几种实现方式，给出代码范例

有三种方法：
1、绝对定位：
在块元素上添加绝对定位属性和负margin,如果不是块元素可以转换成inline-block。记得在父元素上添加相对定位属性-如果你不是想在整个html视口垂直居中的话。这种方法比较麻烦，适用于登录弹窗等情况。

  
  

  

  

    我是文字
    
  

比如优酷网的这个登录窗，其它区域还有一个透明蒙板效果。

Paste_Image.png

2、使用vertical-align:middle;
使用vertical-align:middle;有两种情况：
一是在父元素上配合table-cell使用，父元素内的所有元素都会整体垂直居中，无论子元素是block元素，还是inline元素。同时配合 text-align: center;inline和inline-block元素还可实现水平居中。

 
 

 

 

   
   
我是块元素我不受text-align控制
   我是行内元素
 

第二种情况是，子元素之间的垂直居中对齐。
如果只有一个对象，想让它在父元素中对齐，可以添加一个空的比较对象

father:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

如果有多个对象，可以给它们都添加vertical-align:middle,从而实现子元素之间的垂直对齐。
另外：给一行内文字设置行高与父元素高相等，可以实现一行文字的垂直居中。

3、实现如下效果，每种效果都只使用一个html 标签来实现 效果范例

http://js.jirengu.com/zutoxitiga/2/