css中的content: "." 有什么用？為什么要用他？
發(fā)布時間：2014-05-13 16:55:02 作者：佚名 
我要評論
我要評論有一個DIV作為外部容器，內(nèi)部的DIV如果設(shè)置了float樣式，則外部的容器DIV導(dǎo)致不能被撐開，在應(yīng)用clearfix的元素的結(jié)尾添加content中的內(nèi)容，就達(dá)到了撐開容器的目的
這段代碼中的content: ".";有什么用，解決了什么問題，為什么要用他？
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
1--
在寫HTML代碼的時候，發(fā)現(xiàn)在Firefox等符合W3C標(biāo)準(zhǔn)的瀏覽器中，如果有一個DIV作為外部容器，內(nèi)部的DIV如果設(shè)置了float樣式，則外部的容器DIV因為內(nèi)部沒有clear，導(dǎo)致不能被撐開。
這個clearfix的CSS使用了after這個偽對象，它將在應(yīng)用clearfix的元素的結(jié)尾添加content中的內(nèi)容。在這里添加了一個句號"."，并且把它的display設(shè)置成block；高度設(shè)為0；clear設(shè)為both；visibility設(shè)為隱藏。這樣就達(dá)到了撐開容器的目的啦。
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)
:
使用已命名的計數(shù)器
counter(name, list-style-type)
:
使用已命名的計數(shù)器并遵從指定的 list-style-type 屬性
counters(name, string)
:
使用所有已命名的計數(shù)器
counters(name, string,
list-style-type)
:
使用所有已命名的計數(shù)器并遵從指定的 list-style-type 屬性
no-close-quote
:
并不插入 quotes 屬性的后標(biāo)記。但增加其嵌套級別
no-open-quote
:
并不插入 quotes 屬性的前標(biāo)記。但減少其嵌套級別
close-quote
:
插入 quotes 屬性的后標(biāo)記
open-quote
:
插入 quotes 屬性的前標(biāo)記
string
:
使用用引號括起的字符串
url(url)
:
使用指定的絕對或相對 url 地址 說明：用來和 :after 及 :before 偽元素一起使用，在對象前或后顯示內(nèi)容。對應(yīng)的腳本特性為 content 。示例：
p:after { content: url("http:www.devguru.com");
text-decoration: none; }
p:before { content: url("beep.wav") }
你所問的問題：根據(jù)語法，應(yīng)該屬于取 “ string : 使用用引號括起的字符串 ”應(yīng)該意思就是 在.clearfix對象之后顯示 . 這個字符吧
復(fù)制代碼
代碼如下:.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
1--
在寫HTML代碼的時候，發(fā)現(xiàn)在Firefox等符合W3C標(biāo)準(zhǔn)的瀏覽器中，如果有一個DIV作為外部容器，內(nèi)部的DIV如果設(shè)置了float樣式，則外部的容器DIV因為內(nèi)部沒有clear，導(dǎo)致不能被撐開。
這個clearfix的CSS使用了after這個偽對象，它將在應(yīng)用clearfix的元素的結(jié)尾添加content中的內(nèi)容。在這里添加了一個句號"."，并且把它的display設(shè)置成block；高度設(shè)為0；clear設(shè)為both；visibility設(shè)為隱藏。這樣就達(dá)到了撐開容器的目的啦。
2--
content的語法倒是很少用，剛剛查了下資料：
語法：
復(fù)制代碼
代碼如下: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)
取值：
復(fù)制代碼
代碼如下:attr(alt)
:
使用對象的 alt 屬性的文字
復(fù)制代碼
代碼如下:counter(name)
:
使用已命名的計數(shù)器
復(fù)制代碼
代碼如下:counter(name, list-style-type)
:
使用已命名的計數(shù)器并遵從指定的 list-style-type 屬性
復(fù)制代碼
代碼如下:counters(name, string)
:
使用所有已命名的計數(shù)器
復(fù)制代碼
代碼如下:counters(name, string,
list-style-type)
:
使用所有已命名的計數(shù)器并遵從指定的 list-style-type 屬性
復(fù)制代碼
代碼如下:no-close-quote
:
并不插入 quotes 屬性的后標(biāo)記。但增加其嵌套級別
復(fù)制代碼
代碼如下:no-open-quote
:
并不插入 quotes 屬性的前標(biāo)記。但減少其嵌套級別
復(fù)制代碼
代碼如下:close-quote
:
插入 quotes 屬性的后標(biāo)記
復(fù)制代碼
代碼如下:open-quote
:
插入 quotes 屬性的前標(biāo)記
復(fù)制代碼
代碼如下:string
:
使用用引號括起的字符串
復(fù)制代碼
代碼如下:url(url)
:
使用指定的絕對或相對 url 地址 說明：用來和 :after 及 :before 偽元素一起使用，在對象前或后顯示內(nèi)容。對應(yīng)的腳本特性為 content 。示例：
復(fù)制代碼
代碼如下:p:after { content: url("http:www.devguru.com");
text-decoration: none; }
p:before { content: url("beep.wav") }
你所問的問題：根據(jù)語法，應(yīng)該屬于取 “ string : 使用用引號括起的字符串 ”應(yīng)該意思就是 在.clearfix對象之后顯示 . 這個字符吧
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性，用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26
