CSS3 日常小结
1. pointer-events:none;
2. flex
今天看到一个牛X的CSS3属性 flex, 称为弹性盒子。 这中属性完全可以替代媒体查询啦
使用方法：
父元素使用属性display:flex; 子元素使用margin:auto; 子元素就会自动适应父元素的宽高平均分布在父元素内，并且水平、垂直居中；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{margin:0;padding:0;} body{ width:1000px; } .parent{ -webkit-display:flex; -moz-display:flex; display:flex; height:300px; border:1px solid #CCC; } .child{ width:100px; height:100px; margin:auto; } </style> </head> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </body> </html>
旧flex布局：
display: -webkit-flex-box;
-webkit-flex-box: 1;
box-pack: center;
box-align: center;
新flex布局:
display: -webkit-flex;
-webkit-flex: 1;
justify-content: center;
align-items: center;
3. em 长度单位
之前没做过手机页面，这个单位用的不太多，一直以为他的大小是根据父元素的大小定义的。今天研究了下，就记了下来。
3.1 任何浏览器body默认的字体大小是16像素，所以页面在没有设置字体大小的情况下，如果设置其大小为1em,那么它的大小就是16px;
3.2 而手机页面由于本身视口较小，字体也就小了许多，12px的字体就差不多了。这里是换算公式：
1em = 16px; 1px= 0.0625em; 那么12px = 0.0625*12 = 0.75em;
只要把页面的body文字大小设置为font-size:62.5% ，然后在页面内使用1em就能表示是12px大小的文字啦。
这个大小同样适用于元素的宽度、高度。
4. rem 使用详解 以HTML字体大小为基准
html{font-size: 32px;} //默认320px
//iphone6
@media （min-device-width: 375px){
html{ font-size:37.5px;}
}
@media （min-device-width: 414px){
html{ font-size:41.4px;}
}
5. 多行文字溢出隐藏
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2 ; //可显示行数
