CSS繼承的知識(shí)點(diǎn)有哪些

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

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

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

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

　　當(dāng)沒(méi)有指定值時(shí)，默認(rèn)繼承的屬性取父元素的同屬性的計(jì)算值（相當(dāng)于設(shè)置了 inherit ），默認(rèn)不繼承的屬性取屬性的初始值（時(shí)相當(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

　　頁(yè)面屬性默認(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è)計(jì)之初就是為了更好的在網(wǎng)頁(yè)上呈現(xiàn)文字。

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

　　通用屬性值 initial、inherit 和 unset

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

　　inherit

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

　　initial

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

　　unset

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

　　實(shí)例

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

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

　　div::after {

　　content: "";

　　position: absolute;

　　top: 100%;

　　left: 0;

　　right: 0;

　　bottom: -100%;

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

　　transform: rotateX（180deg）;

　　}

　　利用 initial 重置 left 為默認(rèn)值 auto：地址

　　div {

　　position: absolute;

　　left: 20px;

　　top: 20px;

　　}

　　div + div {

　　left: initial;

　　right: 20px;

　　}

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

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

　　例子中 p 標(biāo)簽的 color 是默認(rèn)繼承屬性，所以此時(shí) color: unset 相當(dāng)于 color: inherit 。 p 標(biāo)簽的 border 屬性是默認(rèn)不繼承屬性，所以此時(shí) border: unset 相當(dāng)于 border: initial 。

　　unset {

　　border: unset;

　　color: unset;

　　}

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