#### **initial 默認值**
作用是把屬性設置回默認值,如之前統一設置ul,ol{list-style:none},如后面那個需要有序數字列表和無序標點列表,則只要設置:list-style:initial即可。
<br>
#### **inherit**繼承,指繼承父級的屬性
**什么是繼承 inherit?**
意思就是你在某個elements上添加了以下的css 屬性,那么這個 elements 下面的所有子元素都會繼承這個css屬性。最典型的就是 color 這個屬性
**注意:** 繼承元素外的第一層是父級,第二層及以上是祖級,如果繼承元素要繼承的css樣式,父元素是無效的,則往祖級上,繼承優先級更高的樣式。
<br>
<br>
#### **css屬性值繼承(inherit)小解**
**繼承: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。
<br>
**2.值的繼承**
<div class="text-indent">繼承也是基于文檔樹的,文檔樹中元素的某些屬性可以被其子元素繼承,每一個CSS屬性都定義了它能否被繼承。要設定文檔的某些缺省樣式屬性,可以在文檔樹的根上設定該屬性,如果這個屬性可以繼承,則其后代元素將繼承這個屬性,例如color、font-size等屬性。</div>
<br>
**3.“inherit(繼承)”值**
<div class="text-indent">每一個屬性可以指定值為“inherit”,即:對于給定的元素,該屬性和它父元素相對屬性的計算值取一樣的值。繼承值通常只用作后備值,它可以通過顯式地指定“inherit”而得到加強,例如:
p { font-size: inherit; }</div>
<br>
**4.繼承的局限性**
<div class="text-indent">繼承雖然減少了重復定義的麻煩,但是,有些屬性是不能繼承的,例如border(邊框)、margin(邊距)、padding(補白)和背景等。</div>
<div class="text-indent">這樣設定是有道理的,例如,為一個<div>設定了邊框,如果此屬性也繼承的話,那么在這個<div>內所有的元素都會有邊框,這無疑會產生一個讓人眼花繚亂的結果。同樣的,影響元素位置的屬性,例如margin(邊距)和padding(補白),也不會被繼承。</div>
<br>
<div class="text-indent">同時,瀏覽器的缺省樣式也在影響著繼承的結果。例如:
body { font-size: 12px; }
<h2>2級標題的文字不是12px。// </h2> H2中文字將是標題2樣式的文字而非12px大小的文字。</div>
<br>
<div class="text-indent">這是因為瀏覽器的缺省樣式設定了<h2>的CSS規則。
同時,有些老版本的瀏覽器可能對繼承支持的不太好,例如某些瀏覽器當遇到<table>>時候,就會丟失所有的繼承的屬性,</div>
<br>
**5.能否取消**
<div class="text-indent">css屬性一旦繼承了不能被取消,只能重新定義樣式。</div>
<br>
**6.案例**
<div class="text-indent">父元素position:relative 子元素:position:absolute 父元素寬度固定,子元素會繼承父元素的寬度(對于二級導航很重要,當隱藏的那個導航欄寬度不固定,或者寬度大于父元素時,此時一般只能重新設置子元素的寬度)</div>
- 布局
- display:table布局
- display:flex彈性布局
- html
- 1.1關于文字小技巧
- 1.2加載
- 1.3蘋果和安卓樣式兼容問題
- 1.4結構技巧
- 1.5兼容ie7,ie8技巧
- css
- 1.1內容不夠,頁面固定在底部
- 1.2 css屬性書寫順序
- 1.3font和line-height之CSS代碼書寫順序不同,導致顯示效果不一樣
- 1.4 flex設置成1和auto有什么區別
- 1.5帶三角形的對話框
- 1.6css選擇器
- 1.6.1通用兄弟選擇器E ~ F
- 1.6.2相鄰兄弟選擇器E + F
- 1.6.3 CSS3結構選擇器
- 1.6.4 屬性選擇器
- 1.6.7 class^=,class*= ,class$= 的含義
- 1.7偽類
- 1.7.1:not(s)
- 1.9inherit和 initial
- 2.0 css技巧
- css3
- 1.2 背景background
- 1.3 transform
- 1.3.1移動translate
- 1.3.2縮放scale
- 1.3.3旋轉rotate
- 1.3.4扭曲skew
- 1.4 Transition
- 1.5 animate
- 1.6 calc()
- 1.7 Gradients漸變
- 1.8 backface-visibility
- 1.9 text-size-adjust
- sass知識點
- 1.1sass寫法轉化
- 1.1.1 sass的轉換寫法
- 1.2 & 嵌套寫法
- 1.2變量
- 1.2.1 默認值
- 1.2.2 全局變量和局部變量
- 1.2.3 嵌套
- 1.2.4 偽類選擇器
- 1.2.5變量用井號花括號包裹
- 1.2.6 多個變量一起聲明
- 1.3混合宏
- 1.3.1不帶參數的混合宏
- 1.3.2傳一個不帶值的參數
- 1.3.3傳多個不帶值的參數
- 1.3.4傳一個參數的值
- 1.3.5傳多個參數的值
- 1.3.6參數變量名后面加...(省略號)
- 1.4文件導入
- 1.5繼承@extend
- 1.6占位符%
- 1.7混合宏VS繼承VS占位符
- 1.8 @media在sass中寫法
- 1.9 @content的作用
- sass基本運算
- 1.1[Sass運算]加法
- 1.2[Sass運算]減法
- 1.3[Sass運算]乘法
- 1.4[Sass運算]除法
- sass函數
- 1.1 @if函數
- 1.2for函數
- 1.3 while函數
- 1.4 each循環
- 函數
- 1.1一些函數的意思
- 1.2if else函數
- 1.3 i++和++i的區別
- 1.4for函數
- UI設計規則
- 1.1字體
- 1.2尺寸
- 1.3 注意點
- 1.4 界面設計注意點