資訊專欄INFORMATION COLUMN
摘要：第一個自然不用說，比如我們設(shè)置一個，寬度和高度都是，此時你給它加了和最后這個元素的總寬度是，這是關(guān)于盒子模型的基本定義，即和指的是內(nèi)容的寬高。所以要使得這些文本無法被選中，在這個按鈕的樣式中添加即可。
1.box-sizing:border-box
box-sizing有三個屬性：content-box(默認值) || border-box || inhreit。第一個自然不用說，比如我們設(shè)置一個div，寬度和高度都是100px，此時你給它加了padding:2px和border:1px solid #333,最后這個元素的總寬度是106px，這是W3C關(guān)于盒子模型的基本定義，即width和height指的是內(nèi)容(content)的寬高。而border-box則是回到了IE盒子模型的舊標準，也就是說這里的width規(guī)定的是總長度（content+padding+border），雖然是舊標準，但不得不承認有時候為了方便我們?nèi)ミ€原一些設(shè)計稿時，還是有幫助的。
?
2.user-select:none
這個主要是針對一些按鈕的吧，至少在我做過的項目中就是這樣，比如說一個按鈕，你瘋狂點擊它，點快了有時候鼠標有滑動，那么按鈕上的文字就會變成這樣：
這樣就有些尷尬，像一個文本一樣，給人的感覺不太好。所以要使得這些文本無法被選中，在這個按鈕的css樣式中添加user-select:none即可。
?
3.pointer-event:none
這個屬性主要用在一些點擊穿透的場景上，比如在一個父元素中有兩個子元素，position都為absolute，其中子元素1是主體的內(nèi)容，z-index:1;子元素2是一個濾鏡，z-index:2。
兩個子元素寬高都是100%,這時候因為這個濾鏡擋在子元素1的上方。使得我們無法點擊子元素1的各種內(nèi)容。這時候就需要給子元素2這個濾鏡元素加上pointer-event:none;使得它變成一個“幽靈元素”。鼠標點擊可以輕易地穿透它的身體，從而點擊到被它擋在身后的子元素1。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1683.html
摘要：收藏優(yōu)秀組件庫合集前端掘金開源的優(yōu)秀組件庫合集教你如何在應(yīng)用程序中使用本地文件上傳圖片前端掘金使用在中添加到的，現(xiàn)在可以讓內(nèi)容要求用戶選擇本地文件，然后讀取這些文件的內(nèi)容。 『收藏』VUE 優(yōu)秀 UI 組件庫合集 - 前端 - 掘金github 開源的 Vue 優(yōu)秀 UI 組件庫合集?... 教你如何在 web 應(yīng)用程序中使用本地文件?上傳圖片file? - 前端 - 掘金使用在HTM...
摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
閱讀 1954·2021-11-22 14:44
閱讀 1683·2021-11-02 14:46
閱讀 3678·2021-10-13 09:40
閱讀 2611·2021-09-07 09:58
閱讀 1642·2021-09-03 10:28
閱讀 1672·2019-08-29 15:30
閱讀 991·2019-08-29 15:28
閱讀 1482·2019-08-26 12:20
