渲染、层叠上下文、继承、BFC、盒模型

Nicey
193 阅读4分钟

浏览器渲染原理

步骤

  1. 根据HTML构建HTML树（DOM树）
  2. 根据CSS构建CSS树（CSS树）
  3. 两棵树合并成一颗渲染树（render tree）
  4. 回流reflow布局（文档流、盒模型、大小、位置、激活css伪类，页面和几何信息发生变化时）
  5. 重绘repaint（将边框颜色、文字颜色、阴影画出来）（例如：color、background-color、visibility等）
  6. 合成compose

回流reflow一定重绘repaint，重绘不一定回流，重绘可以单独出现

减少回流和重绘

  • 用 transform 替代 top
  • 用 visibility（只重绘） 替换 display: none（改变了布局，回流+重绘）
  • 不把节点的属性值放在循环里当成循环里的变量。
  • 不用 table 布局，小改动会造成整个 table 的重新布局
  • 动画实现的速度的选择，动画速度越快，回流次数越多，可以使用 requestAnimationFrame代替setTimeout和setInterval
  • CSS 选择符从右往左匹配查找，避免节点层级过多
  • 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。

层叠上下文

形成

  1. 文档根元素（）

  2. 绝对定位或相对定位且z-index值不为 auto 的元素

  3. position值为 fixed（固定定位）或 sticky（粘滞定位）的元素

  4. flex 容器或grid 容器的子元素，且z-index值不为 auto

  5. opacity属性值小于 1 的元素

  6. mix-blend-mode属性值不为 normal 的元素

  7. 以下任意属性值不为 none 的元素：

  8. isolation 属性值为 isolate 的元素

  9. will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素

  10. contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素

继承

常用不可继承属性：

  1. 宽高: height，width
  2. 最小最大宽高：max-height,min-height,max-width,min-width
  3. dispaly
  4. 文本阴影：text-shadow
  5. 背景属性：background
  6. 浮动属性：float
  7. 生成内容：content
  8. 层级属性：z-index
  9. 定位属性：position，left，right，top，bottom
  10. 盒模型属性：margin,padding,border

常用可继承属性：

  1. 字体系列属性：font-family，font-size
  2. 文本系列属性：text-indent，line-height，color
  3. 元素可见性：visibility
  4. 表格布局属性：border-style
  5. 列表布局属性：list-style list-style-type
  6. 光标属性：cursor

盒模型

标准盒模型content-box

盒子宽度 = 内容

IE盒模型border-box

盒子宽度 = 内容 + padding + border

又称为怪异盒子

如何设置

一般来说IE盒子好用一些，不设置的话就是标准盒子

/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;

BFC

什么是BFC

难以说明什么是块格式化上下文（BFC），就像色情一样定义模糊。故而可以说作用+举例子回答

作用

  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖
  • 元素里包含浮动元素时，可以清除内部浮动（原理：父元素创建了BFC后，里面的子元素即使是float也会参与高度计算）
  • 分属于不同BFC时，可以防止margin重叠

如何创建BFC?

读完MDN后，我们知道，满足其一，就是建立了一个BFC

  • 根元素（）
  • float的值不是none
  • position的值是absolute、fixed
  • display的值是inline-block、flow-root、table-cell、table-caption、flex或者inline-flex、grid或者inline-grid
  • overflow的值不是visible

接下来，让我们看几个例子吧，使我们加深对其功能的理解

例子：

  1. 自适应两栏布局

未创建BFC时还不能实现两栏布局

image.png

创建BFC后

image.png HTML代码和CSS代码：

<div class="container">
     <div class="left"></div>
     <div class="right"></div>
</div>

----------------------------------------------------------------------
.left{
  position:absolute;//创建了BFC
  width:100px;        
  height:200px;
  background-color:red;
  left:0px;
}
.right{
  position:absolute;//创建了
  height:200px;
  background-color:green;
  left:120px;
  right:0px;
}
  1. 可以阻止元素被浮动元素覆盖
  2. 清除内部浮动

父元素里面的两个浮动元素跑出来了，如果清除了内部浮动，就不会

image.png

父元素创建BFC后，可以看见内部的浮动元素被清除浮动了

image.png

HTML和CSS代码

 <div class="container">
     <div class="left"></div>
     <div class="right"></div>
 </div>
---------------------------------------------------------------------------
.container{
  border:2px solid black;
  overflow:hidden;//创建了BFC
}
.left{
  float:left;
  width:100px;
  height:200px;
  background:green;
 
}
.right{
  float:left;
  width:400px;
  height:200px;
  background:red;
}
  1. 分属于不同BFC时，可以防止margin重叠，这里举出兄弟边距重叠的例子

将上下两块元素的margin都设置为40px，我们可以发现，上下两块元素之间的边距也是40px；说明发生了边距重叠

image.png

将左边的元素创建BFC后我们可以看到，边距重叠消失了

image.png HTML和CSS代码

 <div class="container">
     <div class="left"></div>
     <div class="right"></div>
 </div>

-----------------------------------------------------------------------

.left{
  width:100px;
  height:200px;
  background:green;
  margin:40px;
  display:inline-block;//创建了BFC
}
.right{
  margin:40px;
  width:400px;
  height:200px;
  background:red;
}
avatar
文章
阅读
粉丝