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%百分比失效。
网友评论