2016-03前端開發總結

1、內容過多出現省略號

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

2、純三角形

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

3、元素垂直居中

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;

4、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;

5、響應式（未完待續）

<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; }}