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

摘要： 1.box-sizing:border-box box-sizing有三個屬性：content-box(預設值) || border-box || inhreit。第一個自然不用說，比如我們設定一個div，寬度和高度都是100px，此時你給它加了padding:2px和border:1px...

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。