1. content 與替換元素
替換元素（<img> <object> <video> <iframe> 或表單元素如 <textarea> <input> <select>）涌韩，顧名思義瘪匿，內容可替換莹菱，其他特性：
-
替換元素的外觀不受 css 的影響鞭呕。如何改變替換元素的外觀苟耻，需要類似 appearence 屬性篇恒，或瀏覽器自身暴露的一些樣式接口，如
::-ms-check{}可更改高版本 IE 瀏覽器下單復選框的內間距凶杖、背景色等樣式胁艰，但直接input[type="checkbox"]{}卻無法更改。 -
有自己的尺寸。很多替換元素在沒有明確尺寸設定的情況下蝗茁，其默認的尺寸（不包括邊框）是
300px * 150px醋虏，如 video、iframe哮翘、canvas 查看case秸仙，也有少部分替換元素為0px祭饭，如 img。而表單元素的替換元素的尺寸與瀏覽器有關，沒有明顯的規(guī)律峦甩。 -
在很多 css 屬性上有自己的一套表現(xiàn)規(guī)則双炕。比如
vertical-align屬性蹭越，對于非替換元素庇绽，默認值是baseline，即 x 字符的下邊緣员凝，替換元素的內容沒有 x 字符署驻，于是基線被定義成了元素的下邊緣。
2. 替換元素尺寸計算
css > html > 固有尺寸
- 如果固有尺寸具有固有的寬高比例健霹，同時僅設置了高度或寬度旺上，則元素按固有的寬高比例顯示。
- 內聯(lián)替換元素和塊級替換元素使用同一套計算規(guī)則糖埋。
如：case
雖然圖片變成了塊級宣吱，但是尺寸規(guī)則還是和內聯(lián)狀態(tài)下一致。這也是為何圖片及其他表單類替換元素設置img {display: block;} <img src="1.jpg"/>display:block寬度卻沒有 100% 容器的原因瞳别。 - 圖片的 content 替換內容默認的適配方式是
object-fit: fill征候，其他屬性object-fit:noneobject-fit:containcase
3. 替換元素與非替換元素之間的關系
- 相差一個
src查看demo - 相差一個
content
demo1 使用 content 屬性生成一張圖片。 Chrome 下祟敛，所有的元素都支持 content 屬性疤坝，而其他瀏覽器僅在::before/::after偽元素下支持。
demo2 使用 content 屬性替換將圖片為另一張圖片馆铁。content 屬性改變的僅是視覺呈現(xiàn)跑揉，當右鍵保存的時候，仍是保存的 src 對應的圖片叼架。
demo3 讓普通標簽元素變成替換元素畔裕。視覺上文字被替換了衣撬，但屏幕閱讀器閱讀的還是文字內容乖订，搜索引擎抓取的還是文本信息，對頁面的可訪問性沒有任何影響具练。想在移動端使用該技術乍构，建議使用 SVG 矢量圖片。 - content 屬性生成的內容被稱為“匿名替換元素”。
- content 生成的文本無法選中哥遮、無法復制岂丘，好像設置了
user-select:none，同時眠饮，無法被屏幕閱讀設備讀取奥帘、無法被搜索引擎抓取。 - 不能左右
:empty偽類仪召。case - content 動態(tài)生成值無法獲取寨蹋。
- content 生成的文本無法選中哥遮、無法復制岂丘，好像設置了
4. content 內容生成技術
在實際項目中，content 屬性幾乎都用在 ::before/::after 這倆個偽元素中扔茅，因此已旧，“content 內容生成技術”有時候也稱為“::before/::after偽元素技術”。
4.1 content 輔助元素生成
此應用的核心不在 content 生成的內容召娜，而在于偽元素本身运褪，通常，會把 content 設置為空字符串玖瘸。
.element::before {
content: '';
}
然后秸讹，利用其它 css 代碼來生成輔助元素，或實現(xiàn)圖形效果店读，或實現(xiàn)特定布局嗦枢。
還有一個常見應用，清除浮動帶來的影響：
.clear::after {
content: '';
display: table; /* or block */
clear: both;
}
// div 與第一個 i 之間不能換行
<div id="box" class="box"><i class="bar"></i>
<i class="bar"></i>
<i class="bar"></i>
<i class="bar"></i>
</div>
.box {
width: 256px;
height: 256px;
border-bottom: 1px dashed #ccc;
text-align: justify;
background-color: #f9f9f9;
}
.bar {
display: inline-block;
width: 20px; height: 0;
}
/* 底對齊 */
.box:before {
content: "";
display: inline-block;
height: 100%;
}
/* 兩端對齊 */
.box:after {
content: "";
display: inline-block;
width: 100%;
}
4.2 content 字符內容生成
比如配合 @font-face 規(guī)則實現(xiàn)圖標字體效果 demo
除了 content 內容為常規(guī)字符屯断，還可以插入 Unicode 字符文虏，比較經典的是插入換行符來實現(xiàn)某些布局或效果。
::after {
content: '\A';
white-space: pre;
}
'\A'：換行符中的 LF 字符殖演，其 Unicode 編碼是 000A氧秘，在 content 中直接寫作 '\A'
'\D'：換行符中的 CR 字符，其 Unicode 編碼是 000D趴久。
實例：實現(xiàn)動態(tài) ... 加載效果 case
正在加載中<dot>...</dot>
dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
實現(xiàn)原理：插入 3 行內容丸相，分別是 3 個點、2 個點和 1 個點彼棍，然后通過 transfrom 控制垂直位置灭忠，依次展示每行內容。
偽元素使用 ::before 同時 display 設置為 block座硕，是為了在高版本瀏覽器下原來的 3 個點推到最下面弛作，不會影響 content 的 3 行內容顯示，使用 ::after 恐怕就很難實現(xiàn)华匾。
4.3 content 圖片生成
content 圖片生成指的是直接使用 URL 功能符顯示圖片映琳，URL 中的地址可以是常見的 png、jpg 格式，也可以是 ico 圖片萨西、svg 文件和 base64URL 地址有鹿，但不支持 css3 漸變背景圖。
div::before {
content: url(1.jpg);
}
4.4 content 開啟閉合符合生成
css 中有個 quotes 屬性谎脯，可以指定 open-quote close-quote 具體是什么葱跋。
case 針對不同語言指定不同的前后符號。
<p lang="ch"><q>中文</q></p>
<p lang="en"><q>This book is very good!</q></p>
<p lang="no"><q>denne bog er fantastisk!</q></p>
:lang(ch) > q {
quotes: '“' '”';
}
:lang(en) > q {
quotes: '"' '"';
}
:lang(no) > q {
quotes: '<' '>';
}
case “提問源梭、回答”
4.5 content attr 屬性值內容生成
img::after {
content: attr(alt);
}
.icon::before {
content: attr(data-title); /* 自定義屬性 */
}
4.6 content 計數(shù)器
計數(shù)器兩個屬性：counter-reset counter-increment
一個方法：counter()/counters()
-
counter-reset：計數(shù)器-重置年局，給計數(shù)器命名，順便告訴從哪個數(shù)字開始計數(shù)咸产，默認是 0. demo
.xxx {
counter-reset: name 3; /* 從 3 開始計數(shù)*/
}
.xxx::before {
content: counter(name);
}
多個計數(shù)器 demo
.xxx {
counter-reset: name1 3 name2 4; /* name1 從 3 開始計數(shù), name2 從 4 開始*/
}
.xxx::before {
content: counter(name1);
}
.xxx::after {
content: counter(name2);
}
counter-reset 還可以設置為 none 和 inherit矢否，取消重置以及繼承重置。
-
counter-increment：計數(shù)器遞增脑溢，值為counter-reset的 1 個或多個關鍵字僵朗，后面可以跟隨數(shù)字，表示每次計數(shù)的變化值屑彻。缺省為 1验庙。
counter-increment一旦出現(xiàn)，會在counter-reset初始值上增加社牲。counter()負責輸出粪薛。 -
counter()顯示計數(shù)。
counter(name)
counter(name, style)
style 即為 list-style-type 支持的值搏恤，作用是：我們遞增遞減的可以不一定是數(shù)字违寿，還可以是英文字母或羅馬文等。demo
counter() 支持級聯(lián)熟空。demo
-
counters()：嵌套計數(shù)
counters(name, style)
style 參數(shù)為字符串（需要引號包圍藤巢，必需參數(shù)），表示子序號的連接字符串息罗。例如掂咒，1.1 的 string 就是 . ，1-1 的 string 就是 - 迈喉。
要實現(xiàn)嵌套绍刮，必須讓每個列表容器擁有一個 counter-reset ，通過子輩對父輩的 counter-reset 重置挨摸、配合 counters() 方法實現(xiàn)孩革。
demo
<div class="reset">
<div class="counter">我是王小二
<div class="reset">
<div class="counter">我是王小二的大兒子</div>
<div class="counter">我是王小二的二兒子
<div class="reset">
<div class="counter">我是王小二的二兒子的大孫子</div>
<div class="counter">我是王小二的二兒子的二孫子</div>
<div class="counter">我是王小二的二兒子的小孫子</div>
</div>
</div>
<div class="counter">我是王小二的三兒子</div>
</div>
</div>
<div class="counter">我是王小三</div>
<div class="counter">我是王小四
<div class="reset">
<div class="counter">我是王小四的大兒子</div>
</div>
</div>
</div>
.reset {
padding-left: 20px;
counter-reset: wangxiaoer;
}
.counter::before {
content: counters(wangxiaoer, '-') '. ';
counter-increment: wangxiaoer;
}
顯示 content 計數(shù)值的那個 DOM 元素在文檔流中的位置一定要在 counter-increment 元素后面，否則沒有計數(shù)效果油坝。
4.7 content 內容生成的混合特性
是指 content 內容生成語法可以混合在一起使用
a::after {
content: "(" attr(href) ")";
}
q::before {
content: open-quote url(1.jpg);
}
.counter::before {
content: counters(name, '-') '. ';
}
