新聞中心
[[412960]]
本文轉(zhuǎn)載自微信公眾號(hào)「微醫(yī)大前端技術(shù)」,作者陳晨。轉(zhuǎn)載本文請(qǐng)聯(lián)系微醫(yī)大前端技術(shù)公眾號(hào)。

創(chuàng)新互聯(lián)公司是一家專注于做網(wǎng)站、成都做網(wǎng)站與策劃設(shè)計(jì),晉安網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:晉安等地區(qū)。晉安做網(wǎng)站價(jià)格咨詢:18982081108
前言
在開(kāi)發(fā)中遇到類似清除浮動(dòng)、小圖標(biāo)、替換內(nèi)容等場(chǎng)景時(shí)不可避免會(huì)遇到 content 屬性,一般就是百度下解決方案,甚少細(xì)究到底,在看《CSS 世界》這本書(shū)時(shí)看了下 content 章節(jié),今天這里就詳細(xì)介紹下 content 的使用機(jī)制。
content 屬性用于與 :before 及 :after 偽元素配合使用,來(lái)插入生成內(nèi)容。使用 content 屬性插入的內(nèi)容都是匿名的可替換元素。首先我們先了解下什么是可替換元素呢?
替換元素
首先看下圖片加載:
修改了 img 的 src 屬性,導(dǎo)致顯示的圖片發(fā)生了變化。這種通過(guò)修改某個(gè)屬性值呈現(xiàn)的內(nèi)容就可以被替換的元素就稱為“替換元素”。
典型的替換元素:、
替換元素的尺寸計(jì)算規(guī)則
替換元素的尺寸計(jì)算規(guī)則有三種尺寸:
- 固有尺寸:替換內(nèi)容原本的尺寸
- HTML 尺寸:HTML 原生屬性 width 和 height
- CSS 尺寸:通過(guò) CSS 設(shè)置的寬高屬性
下面我們以 img 為例:
![]()
![]()
![]()
- .img-box {
- height: 100px;
- width: 200px;
- }
效果如下:
圖片第一張圖:默認(rèn)顯示原圖尺寸 267 * 200;
第二張圖:設(shè)置了 HTML 尺寸 width 和 height,顯示圖片 300 * 200;
第三張圖:設(shè)置了 CSS 尺寸 200 * 100。
由此可見(jiàn)尺寸顯示規(guī)則優(yōu)先級(jí)為 CSS 尺寸 > HTML 尺寸 > 固有尺寸。
替換元素和 content 是什么關(guān)系呢?
替換元素之所以為替換元素,就是因?yàn)槠鋬?nèi)容可替換,即盒模型中的 content box 可替換。CSS 的 content 屬性就用于替換內(nèi)容,也可以說(shuō),content 屬性決定了是替換元素還是非替換元素。代碼如下:
![]()
- .img-test:hover {
- content: url('../assets/test2.jpg');
- }
效果如下:
此時(shí)鼠標(biāo)懸浮的時(shí)候圖片為 ’../assets/test2.jpg‘,使用 content 屬性替換了 img 的 content box。
需要注意的是 content 屬性改變的僅僅是視覺(jué)呈現(xiàn),當(dāng)我們以右鍵或其他形式保存這張圖片的時(shí)候,所保存的還是原來(lái) src 對(duì)應(yīng)的圖片。
content 的使用場(chǎng)景
content 的定義中就提到過(guò)是和 :before 及 :after 偽元素配合使用。:before 及 :after 是最常見(jiàn)的偽元素,想必大家都不陌生。
再簡(jiǎn)單介紹下 :before 和 :after:
默認(rèn) display: inline;
必須設(shè)置 content 屬性,否則無(wú)效;
默認(rèn) user-select: none,即 :before 和 :after 的內(nèi)容無(wú)法被用戶選中;
不可通過(guò) dom 使用,就是本身不存在的頁(yè)面元素,HTML 源代碼里,找不到它們,但從視覺(jué)上,卻能看到它們的存在。
下面我們看一下主要使用場(chǎng)景:
插入字符
使用 content 插入字符一般是給空元素設(shè)置默認(rèn)值,類似 input 的 placeholder 屬性一樣,只在元素沒(méi)有內(nèi)容的時(shí)候展示,代碼如下:
有內(nèi)容的段落
- p:empty::before {
- content: '空元素內(nèi)容';
- color: red;
- }
效果如下:
輔助元素生成
此時(shí)核心點(diǎn)不在于 content 生成的內(nèi)容,而是偽元素本身。通常我們會(huì)把 content 的屬性值設(shè)置為空字符串,使用其他 CSS 代碼來(lái)生成輔助元素,或?qū)崿F(xiàn)圖形效果,或?qū)崿F(xiàn)特定布局。
圖形效果
使用 ::after 偽元素插入匿名替換元素,設(shè)置 content 為空,此元素沒(méi)有內(nèi)容,通過(guò) CSS 樣式來(lái)達(dá)到想要的圖形效果。代碼如下:
- .content-box {
- height: 100px;
- width: 200px;
- border-radius: 10px;
- position: relative;
- background: #fff;
- }
- .content-box::after {
- content: '';
- position: absolute;
- top: 100%;
- right: 16px;
- width: 4px;
- height: 16px;
- border-width: 0;
- border-right: 12px solid #fff;
- border-radius: 0 0 32px 0;
- }
效果如下:
清除浮動(dòng)
清除浮動(dòng)主要是為了解決,父元素因?yàn)樽蛹?jí)元素浮動(dòng)引起的內(nèi)部高度為 0 的問(wèn)題,代碼如下:
左 右- .clear::after {
- content: '';
- display: block;
- clear: both;
- }
上面三者缺一不可:
- content: '':通過(guò) ::after 給元素添加一個(gè)空的偽元素。
- clear: both:清除浮動(dòng),使得元素周?chē)鷥蛇叾疾桓?dòng)。
- display: block:clear 只對(duì)塊級(jí)元素生效。
通過(guò)添加元素清除浮動(dòng),觸動(dòng) BFC,使元素的高能夠自適應(yīng)子盒子的高。
圖片生成
直接用 url 功能符顯示圖片,既可以在文字前后添加圖片,又可以直接替換文字。
圖片直接替換文字,代碼如下:
文字
- .img-test {
- display: block;
- height: 20px;
- width: 20px;
- border-radius: 100%;
- content: url('../assets/test2.jpg');
- }
文字前后添加圖片,代碼如下:
- .img-test::after {
- content: url('../assets/test2.jpg');
- }
- .img-test::after {
- content: '';
- display: block;
- height: 20px;
- width: 20px;
- background: url('../assets/test2.jpg');
- }
方案一中偽元素通過(guò) content 設(shè)置圖片,圖片的尺寸不好控制,顯示圖片為原尺寸,比較模糊,一般使用方案二背景圖片的方式,可以按需設(shè)置尺寸。
attr 屬性值內(nèi)容生成
使用 attr 獲取元素屬性值達(dá)到效果,一般用于獲取 a 標(biāo)簽的連接,代碼如下:
- 百度一下,你就知道!
- .baidu-link::after {
- content: " (" attr(href) ") "
- }
效果如下:
字符內(nèi)容生成
content 字符內(nèi)容生成就是直接寫(xiě)入字符內(nèi)容,中英文都可以,比較常見(jiàn)的應(yīng)用就是配合 @font-face 規(guī)則實(shí)現(xiàn)圖標(biāo)字體效果。
@font-face 規(guī)則
@font-face 規(guī)則指定一個(gè)用于顯示文本的自定義字體;字體能從遠(yuǎn)程服務(wù)器或者用戶本地安裝的字體加載。它的屬性和字體相似,如下:
| 字體描述符 | 描述 |
|---|---|
| font-family | 必需:所指定的字體名字將會(huì)被用于 font 或 font-family 屬性 |
| src | 必需:遠(yuǎn)程字體文件位置的 url 或者用戶計(jì)算機(jī)上的字體名稱 |
| font-style | 對(duì)于 src 所指字體的樣式 |
| font-weight | 字體粗細(xì) |
| font-stretch | 定義應(yīng)如何拉伸字體 |
| unicode-range | 該字體支持 Unicode 字符的范圍 |
使用 @font-face 規(guī)則的代碼如下:
- @font-face {font-family: "iconfont";
- src: url('iconfont.eot'); /* IE9*/
- src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('iconfont.woff') format('woff'), /* chrome, firefox */
- url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
- url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
- }
查看更多- .look-more {
- font-size: 14px;
- &::after {
- font-size: 14px;
- font-family: 'iconfont';
- content: '\e6a7';
- }
- }
效果如下:
如上圖,“查看更多”后面的箭頭就是上面定義的字體圖標(biāo)。
當(dāng)然 @font-face 也有不可避免的兼容性問(wèn)題,可根據(jù)需要使用此規(guī)則,支持度如下圖:
計(jì)數(shù)器
content 的計(jì)數(shù)器是使用 CSS 代碼實(shí)現(xiàn)隨著元素?cái)?shù)目增多,數(shù)值也跟著變大的效果。功能非常強(qiáng)大、實(shí)用,且不具有可替代性。
計(jì)數(shù)器包含兩個(gè)屬性和一個(gè)方法:
counter-reset:“計(jì)數(shù)器-重置”的意思,主要作用就是給計(jì)數(shù)器起個(gè)名字。也告訴從哪個(gè)數(shù)字開(kāi)始計(jì)數(shù),默認(rèn)值是 0,值可以為負(fù)數(shù)。
- .count-test { counter-reset: counter; }
- .count-test { counter-reset: counter 2; }
- .count-test { counter-reset: counter 2 counterpre -1; }
counterincrement:“計(jì)數(shù)器遞增”的意思,值為 counter-reset 的 1 個(gè)或多個(gè)關(guān)鍵字,后面可以跟隨數(shù)字,表示每次計(jì)數(shù)的變化值,默認(rèn)變化值為 1,值可以為負(fù)數(shù)。
- counter-increment: counter;
- counter-increment: counter 2;
- counter-increment: counter 2 counterpre -1;
“普照規(guī)則”:普照源(counter-reset)唯一,每普照(counter-increment)一次,普照源增加一次計(jì)數(shù)值。
- .counter {
- counter-reset: counter 2;
- counter-increment: counter;
- }
- .counter:before {
- content: counter(counter);
- }
- .counter {
- counter-reset: counter 2;
- }
- .counter:before {
- counter-increment: counter;
- content: counter(counter);
- }
- .counter {
- counter-reset: counter 2;
- counter-increment: counter;
- }
- .counter:before {
- counter-increment: counter;
- content: counter(counter);
- }
counter()/counters():都是計(jì)數(shù)方法,顯示計(jì)數(shù),counters 用于嵌套計(jì)數(shù)。
- counter(name)
- counter(name, style)
- counters(name, string)
- counters(name, string, style)
一般用于類似目錄以及規(guī)律變化的計(jì)數(shù),下面以層級(jí)目錄為例,代碼如下:
替換元素 替換元素的尺寸計(jì)算規(guī)則 替換元素和 content 是什么關(guān)系呢? content 的使用場(chǎng)景 插入字符 輔助元素生成 圖片生成 attr 屬性值內(nèi)容生成 字符內(nèi)容生成 計(jì)數(shù)器- .reset {
- counter-reset: counter;
- }
- .counter:before {
- content: counters(counter, '.') '. ';
- counter-increment: counter;
- }
- counter 默認(rèn)值為 0,默認(rèn)遞增為 1;
- 第一個(gè) reset 下面有兩個(gè)兄弟 conter 標(biāo)簽,遞增則為 1 和 2;
- 第一個(gè) counter 下面有 reset 標(biāo)簽,嵌套了一層重置計(jì)數(shù),則有 1.1、1.2 等;
- 同理第二個(gè) counter 下面有 2.1、2.2 等。
效果如下:
總結(jié)
了解 CSS 的 content 屬性,布局有了更多的可能性,有助于日常開(kāi)發(fā)中根據(jù)需要使用一些布局小技巧,使布局簡(jiǎn)潔明了。
參考資料
https://developer.mozilla.org/zh-CN/
https://css-tricks.com/pseudo-element-roundup/
當(dāng)前名稱:CSS進(jìn)階之熟悉又陌生的Content
文章起源:http://fisionsoft.com.cn/article/cosdpsh.html


咨詢
建站咨詢
