1.CSS的color屬性并非只能用于文本顯示
對于CSS的color屬性,相信所有Web開發(fā)人員都使用過。如果你并不是一個特別有經(jīng)
驗的程序員,我相信你未必知道color屬性除了能用在文本顯示,還可以用作其它地方。它
可以把頁面上的所有的東西都變顏色。比如:
無法顯示的圖片的alt文字、 list元素的邊框、無序list元素前面的小點、有序list元素前面的數(shù)字和hr元素等
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css"> #p1 { width: 375px; height: 265px; border: 1px solid blue; } </style> </head> <body> <p id="p1"> <img src="test.jpg" alt="圖片加載失敗" style="color:blue"> <ol style="color:red;"> <li style="border: 1px solid">一</li> <li>二</li> <li>三</li> </ol> <hr style="color:red" /> </p> </body> </html>
有圖為證:
2.CSS里的visibility屬性有個collapse屬性值:collapse
對于CSS里的visibility屬性,相信你用過不下幾百次。大多時候,你會把它的值設(shè)置
成visible(這是所有頁面元素的缺省值),或者是hidden。后者相當(dāng)于display: none,但仍
然占用頁面空間。其實visibility可以有第三種值,就是collapse。
3.CSS的background簡寫方式里新增了新的屬性值
在CSS2.1里,background屬性的簡寫方式包含五種屬性值 – background-color, background-
image,background-repeat, background-attachment, and background-position。從CSS3開始,又增加了3個新的屬性值,加起來一共8個。下面是按順序分別代表的意思:
background: [background-color] [background-image] [background-repeat] [background-attachment]
[background-position] / [ background-size] [background-origin] [background-clip];注意里面的反斜杠,它
更font和border-radius里簡寫方式使用的反斜杠的用法相似。反斜杠可以在支持這種寫法的瀏覽器里在
position后面接著寫background-size。除此之外,你開可以增加另外兩個描述它的屬性值: background-
origin 和 background-clip.它的語法用起來像下面這個樣子:
.example { background: aquamarine url(img.png) no-repeat scroll center center / 50% content-box content-box; }
4.CSS的clip屬性只在絕對定位的元素上才會生效
在style中加入
img { width: 200px; height: 200px; clip: rect(0px 50px 200px 0px) }
在HTML中
1: <img src="bei.jpg" alt="圖片加載失敗" >
發(fā)現(xiàn)并沒有裁剪
對img進(jìn)行絕對定位
img { width: 200px; height: 200px; position: absolute; clip: rect(0px 50px 200px 0px) }
clip有效:
5.元素豎向的百分比設(shè)定是相對于容器的寬度,而不是高度
當(dāng) 按百分比設(shè)定一個元素的寬度時,它是相對于父容器的寬度計算的,但是,對于一些表示豎向距離的屬性,例如padding-top,padding- bottom,margin-top,margin-bottom等,當(dāng)按百分比設(shè)定它們時,依據(jù)的也是父容器的寬度,而不是高度。給圖片增加一個 padding-top:
1: padding-top: 10%;
根據(jù)效果和估算的距離即可證明是根據(jù)寬度來算的
6.border-width屬性可以使用預(yù)定義常量值
除了可以使用標(biāo)準(zhǔn)寬度值(例如5px或1em)外,border-width屬性可以接受預(yù)定義的常量值:medium, thin, 和 thick事實上,如果你不給border-width屬性賦值,那它的缺省值是“medium”。
7、你知道table里的empty-cells屬性嗎?
css里的empty-cells屬性是所有瀏覽器都支持的,甚至包括IE8,它的用法是下面這個樣子:
1: table { empty-cells: hide;}
估計你從語義上已經(jīng)猜出它的作用了。它是為HTML table服務(wù)的。它會告訴瀏覽器,當(dāng)一個table單元格里沒有東西時,就隱藏它。
但是,empty-cells僅用于“分離邊框”模式,即:border-collapse:separate;
8、font-style的oblique屬性值
對與css的font-style屬性,我估計大家每次見到的都是使用“normal”或 “italic”兩個屬性值。但事實上,你還可以讓它賦值為“oblique”。
9、word-wrap和overflow-wrap是等效的
word-wrap并不是一個很常用的CSS屬性,但在特定的環(huán)境中確實非常有用的。我們經(jīng)常使用的一個例子是讓頁面中顯示一個長url時換行,而不是撐破頁面。在原本的p中添加一個子p,設(shè)置word-wrap屬性
<p style="width:250px;height:250px;border:1px solid red;word-wrap:break-word"> My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, </p>
效果
沒有對長單詞進(jìn)行裁剪,而是將長單詞作為整體另起一行顯示。將word-wrap替換為overflow-wrap,效果一樣。
但是,需要注意的是word-break屬性,其會對長單詞進(jìn)行裁剪
<p style="width:250px;height:250px;border:1px solid red;word-break:break-all"> My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, </p>
效果
附:word-wrap取值:
word-break取值:
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com