css中的content:的作用是什么

這篇文章主要介紹“css中的content:的作用是什么”，在日常操作中，相信很多人在css中的content:的作用是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css中的content:的作用是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

代碼如下:

.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

1--

在寫HTML代碼的時候，發現在Firefox等符合W3C標準的瀏覽器中，如果有一個DIV作為外部容器，內部的DIV如果設置了float樣式，則外部的容器DIV因為內部沒有clear，導致不能被撐開。
這個clearfix的CSS使用了after這個偽對象，它將在應用clearfix的元素的結尾添加content中的內容。在這里添加了一個句號"."，并且把它的display設置成block；高度設為0；clear設為both；visibility設為隱藏。這樣就達到了撐開容器的目的啦。

2--

content的語法倒是很少用，剛剛查了下資料：

語法：

代碼如下:

content : attr(alt) | counter(name) |
counter(name , list-style-type) |
counters(name , string) |
counters(name , string , list-style-type) |
no-close-quote | no-open-quote | close-quote |
open-quote | string | url(url)

取值：

代碼如下:

attr(alt)
:

使用對象的 alt 屬性的文字

代碼如下:

counter(name)
:

使用已命名的計數器

代碼如下:

counter(name, list-style-type)
:

使用已命名的計數器并遵從指定的 list-style-type 屬性

代碼如下:

counters(name, string)
:

使用所有已命名的計數器

代碼如下:

counters(name, string,
list-style-type)
:

使用所有已命名的計數器并遵從指定的 list-style-type 屬性

代碼如下:

no-close-quote
:

并不插入 quotes 屬性的后標記。但增加其嵌套級別

代碼如下:

no-open-quote
:

并不插入 quotes 屬性的前標記。但減少其嵌套級別

代碼如下:

close-quote
:

插入 quotes 屬性的后標記

代碼如下:

open-quote
:

插入 quotes 屬性的前標記

代碼如下:

string
:

使用用引號括起的字符串

代碼如下:

url(url)
:

使用指定的絕對或相對 url 地址 說明：用來和 :after 及 :before 偽元素一起使用，在對象前或后顯示內容。對應的腳本特性為 content 。示例：

代碼如下:

p:after { content: url("http:www.devguru.com");
text-decoration: none; }
p:before { content: url("beep.wav") } 

到此，關于“css中的content:的作用是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！