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的


    
.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值:定位元素。 层叠上下文中的最高等级。

你可能感兴趣的:(杂乱分类(html,css为主),css,前端)