【学习笔记】css定位学习和层级问题继承等相关

定位是什么

所谓定位就是定义HTML页面元素在运行时显示的位置。

img

绝对定位

  1. 如果当前元素的父级元素是``元素的话 相对于当前页面的定位
  2. 如果当前元素的父级元素不是``元素的话,父级元素没有开启定位 相对于当前页面的定位
  3. 如果当前元素的父级元素不是``元素的话,父级元素开启定位 相对于父级元素的定位
/* 
开启绝对定位
  1.当前元素脱离文档流
  2.如果不设置位置的偏移量的话,位置不会有任何变化的
*/
position: absolute;
/*设置定位的偏移量*/
top: 100px;
left: 100px;

固定定位

相对于浏览器窗口的定位

脱离文档流

相对定位

不脱离文档流

相对于自身原来的位置进行定位

堆叠

z- index属性指定了一个具有定位属性的元素及其子代元素的z -order。当元素之间重叠的时候,z-order决定哪一个 元素覆盖在其余元素的上方显示。通常 来说z -index属性值较大的元素会覆盖较小的一个。

对于一个已经定位的元素(即position属性值是非static的元素),z - index属性指定:

  1. 元素在当前堆叠上下文中的堆叠层级。
  2. 元素是否创建一个新的本地堆叠上下文

继承是什么

所谓继承,就是指该样式属性不仅可以作用在当前元素,还会继续应用在该元素的所有后代元素。

非继承属性

当一个元素使用了CSS中的非继承属性没有设置具体值时,则使用该属性的默认值。

<style>
    p{
        border:1px solid red;
    }
</style>
<p><i>111</i>111</P>

inherit值

inherit值用于显式地指定CSS样式属性的继承性,可用于继承性/非继承性属性。

body{
    color:red;
}
p{
    color:inherit;
}

层叠是什么

层叠是CSS中的一个基本特征,它定义了如何合并来自多个源的属性值的算法。对于层叠来说,共有三种主要的样式来源:

  1. 浏览器对HTML定义的默认样式。
  2. 用户定义的样式。
  3. 开发者定义的样式。

用户定义的样式表会覆盖浏览器定义的默认样式,然后网页开发者定义的样式又会覆盖用户样式。作为网页的开发者只需要关注开发者样式。

尽管CSS样式会来自这些不同的源,但它们的作用范围是重叠的,而层叠则定义了它们如何相互作用

层叠顺序

层叠决定如何找出要应用到每个文档元素的每个属性上的值。

1.首先过滤来自不同源的全部规则,并保留要应用到指定元素上的那些规则。

2.其次, 依据重要性对这些规则进行排序。层叠是按升序排列的。

3.假如层叠顺序相等, 则使用哪个值取决于优先级别。

<style>
    div#test span{
        color:green
    }
    span{
        color:red
    }
    div span{
        color:blue
    }
</style>
<div id='test'>
    <span>111</span>
</div>

!important规则

当在一个样式声明中使用一个!impor tant规则时,此声明将覆盖任何其他声明。

建议:

上一篇

【前端学习】HTML5-API和表单相关操作