#### **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 界面设计注意点