CSS進階（3）——深刻理解content

盒尺寸由內到外爲：content，padding，border，margin。 本章對CSS world中第四章4.1節的內容作了一些總結和捨棄，從實用的角度深刻探討content屬性。

1.什麼是替換元素

在瞭解content以前，咱們須要掌握CSS中一種常見的元素——替換元素。替換元素是「內容（content）能夠被替換」的元素，常見的有「input」、「img」、「iframe」、「video」等。以圖片爲例 《img src="1.png" /》咱們只須要將src的圖片替換掉，元素的內容就會發生改變，所以，內容可替換是替換元素的基本特性之一。除了內容可替換，替換元素還有以下特性。

（1）基本樣式改不動，原文描述「內容的外觀不受頁面上CSS的影響」我的以爲有些不妥。什麼是基本樣式，依舊以圖片爲例，你能夠經過src替換圖片，但你不能經過CSS把圖片上的「一個男人」變成「一個女人」。有些時候，這爲咱們帶來了方便，如最基本的替換元素：《input type="text"/》你能夠經過CSS修改他的邊框，字體等屬性，但他的基本樣式，如光標提示，可輸入區域等，就是你改不動的，由於若是這個樣式被你改了，用戶就不知道哪裏能夠輸入。固然有些狀況下，這個「基本樣式」也給咱們帶來極大的不便，如「checkbox」的基本樣式，就是一個難看的方塊，你還不能經過CSS修改，所以須要經過一些特殊的方法去"覆蓋"他原有的樣式。這裏就很少作展開。

（2）有基本尺寸，原文描述「有本身的尺寸」，原文的說法也沒有錯，如「input」標籤，在默認狀況下就有一個默認長寬的輸入框，「video」、「iframe」、「canvas」等標籤的默認尺寸是300*150，「img」的默認尺寸是0.

（3）在不少CSS屬性上有本身的一套表現規則，這裏做者只說明瞭vertical-align屬性，對於替換元素和非替換元素，非替換元素的baseline是小寫字母x的小邊緣，但在替換元素中則被定義爲替換元素的下邊緣。（這個問題能夠作拓展說明，有興趣的小夥伴能夠研究一下在下面留言，還有哪些屬性在兩種元素中的表現不一樣）

2.替換元素的尺寸計算規則

我我的將替換元素的尺寸的權重由高到低分爲三類：CSS>私有屬性>固有尺寸（注：做者在這裏將尺寸分爲CSS尺寸，HTML尺寸，固有尺寸）。下面我將經過例子來講明這三種尺寸對替換元素寬高的影響。

（1）固有尺寸指的是替換元素原有的內容，這個原有的內容頗有意思，以圖片爲例，《img src="圖片連接"/》，因爲圖片的基本尺寸是0（谷歌下），但圖片自己還含有本身的寬高，如200*100的風景圖，那麼img標籤在沒有其餘樣式說明的狀況下他的最終「固有尺寸」是200*100，而不是0，這裏原有的內容指的是圖片自己的寬高。還有一些元素不須要內容也會自帶寬高，以《input type="text"/》爲例，你只須要在html里加入這個標籤，他就會顯示一個可輸入的文本框，這就是他的固有尺寸。

（2）私有屬性指的替換元素自帶的屬性，通常會表如今HTML標籤中，如《img width="200" height="100" src="400*300的圖片"/》，因爲width和height私有屬性的做用，圖片最終會表現爲width*height的尺寸，也就是覆蓋了圖片的固有屬性400*300。這裏還有一個隱藏的固有屬性，那就圖片的寬高比，在本例中，圖片的寬高比是4:3，所以當你設置《img widht="200" src="400*300的圖片" /》時，因爲只設置了寬度，沒有設置高度，最終圖片的高度由 寬度*寬高比 = 150。這個隱藏比例在CSS覆蓋中也一樣生效。

（3）CSS屬性就不用特殊說明了，就是指用CSS設置的屬性，因爲CSS的權重高於私有屬性，每每會使得代碼難以維護，好比讓你來維護這樣一段代碼

<img src="1.png" width="200" height="200" />
<style> img{ width:200px; height:200px; } </style>
複製代碼

看起來沒什麼問題，img的CSS屬性200px*200px覆蓋了私有屬性width*height，其表現形式也是同樣的，這個時候換了一張圖片，尺寸變成200*100了，後來的維護人員以爲改一下私有屬性height就完事了，結果發現改不動，改來改去仍是200*200。所以我的建議所有用CSS屬性維護替換元素的部分樣式會減小不少沒必要要的麻煩。

3.替換元素和content屬性的關係

這裏咱們跳過替換元素與src的關係，直接來研究替換元素和content屬性的關係，在CSS世界中，咱們把content屬性生成的對象稱爲"匿名替換元素",所以content屬性生成的內容都是替換元素，最多見的content替換屬性通常在::before/::after中才出現，但在Chrome瀏覽器中，全部的元素都支持content屬性（包括div），在其餘的瀏覽器中，僅在::before/::after中才有支持。所以，咱們能夠認爲下面這兩段代碼幾乎是同樣的。

<!-- 請在Chrome瀏覽器中嘗試 -->
<img style="content: url('../1.png')" />
<img src="../1.png" />
複製代碼

他們的展示結果是同樣的，但仍有一些不一樣，因爲替換元素自己沒法被選中的特性（文字也不能夠，有興趣能夠本身實驗），所以替換元素生成的圖片不能被右鍵保存，準確的說，圖片根本沒法被選中。所以在使用的時候仍是要注意這些小細節。

4.利用content生成輔助信息

因爲content屬性只有在Chrome瀏覽器中被全部元素支持，所以咱們只探究被公共支持的::after/::before兩個僞元素中的content有哪些輔助做用。其實，咱們常常會用到after僞類清浮動的技術，這樣作的好處在於將輔助功能和樣式結合，而不是添加冗餘的dom結構。下面是簡單代碼。

<-- after僞類清浮動 -->
<style> .clearfix::after{ content:''; display:block; clear:both; } </style>
複製代碼

除了利用after僞類清浮動，還有一些好用的功能。做者舉了一些例子，因爲會包含後面的一些內容，所以這裏只距離說明並提供連接地址，有興趣能夠本身瞭解一下。

• 輔助實現兩端對齊和垂直居中 （連接）
• 配合@font-face規則實現圖標字體（連接）
• 利用插入Unicode換行符實現"動態加載中..."文字的動畫效果（連接）

除了上面這幾個，還有兩個我的認爲比較有意思的輔助功能會在後面詳細展開，分別是利用content attr屬性值生成內容，以及利用content計數器實現簡單的目錄結構。

4.content attr屬性值內容生成

因爲此功能比較經常使用，也比較好用，所以單獨拎出來做爲一節，內容很少，就是用content獲取DOM結構上的自定義屬性來生成一些信息。下面來看如何用輔助元素實現下面的效果。

代碼以下所示：

<div class="list">
	<div class="li" self="音樂">aaa.mp3</div>
	<div class="li" self="電影">bbb.mp4</div>
	<div class="li" self="書籍">《ccc》</div>
</div>
<style> .li{ display: block; line-height: 40px; width: 200px; padding-top: 40px; position: relative; background: yellowgreen; overflow: hidden; margin:10px 0; } .li::after{ content: attr(self); position: absolute; top: 0; right: 0; text-align: center; width: 80px; background: yellow; transform: translate(20px) rotate(45deg); } </style>
複製代碼

6深刻理解content計數器

content計數器是一個很是好用且強大的功能，某些狀況下，他會比手動計數更加好用，一樣的，使用content完成計數功能也有許多須要注意的地方。在瞭解CSS計數器以前，咱們須要瞭解他的兩個屬性（counter-reset和counter-increment)和兩個方法（counter()和counters()）。下面會依次講解這兩個屬性和方法。

首先是counter-reset,顧名思義，counter-reset用於計數器的重置，一般用於父容器重置某個計數器。是的，因爲還要記錄是哪一個計數器，所以這個屬性還帶有計數器命名的功能。在默認狀況下，計數器重置後會從0開始計數，固然你也能夠手動設置，所以counter-reset有兩個屬性值，分別是計數器的名字，以及重置的值從幾開始。

counter-reset: hello 1；表明計數器的名稱是hello（注意不須要引號） ，計數器從1開始計數，固然這個屬性能夠不寫，默認爲0。同時你還能夠給多個計數器同時命名，我的以爲沒什麼軟用就不展開了。設置了計數器後，你就能夠配合content替換屬性和counter()方法進行計數了。代碼以下：

<div class="ctn">
    <div class="chid">計數</div>
    <div class="chid">計數</div>
    <div class="chid">計數</div>
</div>
<style type="text/css"> .ctn{ font-size: 20px; color: green; background: yellow; counter-reset: hello 1; } .chid::after{ content: counter(hello); } </style>
複製代碼

最終效果以下圖所示:

能夠看到，計數功能生效了。固然，咱們須要的結果是計數器可以本身累加，而不是一直是1，這個時候就須要用到計數器的第二個屬性，counter-increment,顧名思義，該屬性用於計數器的遞增，有點相似於for循環中的i++，該屬性有兩個值，第一個值表明要遞增的計數器名稱，第二個值表示每次遞增的數字，默認遞增值爲1。

content-increment:hello 2; 表明hello計數器的值加2。咱們給剛纔的例子加上這個屬性看一下效果。

<div class="ctn">
    <div class="chid">計數</div>
    <div class="chid">計數</div>
    <div class="chid">計數</div>
</div>
<style type="text/css"> .ctn{ font-size: 20px; color: green; background: yellow; counter-reset: hello 1; } .chid::after{ content: counter(hello); counter-increment: hello 2; } </style>
複製代碼

最終效果以下圖所示

有意思的是，結果是3，5，7，而不是1，3，5。所以能夠得出的結論是，重置值每遇到一次increment都會返回直接累加的結果。所以若是你調皮的話，在父元素上也寫一個counter-increment，那麼至關於重置的值=reset + increment。

7.利用counters()嵌套計數實現目錄結構

承接上一節，以前咱們用counter()方法實現了計數功能，然而咱們平時的序號不可能就只是1，2，3，4....還會有諸如1.1,1.2,1.3等的子序號，前者就是counter()乾的事，後者就是counters（）才能實現了。

counters()的基本用法和counter()相似，都是counters(name,types),這裏補充說明一下，這裏的name指的是計數器的名稱，那麼第二個參數用來作什麼呢？原文中用的string，我的以爲不太恰當，事實上若是你瞭解list-style屬性，你就知道除了阿拉伯數字1234，還有羅馬數字等也能夠用以計數，這個types支持全部list-style屬性。閒話很少說，來看一下如何用counters()實現一個目錄結構吧。

<!-- 探究循環計數器 -->
<div class="father">
    <div class="children">
    	children
    	<div class="father">
    		<div class="children">children
    			<div class="father">
    				<div class="children">children</div>
    				<div class="children">children</div>
    			</div>
    		</div>
    		<div class="children">children</div>
    	</div>
    </div>
    <div class="children">
    	children
    </div>
    <div class="children">
    	children
    </div>
</div>
<style type="text/css"> .father{ counter-reset: hello; padding-left: 10px; } .children::before{ content: counters(hello,'-') '. '; counter-increment: hello; } </style>
複製代碼

最終效果以下圖所示：

下面咱們在來看一個異常的目錄結構，請本身體會二者的不一樣，這裏只可意會不可言傳，哈哈~

<!-- 探究異常計數器 -->
 <div class="father">
 	<div class="children">children</div>
 	<div class="father">
 		<div class="children">children</div>
 		<div class="children">children</div>
 	</div>
 	<div class="children">children</div>
 	<div class="father"></div>
 	<div class="children">children</div>
 </div>
複製代碼

最終效果以下圖所示

content的部分到此爲止，下面會繼續探究padding,border和margin。

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。