task13 css综合

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

一个网页可能是由多个人员合作完成的，开发人员所用的编辑器可能不一样。使用统一的编码规范是为了方便团队中的其他人轻松的看懂你的代码。

几个自己需要注意的编码规范：
尽量减少无意义的标签
margin，padding的简写。margin:0 3px;
相关的属性排列顺序：位置，盒模型，文字效果，视觉效果
link和@import中最好用link，因为link会减少请求次数
单行声明放一行，多行声明则占用多行
为了提高可读性，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格。

.element {
  margin: 10px 0 (@variable * 2) 10px;
}

对于经常出现的组件，避免使用属性选择器[class=" "],应该直接在需要此类css的标签上直接添加类名。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
class名称遵循：功能，内容优先，显示效果其次的顺序

其他规范参考
google html css编码规范
编码规范
class取名

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

单行文本居中:line-height=height

  
hello

多行文本居中 （div不设置高度，由内容撑开）

  
hello
  
hello
  
hello

页面中div水平居中

  div {
    width:50px;
    height: 50px;
    margin: 0 auto;
    background: yellow;  
  }

  

绝对定位水平垂直居中

 html,body{height: 100%;}
  .content {
    position: absolute;
    left: 50%;     
    top: 50%;                  或者transform: translate(50%, 50%)
    margin-left: -100px;   自身宽度一半
    margin-top: -75px;     自身高度一半
    width: 200px;
    height: 150px;
    background: yellow;
  }

  

vertical-align实现居中

 .wrap{
   width:500px;
   height: 500px;
   border:1px solid red;
   text-align: center;
 }
  .wrap:before{               添加伪类后图片垂直居中
    content:'';
    display:inline-block;
    height: 100%;
    vertical-align: middle;         
  }
  img{
   vertical-align: middle;       针对行内元素
  }

  

    ![](http://upload-images.jianshu.io/upload_images/5804931-29365cb3ba83fcb1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

display: table-cell实现居中

.wrap{
  width: 300px;
  height: 200px;
  border: 1px solid  red;
  display: table-cell;          
  vertical-align: middle;     垂直居中
  text-align: center;           水平居中
}

 

    ![](http://upload-images.jianshu.io/upload_images/5804931-29365cb3ba83fcb1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

代码：
灰角对话框
红角
普通对话框其中display:inline-block的作用是使多个对话框同行排列