需要了解的3個CSS技巧

各種瀏覽器之間的競爭意味着越來越多的人現在開始使用那些支持最新,最先進的W3C Web標準的設備,這意味着我們可以使用更強大,更靈活的CSS代碼。

1.在CSS中用attr()顯示HTML屬性值

attr()功能早在CSS 2.1標準中就已經出現,它能通過CSS獲取到html上的屬性,在很多情況下都能幫你省去了以往需要Javascript處理的過程。

exp: 要想使用這個功能,你需要用到三種元素:一個:before或:afterCSS僞類樣式,.content屬性,和一個帶有HTML屬性名稱的attr()表達式。

h3:before {
    content: attr(data-id) " ";
}
<h3 data-id="1">This is a h3</h3>

Tips:在新版的CSS3標準中,attr()功能被擴展,可以用在各種CSS標記中。

2.使用counter()在列表中自動添加序號

使用它,你能方便的在頁面標題,區塊和其它各種連續出現的頁面內容上添加序號。有了它,你就不必限制於只能使用<ol>來實現這個效果,你可以更靈活的在頁面上使用自定義數字序列。

exp:

body {
	counter-reset: choose;
}
h4:before {
	counter-increment: choose;
	content: "Choose #" counter(choose) "."; 
}

3.使用calc()做算術

這個函數可以執行簡單的算術計算,例如計算元素的長寬,不用寫JS代碼。這個函數支持所有簡單的基本算術運算,包括加減乘除。

exp:

.parent {
	width: 100%;
	position: relative;
}

.child {
	position: absolute;
	left: 100px;
	width: calc(90% - 100px);
}

結語:我們可以發現,CSS這幾個技巧可以幫助我們少些JS代碼,極大的簡化了前端的工作。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章