這次帶給大家css中屬性值繼承如何使用，使用css中屬性值繼承的注意事項有哪些，以下就是實戰案例，一起來看一下。
繼承：html元素可以從父元素繼承一部分css屬性，即使目前元素沒有定義該屬性。
1.css可以和不可以繼承的屬性
不可繼承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break- after、page-bread-before和unicode-bidi。
所有元素可繼承：visibility和cursor。
內嵌元素可繼承：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。
2.值的繼承
繼承也是基於文檔樹的，文檔樹中元素的某些屬性可以被其子元素繼承，每一個CSS屬性都定義了它能否被繼承。要設定文件的某些預設樣式屬性，可以在文件樹的根上設定該屬性，如果這個屬性可以繼承，則其後代元素將繼承這個屬性，例如color、font-size等屬性。
3.“inherit（繼承）”值
每一個屬性可以指定值為“inherit”，即：對於給定的元素，該屬性和它父元素相對屬性的計算值會取一樣的值。繼承值通常只用作後備值，它可以透過明確地指定「inherit」而得到加強，例如：
p { font-size: inherit; }
4.繼承的限制
繼承雖然減少了重複定義的麻煩，但是，有些屬性是不能繼承的，例如border（邊框）、margin（邊距）、 padding（補白）和背景等。
這樣設定是有道理的，例如，為一個
設定了邊框，如果此屬性也繼承的話，那麼在這個
內所有的元素都會有邊框，這無疑會產生一個讓人眼花撩亂的結果。同樣的，影響元素位置的屬性，例如margin（邊距）和padding（補白），也不會被繼承。
同時，瀏覽器的預設樣式也在影響著繼承的結果。例如：
body { font-size: 12px; }
2級標題的文字不是12px。
// H2中文字將是標題2樣式的文字而非12px大小的文字。
這是因為瀏覽器的預設樣式設定了
的CSS規則。
同時，有些舊版的瀏覽器可能對繼承支援的不太好，例如某些瀏覽器當遇到
的時候，就會遺失所有的繼承的屬性
5.能否取消
css屬性一旦繼承了不能被取消，只能重新定義樣式。
6.案例
父元素position:relative 子元素：position:absolute 父元素寬度固定，子元素會繼承父元素的寬度（對於二級導航很重要，當隱藏的那個導航列寬度不固定，或寬度大於父元素時，此時一般只能重新設定子元素的寬度）
走岔了，就退回來；走得急，就緩一些。不時停下來想想，望一望，琢磨琢磨，再繼續走。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
css3的Transition平滑過渡選單列實作
css如何做出0.5像素的線條
以上是css中屬性值繼承如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
See all articles
