无标题文章

2017-03-24 本文已影响0人湖衣

1.说一说你平时写代码遵守的编码规范。
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*

CSS语法：

用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow
）。
不要在 rgb()、rgba()、hsl()、hsla()或 rect()值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

声明顺序：
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual

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

  padding: 40px 0;/*上下padding相等*/
  text-align: center;
  background: #eee;
}```

绝对定位实现居中：
```.dialog {
  position: absolute;
  left: 50%;/*父容器的50%*/
  top: 50%;
  margin-left: -200px;/*为宽度的一半*/
  margin-top: -150px;/*为高度的一半*/
  
  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 3px #000;
}```

```.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);/*transform属性在低版本浏览器无法使用*/
  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 3px #000;
}```

vertical-align实现居中：
```.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  text-align: center;
}

.box:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;/*作用于行内元素和表格*/
}
.box img{
  vertical-align: middle;
  background: blue;
}```

table-cell实现居中:
.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  display: table-cell;/*改变了dispaly的展现方式*/
  vertical-align: middle;
  text-align: center;
}


3.实现如下效果，每种效果都只使用一个html 标签来实现。
[](http://js.jirengu.com/judomuyoqa)

无标题文章

猜你喜欢

热点阅读