1、说一说CSS中link和@import的区别

1）link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等。@import是CSS提供的语法规则。

2）加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载。

3）兼容性问题。link标签作为HTML元素，不存在兼容性问题。而@import是 CSS2.1 才有的语法，老的浏览器不支持。

4）DOM修改。当时用JS控制DOM去改变样式的时候，只能使用link标签，无法使用@import来控制的（不支持）。

2、对CSS盒子模型的理解

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin。

盒子模型

content：即实际内容，显示文本和图像。

boreder：即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成。

padding：即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响。

margin：即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域。

在CSS中，盒子模型可以分成：

1）W3C 标准盒子模型

默认情况下，盒子模型为W3C 标准盒子模型

盒子总宽度 = width + padding + border + margin;

盒子总高度 = height + padding + border + margin。

也就是，width/height 只是内容高度，不包含 padding 和 border值。

2）IE 怪异盒子模型

s

盒子总宽度 = width + margin;

盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值。

Box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度。

box-sizing: content-box | border-box | inherit；

content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致；

border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致；

inherit 指定 box-sizing 属性的值，应该从父元素继承。

3、CSS选择器

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

css属性选择器常用的有：

1）id选择器（#box）：选择id为box的元素；

2）类选择器（.one）：选择类名为one的所有元素；

3）标签选择器（div）：选择标签为div的所有元素；

4）后代选择器（#box div）：选择id为box元素内部所有的div元素；

5）子选择器（.one>one_1）：选择父元素为.one的所有.one_1的元素；

6）相邻同胞选择器（.one+.two）：选择紧接在.one之后的所有.two元素；

7）群组选择器（div,p）：选择div、p的所有元素。

8）伪类选择器

a、:link ：选择未被访问的链接；

b、:visited ：选取已被访问的链接；

c、:active ：选择活动链接；

d、:hover ：鼠标指针浮动在上面的元素；

e、:focus ：选择具有焦点的；

f、:first-child ：父元素的首个子元素。

9）伪元素选择器

a、:first-letter ：用于选取指定选择器的首字母；

b、:first-line ：选取指定选择器的首行；

c、:before : 选择器在被选元素的内容前面插入内容；

d、:after : 选择器在被选元素的内容后面插入内容。

10）属性选择器

a、[attribute]  ：选择带有attribute属性的元素；

b、[attribute=value]  ：选择所有使用attribute=value的元素；

c、[attribute~=value] ： 选择attribute属性包含value的元素；

d、[attribute|=value] ：选择attribute属性以value开头的元素。

CSS选择器的优先级：内联 > ID选择器 > 类选择器 > 标签选择器

继承属性

继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性。关于继承属性，可以分成：

1）字体系列属性

font:组合字体

font-family:规定元素的字体系列

font-weight:设置字体的粗细

font-size:设置字体的尺寸

font-style:定义字体的风格

font-variant:偏大或偏小的字体

2）文本系列属性

text-indent：文本缩进

text-align：文本水平

line-height：行高

word-spacing：增加或减少单词间的空白

letter-spacing：增加或减少字符间的空白

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3）元素可见性

visibility

4）表格布局属性

caption-side：定位表格标题位置

border-collapse：合并表格边框

border-spacing：设置相邻单元格的边框间的距离

empty-cells：单元格的边框的出现与消失

table-layout：表格的宽度由什么决定

5）列表属性

list-style-type：文字前面的小点点样式

list-style-position：小点点位置

list-style：以上的属性可通过这属性集合

注意：a 标签的字体颜色不能被继承

h1-h6标签字体的大下也是不能被继承的

无继承的属性

1）display

2）文本属性：vertical-align、text-decoration

3）盒子模型的属性：宽度、高度、内外边距、边框等

4）背景属性：背景图片、颜色、位置等

5）定位属性：浮动、清除浮动、定位position等

6）生成内容属性：content、counter-reset、counter-increment

7）轮廓样式属性：outline-style、outline-width、outline-color、outline

8）页面样式属性：size、page-break-before、page-break-after

4、隐藏页面元素的方式

通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的。但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法。

1）display:none

将元素设置为display:none后，元素在页面上将彻底消失。元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘，消失后，自身绑定的事件不会触发，也不会有过渡效果。

特点：元素不可见，不占据空间，无法响应点击事件。

2）visibility:hidden

将元素设置visibility:hidden后，从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘。

特点：元素不可见，占据页面空间，无法响应点击事件。

3）opacity:0

opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，不会引发重排，一般情况下也会引发重绘。由于其仍然是存在于页面上的，所以他自身的的事件仍然是可以触发的，但被他遮挡的元素是不能触发其事件的。

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。

4）设置height、width属性为0

将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素。

特点：元素不可见，不占据页面空间，无法响应点击事件。

5）position:absolute

将元素移出可视区域。

特点：元素不可见，不影响页面布局

6）clip-path

通过裁剪的形式。

特点：元素不可见，占据页面空间，无法响应点击事件。

区别

5、CSS如何阻塞文档解析

理论上，既然样式表不改变DOM树，也没必要停下文档解析来等待它们，然而，存在一些问题，JavaScript脚本执行时可能在文档的解析过程中请求样式信息，如果样式没有解析和加载，脚本执行将得到错误值，显然这会出现很多问题。

所以如果浏览器尚未完成

CSSOM 的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM

的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。

6、如何优化渲染路径

a、最大限度减少：关键资源的数量；关键路径的长度；关键字节数的数量。

b、关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小；

c、关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响：某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多。

d、浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，我们可以减少资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。

优化关键渲染路径的常规步骤如下：

1）对关键路径进行分析和特性描述：资源数、字节数、长度。

2）最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。

3）优化关键字节数以缩短下载时间（往返次数）。

4）优化其余关键资源的加载顺序：您需要尽早下载所有关键资产，以缩短关键路径长度。

浏览器解析渲染机制如下所示：

a、解析HTML，生成DOM树，解析CSS，生成CSSOM树。

b、将DOM树和CSSOM树结合，生成渲染树(Render Tree)。

c、Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）。

d、Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

e、Display:将像素发送给GPU，展示在页面上。

7、什么是重绘和回流

在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘。

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置。

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。

当渲染树的一部分因为元素的规模尺寸、布局、隐藏等改变需要重新构建的操作，会影响布局的操作。

重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制。

当渲染树的一些元素只需更新属性，而这些属性只会影响元素的外观，而不影响布局的操作。浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘。

回流触发时机

任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。

1）添加或者删除可见的 DOM 元素；

2）元素的位置发生变化，元素尺寸改变（边距、填充、边框、宽度和高度）；

3）内容变化。比如文本变化（用户在 input 框中输入文字）、图片被另一个不同尺寸的图片所替代；

4）浏览器窗口尺寸改变。如resize事件发生时。

5）获取一些特定属性的值。offsetTop、offsetLeft、

offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeigh。这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流。

6）当你修改网页的默认字体时。

常见的回流：

重绘触发时机

回流必定会发生重绘，重绘不一定会引发回流。

常见的重绘：

如何减少回流呢？

1）使用 transform 替代 top

2）不要把节点的属性值放在一个循环里当成循环里的变量。

3）避免使用 table 布局，可能table 中每个元素的大小以及内容的改动会造成整个 table 的重新布局。

4）对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响

5）把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM。我们还可以通过通过设置元素属性display: none，将其从页面上去掉，然后再进行后续操作，这些后续操作也不会触发回流与重绘，这个过程称为离线操作。

6）如果想设定元素的样式，通过改变元素的 class 类名。不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。

8、对BFC的理解

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域。目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

并且有一套属于自己的渲染规则：

a、内部的盒子会在垂直方向上一个接一个的放置；

b、对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关；

c、每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此；

d、BFC的区域不会与float的元素区域重叠；

e、计算BFC的高度时，浮动子元素也参与计算；

f、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

触发BFC的条件包含不限于：

a、根元素，即HTML元素；

b、浮动元素float属性不为none。为left、right；

c、overflow值不为 visible，为 auto、scroll、hidden；

d、display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid；

e、position的值为absolute或fixed。

应用场景

1）防止margin重叠（塌陷）

同一个BFC的俩个相邻的盒子的margin会发生重叠。（满足b条件）

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个p的margin为80的话，两个p元素之间的距离还是100，以最大的为准。

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠。

2）清除内部浮动

BFC在计算高度时，浮动元素也会参与。当我们对parent进行清除浮动的时候，我们可以触发这个父元素.par生成BFC，那么在计算这个高度的同事，内部的浮动元素也会参与计算。（满足e条件）

3）自适应多栏布局

每个元素的左外边距与包含块的左边界相接触。虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触。（满足c条件）

可以通过触发main生成BFC，以此适应两栏布局。

9、块级元素和内联元素

块级元素是指单独撑满一行的元素，如div、ul、li、table、p、h1等元素。这些元素的display值默认是block、table、list-item等。

内联元素又叫行内元素，指只占据它对应标签的边框所包含的空间的元素，这些元素如果父元素宽度足够则并排在一行显示的，如span、a、em、i、img、td等。这些元素的display值默认是inline、inline-block、inline-table、table-cell等。

我们经常把display计算值为inline inline-block inline-table table-cell的元素叫做内联元素，而把display计算值为block的元素叫做块级元素。

width、height的默认值都是auto。

对于块级元素，width: auto的自动撑满一行。

对于内联元素，width: auto则呈现出包裹性，即由子元素的宽度决定。

无论内联元素还是块级元素，height: auto都是呈现包裹性，即高度由子级元素撑开。但是父元素设置height: auto会导致子元素height: 100%百分比失效。