移动端（ H5 小程序）CSS 要点总结 ——持续更新

经常遇到坑…在W3C上学习了一段时间了，但是实际遇到的时候，细节多多。一一记录下来，温故而知新。

1. CSS 截断字符串；

{
    /*指定字符串的宽度*/
    width:300px;   
    overflow: hidden;  
    /* 当字符串超过规定长度，显示省略符*/ 
    text-overflow:ellipsis;  
    white-space: nowrap; 
}

2. box-sizing （顾名思义，盒模型对元素高宽的计算方式）使用时应注意

content-box， 默认值，标准盒模型。 width 与 height 只包括内容的宽和高， 不包括边框，内边距，外边距。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px; 
padding-box， width 与 height 包括内边距，不包括边框与外边距。 
border-box， width 与 height 包括内边距与边框，不包括外边距。这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

3. 元素定位 Position

详细请戳这篇文章：【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

中间有说到 float:left or right 的部分；

但是 float 又和 display: inline-block 很像，所以有什么区别的，请戳 css之display:inline-block布局