這五個有用的 CSS 屬性完全被我忽視了

2021-03-02 CSDN

以下為譯文：

今天，我想在這裡和大家分享一些我很晚時候才知道的一些CSS屬性，在此之前，沒有人告訴我這些屬性的存在。

使用屬性user-select，並且將它的值設置為none，我們可以將一個元素的文本設置為不能被用戶選中。
element {  -webkit-user-select: none; /* Safari */  -ms-user-select: none; /* IE 10+ and Edge */  user-select: none; /* Standard syntax */}
當你不想一個元素的原始內容被複製時，可以使用這個屬性。
使用選擇器::selection，可以更改選中文本的背景顏色：
::selection {  color: #ececec;  background: #222831;}
當你使用這個屬性時，注意使用良好的顏色對比度組合。
使用屬性white-space，並將它的值設置為pre-wrap或pre-line：
element {  white-space: pre-wrap; /*pre-wrap*/  white-space: pre-line; /*pre-line*/}
這對你來說可能有點簡單。但是直到我搜索這個需求時，我才知道有這個設置。你可以使用word-spacing這個屬性來設置文本中詞與詞之間的間隔。
element {  word-spacing: 6px; /* word spacing wow such */}
要實現這個目的，你必須為不同的瀏覽器，準備不同的代碼：
html::-webkit-scrollbar {  display: none;}
html {  -ms-overflow-style: none;}
如果你禁用了滾動條，那麼你需要確保提供上/下按鈕和其他方便的導航選項。請注意，Firefox停止了對滾動條隱藏問題的支持，以上代碼似乎是一個技巧，可以執行與我包含的其他代碼相同的功能。原文：https://dev.to/helleworld_/5-css-useful-properties-i-ignored-2930

相關焦點

  • css flex屬性筆記
    flex屬性定義及用法在css中，flex屬性是使用來設置或檢索彈性盒模型對象的子元素如何分配空間，是 flex-grow屬性、flex-shrink屬性和 flex-basis 屬性的簡寫屬性。flex屬性針對的是彈性盒模型對象的子元素，對於其它元素，flex屬性不起任何作用；一些主流瀏覽器還不支持flex屬性，需要在該屬性之前加對應的前綴才能識別該屬性。Internet Explorer 9及更早版本不支持flex屬性，但是可以通過-ms-flex屬性來支持， IE11 及更新版本完全支持flex屬性，不再需要-ms-前綴。
  • CSS margin屬性與用法教程
    margin 屬性是css用於在一個聲明中設置所有 margin 屬性的簡寫屬性，margin是css控制塊級元素之間的距離
  • CSS樣式--字體屬性和文本屬性
    ，字號、行高、字體這三個屬性是最常見的。";上面這三個屬性，我們可以使用一行代碼來實現：（字號 font-size、行高 line-height、字體 font-family） font: 14px/24px 「宋體」;2、字體屬性的說明：（1）網頁中不是所有字體都能用，因為這個字體要看用戶的電腦裡面裝沒裝，比如你設置：
  • CSS之定位一(position屬性)
    本文我們討論涉及定位的position屬性。首先我們來看一下position對應的值及其含義（表1）。圖1：relative子元素位置變化圖1中外框和除position屬性值不一樣外，其他css屬性均一致，其內外框html和相同部分css見圖2。
  • CSS中position屬性的用法和作用
    CSS中position屬性的用法和作用 本文向大家介紹一下CSS中Position屬性的用法和作用，Position屬性有四個可選值，它們分別是：static、absolute、fixed、relative。
  • css font-family屬性設置元素的字體
    font-family屬性定義及用法在css中，font-family屬性是使用來規定元素的字體系列，把多個字體名稱作為一個「回退」系統來保存，如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表，瀏覽器會使用它可識別的第一個值。有兩種類型的字體系列名稱：指定的系列名稱：具體字體的名稱，比如："times"、"courier"、"arial"。
  • CSS Display屬性的雙值寫法
    display屬性，なに？display屬性用來控制一個元素及其子元素的格式化上下文，你應該在剛剛學習CSS的時候就知道，有些元素是塊級元素，有些則是行內元素。有了display屬性，你就可以切換元素不同的狀態。比如說，通常一個h1元素是一個塊級元素，但是通過切換，它就能以內聯元素展現。
  • css padding屬性設置元素內邊距
    padding屬性定義及用法在css中，padding屬性是一個簡寫屬性，用來設置所有內邊距屬性（填充），將上邊距屬性、右邊距屬性、下邊距屬性、左邊距屬性定義在同一個聲明中。padding:屬性值1;說明：padding屬性有4個屬性值時：四個屬性值分別定義上內邊距、右內邊距、下內邊距、左內邊距；padding屬性有3個屬性值時：屬性值1和屬性值3分別定義上內邊距和下內邊距
  • 我腦中飄來飄去的 CSS 魔幻屬性
    所以最簡單的解決方案就是為li添加vertical-align: 屬性不為baseline，氣不氣，改變其縱向的對齊方式的默認屬性;為啥非弄個折騰人勒。關於vertical-align,如果還想做這方面的深入了解，可以看看張大俠的分析img圖片撐不滿整個div，有空隙直接上圖更直觀(箭頭所指)：
  • 層疊樣式表(CSS)屬性(上篇)
    今天我們繼續上期的話題，上期我們對層疊樣式表（css）的基礎做了下大致的介紹，那麼今天我們來學習一些它的屬性。盒子屬性說到css屬性其中最重要的就是它的盒子屬性了，代表標籤為無屬性標籤<div>，包括的屬性有：padding 內邊距（內填充）border 邊框margin 外邊距
  • css line-height屬性設置行高
    line-height屬性定義及用法在css中，line-height屬性是使用來設置行高，即設置行間的距離。可以包含這些內容的最小框就是行框；原始數字值指定了一個縮放因子，後代元素會繼承這個縮放因子而不是計算值；line-height屬性語法格式css語法：line-height:normal/number/length/%/inherit
  • css right屬性右邊緣偏移
    right屬性定義及用法在css中，right屬性是使用來定義定位元素右外邊距邊界與其包含塊右邊界之間的偏移。和該屬性相似的屬性有left、top、bottom，通常相互配合用來定位元素的位置。這幾個偏移屬性必須和position屬性一起使用，而其position屬性值不能為static（默認），不然left、right、top、bottom偏移屬性是沒有效果的；對於static元素，為auto；對於長度值，則為相應的絕對長度；對於百分比數值，為指定值；否則為auto。對於相對定義元素，left的計算值始終等於right。
  • CSS中behavior屬性語法簡介
    作者：52css來源：52css.com|2010-09-01 11:00
  • css list-style-type屬性筆記
    list-style-type屬性定義及用法在css中，list-style-type屬性是使用來設置列表項標記的類型，在有序列表和無序列表中經常都會使用該屬性。目前，所有主流瀏覽器都支持list-style-type屬性，但是任何版本的Internet Explorer（包括 IE8）都不支持屬性值"decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" 或 "inherit"；
  • css left屬性左邊緣偏移
    left屬性定義及用法在css中，left屬性是使用來定義定位元素左外邊距邊界與其包含塊左邊界之間的偏移，其實就是元素向右的偏移量；left屬性通常和position、right、top、bottom等屬性一起使用
  • 注意CSS代碼中的!important屬性
    important屬性 CSS中的!important是一個非常重要的屬性，有時候發揮著非常大的作用，這方面的知識並不是非常多，我們看下面的文章，對它作比較感觀的了解。
  • web前端學習路線css屬性
    找到一份web前端工作需要掌握的內容如下：首先是html，css這些簡單的靜態布局這是最基本的學習內容，不在多說。現在公司是必須要求會用框架的，所以取代JavaScript的就是jQuery，這是一個非常簡易的框架，學jQuery的時候你就會覺得它比JavaScript好用的多。所以jQuery是你必須掌握的。
  • css3 punctuation-trim屬性筆記
    punctuation-trim屬性punctuation-trim屬性定義及用法在css中，punctuation-trim屬性是使用來規定如果標點位於行開頭或結尾處punctuation-trim屬性是css3中新增屬性，目前主流瀏覽器都還不支持該屬性。
  • 你可能還不知的 7 個 CSS 好用的屬性
    但是，在學習過程中，我們傾向於（大部分時間）限制自己，一遍又一遍地使用相同的屬性。畢竟，我們是一種習慣性的動物，我們會使用自己習慣且熟悉的東西。因此，在這篇文章中，向你介紹7個 比較少見且好用的 CSS 屬性，希望對你有所幫助。
  • css outline-color屬性設置輪廓顏色
    outline-color屬性定義及用法在css中，outline-color屬性是使用來設置輪廓的顏色。所謂輪廓就是繪製於元素周圍的一條線，位於邊框邊緣的外圍，是圍繞元素的邊距，不是元素尺寸的一部分，因此元素的寬度和高度屬性不包含輪廓的寬度。outline-color屬性必須和outline-style屬性一起使用，這很好理解，元素必須要有輪廓（outline-style屬性定義輪廓樣式）才能設置輪廓顏色。