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

jone5679 發布于2019-04-23 13:17 / 1993人閱讀

摘要：第一個自然不用說，比如我們設置一個，寬度和高度都是，此時你給它加了和最后這個元素的總寬度是，這是關于盒子模型的基本定義，即和指的是內容的寬高。所以要使得這些文本無法被選中，在這個按鈕的樣式中添加即可。

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。

GPU云服務器云服務器 linux的一些常用命令 ddos一些比較小的網站 CSS_JS_Tips 有用的小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1683.html

FED之必備技能 - 收藏集 - 掘金

摘要：收藏優秀組件庫合集前端掘金開源的優秀組件庫合集教你如何在應用程序中使用本地文件上傳圖片前端掘金使用在中添加到的，現在可以讓內容要求用戶選擇本地文件，然后讀取這些文件的內容。『收藏』VUE 優秀 UI 組件庫合集 - 前端 - 掘金github 開源的 Vue 優秀 UI 組件庫合集?... 教你如何在 web 應用程序中使用本地文件?上傳圖片file? - 前端 - 掘金使用在HTM...

lyning 2019-08-01 16:55 評論0 收藏0
微信小程序初探

摘要：在微信小程序中，要更新視圖就只能修改，而視圖層也只能通過事件向邏輯層傳遞交互信息。頁面移植到微信小程序要修改的地方也還比較多，主要是標簽和的交互及小程序提供的功能部分。小程序是一種不需要下載安裝即可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或搜一下即可打開應用。也體現了「用完即走」的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。 —...

teren 2019-08-20 13:57 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0