資訊專欄INFORMATION COLUMN
摘要：第一個(gè)自然不用說(shuō)，比如我們?cè)O(shè)置一個(gè)，寬度和高度都是，此時(shí)你給它加了和最后這個(gè)元素的總寬度是，這是關(guān)于盒子模型的基本定義，即和指的是內(nèi)容的寬高。所以要使得這些文本無(wú)法被選中，在這個(gè)按鈕的樣式中添加即可。
1.box-sizing:border-box
box-sizing有三個(gè)屬性：content-box(默認(rèn)值) || border-box || inhreit。第一個(gè)自然不用說(shuō)，比如我們?cè)O(shè)置一個(gè)div，寬度和高度都是100px，此時(shí)你給它加了padding:2px和border:1px solid #333,最后這個(gè)元素的總寬度是106px，這是W3C關(guān)于盒子模型的基本定義，即width和height指的是內(nèi)容(content)的寬高。而border-box則是回到了IE盒子模型的舊標(biāo)準(zhǔn)，也就是說(shuō)這里的width規(guī)定的是總長(zhǎng)度（content+padding+border），雖然是舊標(biāo)準(zhǔn)，但不得不承認(rèn)有時(shí)候?yàn)榱朔奖阄覀內(nèi)ミ€原一些設(shè)計(jì)稿時(shí)，還是有幫助的。
?
2.user-select:none
這個(gè)主要是針對(duì)一些按鈕的吧，至少在我做過(guò)的項(xiàng)目中就是這樣，比如說(shuō)一個(gè)按鈕，你瘋狂點(diǎn)擊它，點(diǎn)快了有時(shí)候鼠標(biāo)有滑動(dòng)，那么按鈕上的文字就會(huì)變成這樣：
這樣就有些尷尬，像一個(gè)文本一樣，給人的感覺(jué)不太好。所以要使得這些文本無(wú)法被選中，在這個(gè)按鈕的css樣式中添加user-select:none即可。
?
3.pointer-event:none
這個(gè)屬性主要用在一些點(diǎn)擊穿透的場(chǎng)景上，比如在一個(gè)父元素中有兩個(gè)子元素，position都為absolute，其中子元素1是主體的內(nèi)容，z-index:1;子元素2是一個(gè)濾鏡，z-index:2。
兩個(gè)子元素寬高都是100%,這時(shí)候因?yàn)檫@個(gè)濾鏡擋在子元素1的上方。使得我們無(wú)法點(diǎn)擊子元素1的各種內(nèi)容。這時(shí)候就需要給子元素2這個(gè)濾鏡元素加上pointer-event:none;使得它變成一個(gè)“幽靈元素”。鼠標(biāo)點(diǎn)擊可以輕易地穿透它的身體，從而點(diǎn)擊到被它擋在身后的子元素1。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1683.html
摘要：收藏優(yōu)秀組件庫(kù)合集前端掘金開(kāi)源的優(yōu)秀組件庫(kù)合集教你如何在應(yīng)用程序中使用本地文件上傳圖片前端掘金使用在中添加到的，現(xiàn)在可以讓內(nèi)容要求用戶選擇本地文件，然后讀取這些文件的內(nèi)容。 『收藏』VUE 優(yōu)秀 UI 組件庫(kù)合集 - 前端 - 掘金github 開(kāi)源的 Vue 優(yōu)秀 UI 組件庫(kù)合集?... 教你如何在 web 應(yīng)用程序中使用本地文件?上傳圖片file? - 前端 - 掘金使用在HTM...
摘要：在微信小程序中，要更新視圖就只能修改，而視圖層也只能通過(guò)事件向邏輯層傳遞交互信息。頁(yè)面移植到微信小程序要修改的地方也還比較多，主要是標(biāo)簽和的交互及小程序提供的功能部分。 小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用「觸手可及」的夢(mèng)想，用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。也體現(xiàn)了「用完即走」的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載。 —...
摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答，但會(huì)議的視頻目前都還沒(méi)放出來(lái)，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書(shū)寫(xiě)規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書(shū)寫(xiě)規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
閱讀 1999·2021-11-22 14:44
閱讀 1741·2021-11-02 14:46
閱讀 3826·2021-10-13 09:40
閱讀 2674·2021-09-07 09:58
閱讀 1779·2021-09-03 10:28
閱讀 1715·2019-08-29 15:30
閱讀 1040·2019-08-29 15:28
閱讀 1535·2019-08-26 12:20
