一些不常用但又很有用的css小tips

1.box-sizing:border-box

　　box-sizing有三个属性：content-box(默认值) || border-box || inhreit。第一个自然不用说，比如我们设置一个div，宽度和高度都是100px，此时你给它加了padding:2px和border:1px solid #333,最后这个元素的总宽度是106px，这是w3c关于盒子模型的基本定义，即width和height指的是内容(content)的宽高。而border-box则是回到了ie盒子模型的旧标准，也就是说这里的width规定的是总长度（content+padding+border），虽然是旧标准，但不得不承认有时候为了方便我们去还原一些设计稿时，还是有帮助的。

 

2.user-select:none

　　这个主要是针对一些按钮的吧，至少在我做过的项目中就是这样，比如说一个按钮，你疯狂点击它，点快了有时候鼠标有滑动，那么按钮上的文字就会变成这样：

　　

　　这样就有些尴尬，像一个文本一样，给人的感觉不太好。所以要使得这些文本无法被选中，在这个按钮的css样式中添加user-select:none即可。

 

3.pointer-event:none

　　这个属性主要用在一些点击穿透的场景上，比如在一个父元素中有两个子元素，position都为absolute，其中子元素1是主体的内容，z-index:1;子元素2是一个滤镜，z-index:2。

两个子元素宽高都是100%,这时候因为这个滤镜挡在子元素1的上方。使得我们无法点击子元素1的各种内容。这时候就需要给子元素2这个滤镜元素加上pointer-event:none;使得它变成一个“幽灵元素”。鼠标点击可以轻易地穿透它的身体，从而点击到被它挡在身后的子元素1。