2016-03前端开发总结

一、内容过多出现省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

二、纯三角形

border-width: 3px;
border-style: solid dashed dashed;
border-color: #bbb transparent transparent;

三、元素垂直居中

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
-webkit-box-align: center;
-webkit-box-pack: center;

四、display:inline-block 4px间距问题

父级：
letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -4px;
font-size: 0;

当前元素：

font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
*zoom:1;

五、响应式（未完待续）

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}