一、内容过多出现省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
二、纯三角形
border- 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- 1060px) {
#primary { 67%; }
#secondary { 30%; margin-left:3%;}
}
/* Tabled Portrait */
@media screen and (max- 768px) {
#primary { 100%; }
#secondary { 100%; margin:0; border:none; }
}