也許你瞧不起以前的 css ，但是你不該再輕視眼下的 css 。近年來 css 的變量系統(tǒng)已逐步得到各大瀏覽器廠商支持，自定義選擇器等強勢襲來，嵌套系統(tǒng)/模塊系統(tǒng)也在路上...為了更好的掌握 css 這門語言，很有必要把之前零零散散的 css 知識回爐重造下。

10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有陸港免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

css 作為一門語言而，也有其繼承原理，雖然簡單，你卻未必掌握。

屬性的是否默認(rèn)繼承

初始值是指當(dāng)屬性沒有指定值時的默認(rèn)值，如這些語句的值都是默認(rèn)值： background-color: transparent、 left: auto 、 float: none、 width: auto 等。

css 的繼承很簡單，分為默認(rèn)繼承的和默認(rèn)不繼承的，但所有屬性都可以通過設(shè)置  inherit 實現(xiàn)繼承。

當(dāng)沒有指定值時，默認(rèn)繼承的屬性取父元素的同屬性的計算值（相當(dāng)于設(shè)置了  inherit ），默認(rèn)不繼承的屬性取屬性的初始值（時相當(dāng)于設(shè)置了  initial ）。

默認(rèn)繼承的 ("Inherited: Yes") 的屬性：

• 所有元素默認(rèn)繼承：visibility、cursor
• 內(nèi)聯(lián)元素默認(rèn)繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
• 塊狀元素默認(rèn)繼承：text-indent、text-align
• 列表元素默認(rèn)繼承：list-style、list-style-type、list-style-position、list-style-image
• 表格元素默認(rèn)繼承：border-collapse

默認(rèn)不繼承的("Inherited: No") 的屬性：

• 文本屬性默認(rèn)不繼承：vertical-align、text-decoration、text-shadow、white-space、unicode-bidi
• 盒子屬性默認(rèn)不繼承：display、width、height、padding、margin、border、min-width、min-height、max-width、max-height、overflow、clip
• 背景屬性默認(rèn)不繼承：background、background-color、background-image、background-repeat、background-position、background-attachment
• 定位屬性默認(rèn)不繼承：float、clear、position、top、right、bottom、left、z-index
• 內(nèi)容屬性默認(rèn)不繼承：content、counter-reset、counter-increment
• 輪廓屬性默認(rèn)不繼承：outline-style、outline-width、outline-color、outline
• 頁面屬性默認(rèn)不繼承：size、page-break-before、page-break-after
• 聲音屬性默認(rèn)不繼承：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

可以看到涉及到文本相關(guān)的屬性，都是默認(rèn)繼承的，畢竟 css 設(shè)計之初就是為了更好的在網(wǎng)頁上呈現(xiàn)文字。

需要注意的是，部分屬性的默認(rèn)值是會根據(jù)元素的  display 屬性的值而計算的，比如  vertical-align 屬性，如果是  display: inline 元素，則其計算值為基線對齊  vertical-align: baseline ，如果是  display: inline-block 元素，則其計算值為  vertical-align: bottom 。

通用屬性值 initial、inherit 和 unset

css 為控制繼承提供了四個特殊的通用屬性值（屬性  revert 只有很少的瀏覽器支持，所以實際上是三個），每個 css 屬性都能使用這些值。

• inherit

設(shè)置該屬性會使子元素屬性和父元素相同。實際上，就是“開啟繼承”。

• initial

將屬性的初始值應(yīng)用于元素。實際上，就是“重置為默認(rèn)值”。

• unset

將屬性重置為自然值，也就是如果屬性是自然繼承的那么就是  inherit ，否則和  initial 一樣。

實例

這些通用屬性值可以有很多妙用，舉個栗子：

1. 利用  inherit 實現(xiàn)如下圖片倒影：

名稱欄目：web前端入門到實戰(zhàn)：你真的了解CSS繼承嗎？看完必跪-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://chinadenli.net/article46/edohg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站制作、靜態(tài)網(wǎng)站、域名注冊、商城網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)