本篇內(nèi)容介紹了“CSS繼承的知識點有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站建設、做網(wǎng)站與策劃設計,羅定網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設10余年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:羅定等地區(qū)。羅定做網(wǎng)站價格咨詢:028-86922220

屬性的是否默認繼承

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

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

當沒有指定值時，默認繼承的屬性取父元素的同屬性的計算值（相當于設置了 inherit ），默認不繼承的屬性取屬性的初始值（時相當于設置了 initial ）。

默認繼承的 （"Inherited: Yes"） 的屬性：

所有元素默認繼承：visibility、cursor

內(nèi)聯(liá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

塊狀元素默認繼承：text-indent、text-align

列表元素默認繼承：list-style、list-style-type、list-style-position、list-style-image

表格元素默認繼承：border-collapse

默認不繼承的（"Inherited: No"） 的屬性：

文本屬性默認不繼承：vertical-align、text-decoration、text-shadow、white-space、unicode-bidi

盒子屬性默認不繼承：display、width、height、padding、margin、border、min-width、min-height、max-width、max-height、overflow、clip

背景屬性默認不繼承：background、background-color、background-image、background-repeat、background-position、background-attachment

定位屬性默認不繼承：float、clear、position、top、right、bottom、left、z-index

內(nèi)容屬性默認不繼承：content、counter-reset、counter-increment

輪廓屬性默認不繼承：outline-style、outline-width、outline-color、outline

頁面屬性默認不繼承：size、page-break-before、page-break-after

聲音屬性默認不繼承：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

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

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

通用屬性值 initial、inherit 和 unset

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

inherit

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

initial

將屬性的初始值應用于元素。實際上，就是“重置為默認值”。

unset

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

實例

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

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

div::after {

content: "";

position: absolute;

top: 100%;

left: 0;

right: 0;

bottom: -100%;

background-image: inherit; // 背景圖片繼承，這一般人想不到吧…

transform: rotateX（180deg）;

}

利用 initial 重置 left 為默認值 auto：地址

div {

position: absolute;

left: 20px;

top: 20px;

}

div + div {

left: initial;

right: 20px;

}

例子中 div 設置過了 left ，div2 的 right 若要生效，須將 left 重置為初始值 initial （或者 unset）。

利用 unset 將屬性重置為未設置之前的值：地址

例子中 p 標簽的 color 是默認繼承屬性，所以此時 color: unset 相當于 color: inherit 。 p 標簽的 border 屬性是默認不繼承屬性，所以此時 border: unset 相當于 border: initial 。

unset {

border: unset;

color: unset;

}

“CSS繼承的知識點有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當前標題：CSS繼承的知識點有哪些
標題網(wǎng)址：http://jinyejixie.com/article26/gpspjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、品牌網(wǎng)站建設、全網(wǎng)營銷推廣、企業(yè)建站、App設計、網(wǎng)站導航

廣告

聲明：本網(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)