新認識的css屬性【前端要學的真多】
- 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%就可以解決這個問題了。