1.calc() 函數(shù)用于動態(tài)計(jì)算長度值。

需要注意的是，運(yùn)算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；

任何長度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；

calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；

calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級規(guī)則

div1 {

｝

2. white-space

實(shí)例：

規(guī)定段落中的文本不進(jìn)行換行：

p{

｝

屬性值

normal：默認(rèn)?？瞻讜粸g覽器忽略。

pre：空白會被瀏覽器保留。其行為方式類似 HTML 中的

 標(biāo)簽。

nowrap：文本不會換行，文本會在在同一行上繼續(xù)，直到遇到

標(biāo)簽為止。

pre-wrap：保留空白符序列，但是正常地進(jìn)行換行。

pre-line：合并空白符序列，但是保留換行符。

inherit：規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

3.文本溢出顯示省略號

text-overflow:ellipsis

實(shí)例：

div{

｝

4.偽元素before、after

content屬性

::before和::after必須配合content屬性來使用，content用來定義插入的內(nèi)容，content必須有值，至少是空。默認(rèn)情況下，偽類元素的display是默認(rèn)值inline，可以通過設(shè)置display:block來改變其顯示。

content可取以下值

1.字符串[“可以是符號什么的也可以是單純的字符” ,支持unicode編碼!!]

2.屬性[attr() , 可以獲取標(biāo)簽上的元素屬性,比如data-*的自定義屬性,title,alt這些]

3.引用媒體文件[url ,可以鏈接圖片作為背景圖什么的]

4.計(jì)數(shù)器[counter() …. 這個我基本沒用過,也不在此處說,可能用的地方比較少,我還沒看到過]

靈活運(yùn)用這兩個可以做好多東東,比如清除浮動,各種額外的視覺效果[陰影,跳轉(zhuǎn)等]

5.a標(biāo)簽的偽類

:link? ? ? ? 有鏈接屬性時

:visited? ? 鏈接地址已被訪問過

:active? ? 被用戶激活(在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件)

:hover? ? ? 其鼠標(biāo)懸停

寫樣式的順訊為愛恨分明原則: l v h a

原因

第一：不管什么情況下鼠標(biāo)懸停都應(yīng)該有一個樣式變化（:hover）,我們就把hover放在最后，防止具備其他狀態(tài)時，被其他狀態(tài)的設(shè)置覆蓋掉。

第二：當(dāng)a被激活時(:active)，我們要求不管是否訪問過，都應(yīng)該有相同的樣式，也就是這個狀態(tài)的效果應(yīng)該能夠覆蓋未被訪問時(:link)與 已訪問過(:visited)兩種狀態(tài)。應(yīng)該放在 :link :hover的后面。

第三：被訪問過的a（:visited）可能會有不一樣的樣式屬性，用來區(qū)別a是否被訪問過。也就是說:visited 狀態(tài)的屬性可以覆蓋掉:link狀態(tài)的屬性， 即 :visited 要放在 :link 的后面