12個鮮為人知的CSS事實

> CSS不是一種過於復雜的語言。但是，即使您一直在寫CSS多年，您仍然可能會遇到新事物 - 您從未使用過的屬性，從未考慮過的價值觀或您從未知道的規範細節。

在我的研究中，我一直都遇到了新的小花絮，所以我想我會在這篇文章中分享其中的一些。誠然，這篇文章中的所有內容並不是所有的直接實用價值，但也許您可以在心理上提交其中的一些以供以後使用。

>

鑰匙要點

CSS中的顏色屬性不僅用於文本。它還影響缺少圖像，列表元素上的邊界，無序列表上的子彈點，有序列表上的數字標記和HR元素的顏色。 > CSS中的可見性屬性可以設置為“崩潰”。此值在所有元素上的“隱藏”工作類似於表行，表行組，表列和表列組，其工作方式類似於“ display：none”。但是，瀏覽器處理“崩潰”是不一致的。
• >
> CSS中的背景速記屬性現在包括三個新值，除了原始五個值之外。新值是背景大小，背景 - 原始和背景卷 -
• > CSS中的剪輯屬性僅適用於絕對定位的元素。您應用剪輯的元素必須是絕對或固定的。
在CSS中，垂直百分比相對於容器寬度，而不是容器高度。這適用於頂部和底部填充物以及頂部和底部邊緣等屬性。 >>
1。顏色屬性不僅用於文字
• >
>讓我們從更輕鬆的東西開始。每個CSS開發人員都廣泛使用了顏色屬性。但是，有些人對CSS的經驗不那麼經驗，可能沒有意識到，它並不僅定義文本的顏色。
看下面的演示：

請參閱codepen上的sitepoint（@sitepoint）的筆CTWFG。

>在CSS中註意，在身體元素上僅使用一種顏色屬性，將其設置為黃色。如您所見，頁面上的所有內容都是黃色的，包括：

缺失圖像上顯示的alt文本

列表元素上的邊框

上的子彈（或標記）
訂購列表上的數字標記
HR元素
有趣的是，默認情況下，人力資源元素不會繼承顏色屬性的值，但是我必須通過使用邊框彩色：繼承來強迫它這樣做。這對我來說是一種奇怪的行為。
>所有這些都通過規格驗證：
• >

  此屬性描述了元素文本的前景
  的前景顏色 內容。另外，它用於提供潛在的間接值
  …對於接受顏色值的任何其他屬性。

  >

  >我想不出任何有資格的“前景”的東西，但是如果您這樣做，請在評論中告訴我們。

  >

  2。可見性屬性可以設置為“崩潰”

  >您可能已經使用了數百次可見性屬性。最常用的值是可見的（所有元素的默認值）和隱藏的值，這使元素消失，同時允許其仍然佔據空間，就好像在那裡一樣（與顯示不同：無）。

  >可見性屬性的三分之一且很少使用的值是崩潰的。此功能與隱藏在表行，表行組，表列和表列組之外的所有元素上的工作方式相同。對於這些基於表的元素，崩潰的值應該與顯示相似：無，因此折疊行/列所佔據的空間可以被其他內容佔據。

  >

  不幸的是，瀏覽器處理崩潰的方式不一致。嘗試以下演示：
  請參見筆的可見性：codepen上的sitepoint（@sitepoint）崩潰。
  CSS-tricks年鑑建議不要使用它，因為瀏覽器不一致。

  從我的觀察值中：

  在Chrome中，如果您應用崩潰或隱藏，則沒有什麼區別（請參閱此錯誤報告和評論）

  > 在Firefox，Opera和IE11中，崩潰似乎完全按照應有的響應：該行被刪除，下面的行移動。
  誠然，這個值可能很少會被使用，但是它確實存在，因此，如果您以前不知道，我猜您現在更聰明。
  • 3。背景速記屬性具有新的值
  在CSS2.1中，背景速記屬性包括5個遠程值 - 背景色，背景圖像，背景重複，背景 - 附件和背景位置。在CSS3及以後的情況下，現在包括三個，總計8個。這是值映射的方式：
  >
  請注意前向斜線，類似於字體速記和邊界 - 拉迪烏斯的寫作方式。斜線允許您在支持瀏覽器的位置後包含一個背景大小的值。

  >此外，您還提供了背景孔和背景紙條的最多兩個可選聲明。

  因此，語法看起來像這樣：

  >

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  >使用此演示在瀏覽器中對其進行測試：

  請參閱codepen上的sitepoint（@sitepoint）的筆記新背景速記值。

  關於瀏覽器的支持，這些新價值似乎在所有現代瀏覽器中都可以正常工作，但是您可能必須為任何不支持的瀏覽器提供良好的後備，因此它優雅地降低了。

  4。剪輯屬性僅在絕對位置的元素

  上工作

  說到背景剪輯，您之前也可能看過剪輯。看起來像這樣：

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  這將在指定位置“夾住”元素（此處解釋）。唯一的警告是，必須絕對將應用剪輯的元素放置。因此，您必須這樣做：

  <span><span>.example</span> {
  </span>  <span>background: aquamarine <span>url(img.png)</span>
  </span>              no-repeat
                scroll
                center center <span>/ 50%
  </span>              content-box content-box<span>;
  </span><span>}</span>

  >您可以在下面的演示中查看剪輯在位置時如何禁用：絕對被切換：
  請參閱codepen上的sitepoint（@sitepoint）的筆sifju。
  >您還可以將元素設置為位置：固定，因為，根據規格，固定位置元素也有資格為“絕對位置”元素。
  5。垂直百分比是相對於容器寬度的，而不是高度
  >一開始我有點混亂，我之前寫過的。雖然您可能知道寬度百分比是根據容器的寬度計算的，但同樣根據容器的寬度而不是高度來計算諸如頂部和底部填充以及頂部和底部邊緣之類屬性的百分比。

  >。

  這是一個示例，您可以使用範圍滑塊進行調整，因此您可以看到效果：>

  請參閱codepen上的sitepoint（@sitepoint）的筆qlnpm。

  請注意，內部框上聲明了3個“垂直”百分比（頂部和底部填充物以及底部邊距）。當滑塊移動時，它僅更改容器寬度。但是，其他值對此發生了變化，如頁面上的輸出所示，表明這些值（稱為百分比時）基於容器寬度。

  6。邊境財產有點像Inception

  >我們都在某個時候完成了此操作：

  邊境財產是一個速記財產，設置邊境風格，邊界寬度和邊界色 - 都在單個聲明中。

  ，但不要忘記，邊界屬性所代表的每個屬性本身都是速記屬性。因此，只能宣布邊境寬度：

  <span><span>.example</span> {
  </span>    <span>clip: rect(110px, 160px, 170px, 60px);
  </span><span>}</span>

  >這將為四個邊界中的每個邊界設置不同的寬度。邊界彩色和邊界風格也是如此，如這個可怕的演示中所示：

  請參閱codepen上的sitepoint（@sitepoint）的筆多個邊框速記。

  此外，這些特性中的每一個都可以通過邊界左式，邊界寬度，邊界底彩等進一步分解。

  <span><span>.example</span> {
  </span>    <span>position: absolute;
  </span>    <span>clip: rect(110px, 160px, 170px, 60px);
  </span><span>}</span>

  >

  >但是，您無法使用常規邊框速記為不同側面設置不同的值。因此，它的速記是速記內部的速記，但不完全是。

  >

  7。文本介紹屬性現在是速記

  我知道這個列表上的某些東西會讓您震驚。

  根據規格：

  >，這是標準的

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  此屬性現在代表3個屬性：文本 - 編寫線，文本 - 編寫色彩和文本式式風格。

  不幸的是，Firefox是唯一支持這些新屬性的瀏覽器，並且（我假設是向後兼容），在速記中不支持它們。

  在Firefox中嘗試下面的演示：
  請參閱codepen上的sitepoint（@sitepoint）的筆hapgb。

  演示正在使用長達值來執行此操作。最終，這將是一個艱難的問題，因為目前，任何看到文本編寫額外價值的瀏覽器都會使整個聲明無效，這顯然不利於向後兼容。

  8。邊界寬度屬性接受關鍵字值
  >並不是完全令人震驚，這並不是什麼新鮮事物，但是除了標準長度值（例如5px或1em）之外，邊界寬度屬性還接受三個關鍵字值：中，薄和厚。

  實際上，邊界寬度屬性的初始值是“中等”。下面的演示使用“厚”：

  >請參閱codepen上的sitepoint（@sitepoint）的筆邊框寬度關鍵字。

  >瀏覽器呈現這些關鍵字值時，規格不需要它們將其映射到特定的長度值，但是從我看來，所有瀏覽器似乎都使用1PX，3PX和5PX。

  9。沒有人使用邊界圖像
  >我在一段時間後寫了有關CSS3邊界圖像屬性的文章。除IE10及以下外，所有現代瀏覽器都支持該功能。但是有人在乎嗎？

  >

  >這似乎是一個非常整潔的功能，使您可以創建流體的邊框圖像。在此演示中使用調整大小的句柄對其進行測試：
  > codepen上的sitepoint（@sitepoint）請參見筆邊界圖像演示。

  不幸的是，邊界形像似乎是沒有很多人使用的新穎性。但是也許我錯了。如果您知道在真實項目中使用的任何邊界圖像的示例，或者如果您使用過，請在評論中告訴我們，我很樂意承認我錯了。

  10。有一個空元素屬性
  這個在包括IE8在內的任何地方都有支持，看起來像這樣：

  >

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  正如您可能想出的那樣，它用於HTML表。它告訴瀏覽器是否顯示或隱藏沒有內容的表單元格。嘗試此演示中的“切換”按鈕，以查看更改空元素屬性值的效果：
  請參閱codepen上的sitepoint（@sitepoint）的鋼筆空單元演示。

  在這種情況下，我必須確保邊界可見且不會倒塌，並且我不得不在細胞邊界之間添加一些間距。在某些情況下，此屬性不會具有視覺效果，因為在表格上需要有任何可見的東西才能使任何區別。

  >

  11。字體風格的屬性接受“斜”

  的值 幾乎每次您看到字體式屬性時，它都以“正常”或“斜體”的值使用。但是您也可以給它一個“斜”的值：

  >

  請參閱codepen上的sitepoint（@sitepoint）的筆ITALIC與傾斜。
  >但這到底是什麼意思？為什麼看起來和斜體相同？

  >

  規格解釋了值“傾斜”的值…
  “……選擇一種標記為斜面的字體，如果不是斜面的臉部或斜體。”
  規格中“斜體”的描述基本上是相同的。 “斜”一詞是一個印刷術語，基本上代表傾斜的文本，但不是真正的斜體。

  由於CSS處理傾斜文本的方式，它與斜體可互換，除非（如規格所述）所使用的字體的面部被識別為斜的。

  >我從未聽說過實際上有斜面的字體，但也許我錯了。從我所做的研究來看，字體似乎是錯誤的，可以提供斜體和傾斜面孔，因為斜面應該是沒有真正斜體的字體上的斜體版本。

  >

  因此，如果我沒記錯的話，這意味著如果字體沒有真正的斜體面孔，將CSS設置為字體式：斜體實際上將顯示為字體風格：斜面。

  12。 Word-brap與Overflow-wrap

  相同

  >包裝屬性的屬性不經常使用，但在特定情況下非常有用。一個經常使用的例子是幫助長期不間斷的文本（如URL）包裹，而不是脫離容器。這是一個示例：

  請參閱codepen上的sitepoint（@sitepoint）的筆詞包裝演示。

  因為這最初是Microsoft的創建，所以此屬性在包括Internet Explorer（包括Internet Explorer）的所有瀏覽器中都支持。

  >儘管跨瀏覽器，並且從我看來，W3C決定用溢出包裝替換Word-wrap - 我猜是因為以前的名字被認為是錯誤的名稱。溢出包裝具有與word-nap相同的值，而Word-brap現在被視為“溢出” - wrap的“替代語法”。

  >

  >雖然一些新的瀏覽器確實支持溢出包裝，但由於舊瀏覽器的處理方式恰到好處，因此打擾它似乎毫無意義，並且所有瀏覽器都必須繼續無限期地支持Word-wrap，出於遺產。

  >當所有使用瀏覽器自動更新時，我們可以開始使用溢出包裝 - 但是在那之前，我看不到從舊語法更改的點。

  其中有多少個對您來說是新的？

  >

  您從這篇文章中學到了什麼？我希望如此。可能大多數經驗豐富的CSS開發人員都知道上述要點很多（即使不是全部）。但是，可能從CSS開始的那些可能會從中受益更多。

  >很有趣的是，看到其中有多少個對我們的讀者來說是新的。在下面發表評論，告訴我們有多少是您新的（例如6/12、4/12或其他）。

  >
  以可學習的會員資格拾取更多的CSS提示和提示。您將可以訪問數十個書籍和課程，包括

  的暢銷書，開始css ，> CSS Anthology等。 經常詢問有關CSS 的問題（常見問題解答）

  > CSS的某些獨特屬性是什麼不知所周的？
  CSS或級聯樣式表具有幾種眾所周知的獨特屬性。例如，CSS擁有一個稱為“計算”的屬性，該屬性允許您執行計算以確定CSS屬性值。這對於響應式設計可能非常有用。另一個鮮為人知的屬性是“ CH”，它代表角色，可用於設置與使用字體的“ 0”特徵的寬度有關的寬度和其他測量值。

  >

  可以使用CSS來創建動畫嗎？
  是的，CSS可以用於創建動畫。 CSS中的“動畫”屬性使您幾乎可以使任何屬性動畫。您可以控制動畫的持續時間，正時功能，延遲，迭代計數，方向，填充模式和播放狀態。這可能是可以在網站上增強用戶體驗的功能強大的工具。
  >“繼承”值在CSS中如何起作用？
  CSS中的“繼承”值用於指定屬性應從其父元素中繼承其值。在您要確保跨元素一致性的情況下，或者您想通過減少冗餘來簡化CSS代碼時，這可能很有用。

  >

  >在CSS？

  中，“ z index”屬性的目的是什麼，CSS中的“ z index'屬性用於控制元素的堆疊順序。具有較高“ Z index”值的元素將出現在“ z索引”值較低的元素的頂部。當處理重疊的元素時，例如在復雜的佈局或創建模式或下拉菜單時，這可能特別有用。

  可以使用CSS用於樣式的形式輸入？

  是的，可以使用CSS來樣式進行表單輸入。您可以使用CSS來控製文本字段，複選框，無線電按鈕和其他表單輸入的外觀。這可能是一種強大的工具，可以增強網站上表單上的可用性和美學。
  CSS中的“盒裝大小”屬性是什麼？> CSS中的“盒裝大小”屬性用於控制元素的總寬度和高度的如何計算。默認情況下，元素的寬度和高度不包括填充和邊界。但是，通過將“盒裝”屬性設置為“ Border-Box”，您可以在寬度和高度計算中包括填充和邊框。

  >

  如何在CSS中使用“ Float”屬性在CSS中工作？
  >
  CSS中的“ float”屬性用於將元素推向左或右元素，從而使其他元素圍繞它圍繞它圍繞它。這對於在圖像上創建文本包裝或創建多列佈局可能很有用。
  > CSS中的“視口”是什麼？

  > CSS中的“ fiewport”是指用戶在網頁上的可見區域。您可以使用CSS中的“大眾”（視口寬）和“ VH”（視口高）單元相對於視口。這對於創建適應不同屏幕尺寸的響應設計特別有用。

  可以使用CSS來創建梯度嗎？

  > CSS中的“偽元素”是什麼？

  >> 在CSS中使用“偽元素”用於樣式元素的特定部分。例如，使用“ ::”和“ ::”偽元素用於插入元素內容之前或之後的內容。這對於在網站上添加裝飾功能可能很有用。

以上是12個鮮為人知的CSS事實的詳細內容。更多資訊請關注PHP中文網其他相關文章！