前端面试知识点（CSS部分）_the specification for opacity-CSDN博客

本文链接：https://blog.csdn.net/qq_37354459/article/details/92741961

全部面试总结参考掘金 https://juejin.im/post/5c64d15d6fb9a049d37f9c20#heading-1，这里对作者整理的部分知识点作详细的描述，方便自己复习查看

CSS部分

1.盒模型

页面渲染时，dom 元素所采用的布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为

content-box (W3C 标准盒模型,box-sizing默认值)
border-box (IE 盒模型)

content-box:

标准盒子模型。 width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。比如说.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px(350px+10px+10px)。

尺寸计算公式：
width = 内容的宽度
height = 内容的高度
宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

border-box:

width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如.box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

尺寸计算公式：
width = border + padding + 内容的宽度
height = border + padding + 内容的高度

2.BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

下列方式会创建块格式化上下文：

浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 特性/作用

垂直外边距折叠（即两个div的margin都为100px,那么他们垂直距离也只有100px）
BFC 可以包含浮动的元素(float元素会脱离文档流，正常来讲父元素不会包裹为浮动元素的子元素，若设置父元素创建一个BFC，则父元素会包裹子元素，不论他是否为浮动元素，但是不会包裹绝对定位元素)
可以阻止元素被浮动元素覆盖（为不想被覆盖的元素建立BFC，则浮动元素不会覆盖该元素）

3.层叠上下文

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

触发条件：

根元素 (HTML),
z-index 值不为 "auto"的绝对/相对定位，
一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
opacity 属性值小于 1 的元素（参考 the specification for opacity），
transform 属性值不为 "none"的元素，
mix-blend-mode 属性值不为 "normal"的元素，
filter值不为“none”的元素，
perspective值不为“none”的元素，
isolation 属性被设置为 "isolate"的元素，
position: fixed
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
webkit-overflow-scrolling 属性被设置 "touch"的元素

示例（摘自MDN）

在这里插入图片描述
在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 z-index 属性。层叠上下文的层级如下：

Root
- DIV #1
- DIV #2
- DIV #3
  - DIV #4
  - DIV #5
  - DIV #6

注意 DIV#4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素作为一个整体传递给 root 元素，并相对兄弟元素层叠。

4.居中布局

水平居中

行内元素: text-align: center;
块级元素: margin-left:auto;margin-right:auto;

   //父元素 position:relative;
   position: absolute;
   left: 50%;
   transform: translate(-50%);

 display: flex;
 justify-content: center;

垂直居中

line-height: height

position: absolute;
top: 50%;
transform: translate(0%, -50%);

display: flex;
align-items: center;

display: table-cell;
vertical-align: middle;

水平垂直居中

//父元素 position:relative;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

display: flex;
justify-content: center;
align-items: center;

5.选择器优先级

继承<通配选择器(*)<类选择器(.)<ID选择器(#)<内联样式<重要规则(!important)

6.去除浮动影响

浮动元素后增加伪元素并设置clear:both
创建父级BFC
父级设置高度

7.link 与 @import 的区别

link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
@import需要 IE5 以上才能使用
link可以使用 js 动态引入，@import不行