- pointer-events
初始值是auto，就是默认效果。
介绍下：pointer-events：none;
作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。具体一点说就是让click啊，hover啊都失效了。
作用一：让作用在元素上的事件全部消失
作用二：让浮在某一层上的div直接透明化 就可以直接作用到下层元素。（比如在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的 div 或者其它元素一般都会给个宽高，或者 relative 的元素可以不给宽高，这个时候，这些元素就会盖住下面的地图层，以至于地图层无法操作。那么我们就可以给这个 div 设置 pointer-events: none，然后你就会发现下面的地图就可以拖动和点击了。但是悲剧的是，操作区域本身却无法操作了，直接被无视掉了，不过不用担心，我们可以给里面的元素重新设置为 pointer-events:auto，当然，只给需要操作的元素区域设置。）
更具体的参考mdn上的：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
- user-select
意思是控制网页上的文字能不能被选中。
为了兼容性可以设置这三种
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-moz代表firefox浏览器私有属性
-ms代表ie浏览器私有属性
-webkit代表safari、chrome私有属性
作用一有些地方的文字双击就会被选中，特别丑，一点也不美观。
作用二满足文字不可以被选中或复制的需求。
更具体的参考mdn上的：https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select
- box-sizing
（不会用这个被嘲笑了）
使用box-sizing:border-box;可以完全解决有设置的padding和margin时候，并且设置width：100%的时候撑出页面去好嘛！特别好用。
box-sizing:content-box 默认值 就平常一样的效果。
box-sizing:border-box;设置宽度的时候 是包括的了padding和margin的
下图可以直观看到区别
更具体的参考mdn上的：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
- white-space
这个小属性可是拯救了我的布局。。前段时间在布微信公众号里一个很简单的页面的时候，在某些手机上一行内文字掉下去了，明明给了很大的宽度，那个宽度并没有生效，甚至在荣耀9i里最右边的文字都撑出了页面。
当时的小米6显示效果：
类似这样把（我可真是个手残），页面采用的flex布局，中间的输入框是设置的flex:1，左边的框设置了很大的宽度（我确定宽度是要比字的宽度大的，而且大挺多的），在有些手机上又是正常的（吐血）。然后在我去掉两边的margin之后，div的宽度正常了，纳尼。。。现在我也没找到原因。。我就用了white-space：nowrap 不换行，嗯，左边是可以了把，再设置了一个padding-right 让他跟设计图上一样。还有一个荣耀9i 他的验证码三个字完全不在页面内，页面都出横向滚动条了，，，好把，，把外面整个div设置成相对定位，设置max-width:100%,验证码那个div设置成绝对定位。并且好吧，终于正常了。迂回解决，但是宽度为什么会失效啊摔！(′д｀ )…彡…彡
对了，使用text-overflow和white-space属性来使文本在一行内显示，超出则加省略号效果很好哦。
p{width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}- max-width
这个其实没什么好讲的，就最大宽度嘛，就是在应用里的时候，页面里经常会有一大块位置(比如什么什么详情这种）是为了接收后端传来的html的，那里面的文字还好。图片可以用
img{max-width:100%；margin:0 auto}
特别好用。
---------
tip:在div里自带的那一点间隙会在页面垂直居中的时候不太对齐，设置div的height和line-height都是100%就可以解决这个问题了。