css属性计算、包含块、层叠上下文

CSS包含块

CSS属性计算过程

1》确定声明值

2》层叠

important的优先级最高

行内样式表：行内样式-style属性

内部样式与外部样式：比较选择器的权重，选择器权重一样则是考虑解析先后，后面的覆盖前面的

3》继承

对与前面连个步骤之后仍然没有属性值的属性，如果可以继承，则使用继承值

可以继承的样式有哪些？

主要是一些与文字相关的样式：color、fongt-size、font-weight、line-height、text-align、 text-indent、text-align、text-decoration、letter-spacing、word-spacing等

4》使用默认样式

浏览器默认样式表

包含块

在 CSS2.1 中，很多框的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，被称作是包含块( containing block )

1》初始包含块

页面中的根元素所存在的包含块，被称为初始包含块（绝大部分浏览器都是html）

2》如果元素position是relative或static

包含块规则：离它最近的块容器的内容区域（content area），是不包含padding的

    <div class="dad">
      <div class="child"></div>
    </div>

      .dad {
        height: 100%;
        width: 100%;
        padding: 200px;
      }

      .child {
        width: 50%;
        height: 50%;
        background-color: skyblue;
      }

3》如果元素使用了absolute绝对定位

包含块为离它最近的position值不为static的祖先元素的内边距区域（包含padding），如果都是静态定位，那初始包含块就是它的包含块

4》如果元素使用了fixed固定定位

包含块为可视窗口，这里的可视窗口是指浏览器正常的window视窗，当然这个视窗可以人为的缩放

包含块与百分比

元素的宽高的百分比和定位的百分比都是通过包含块来计算的；padding和margin的百分比也是

CSS层叠上下文

基本概念理解

提到层叠上下文，一般首先想到的就是z-index，当我们父元素定位不是静态定位static时，我们给子元素设置z-index就可以修改它展示的层级

将页面想象成一个立体的，沿着z轴（视线）一层一层摆放，层叠上下文就是按照顺序摆放的结果

层叠上下文的元素

• 根元素
• position为相对定位relative、绝对定位absolute且z-index不为auto的元素
• positon为固定定位fixed、粘性定位sticky
• 元素z-index不为auto，且父元素为flex、grid布局的元素
• opacity小于1的元素
• 以下任意属性值不为none的元素：
  • transform
  • filter
  • backdrop-filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• 元素的 isolation 值是 isolate
• will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元

层叠顺序

元素再z轴上的展示顺序

1. 背景和边框：形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
2. 负z-index值：层叠上下文内有着负z-index值的子元素。
3. 块级盒：文档流中非行内非定位子元素。
4. 浮动盒：非定位浮动元素。
5. 行内盒：文档流中行内级别非定位子元素。
6. z-index: 0：定位元素。 这些元素形成了新的层叠上下文。
7. 正z-index值：定位元素。 层叠上下文中的最高等级。