CSS面试考点准备

时间:2021-6-12 作者:qvyue

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。

CSS面试考点准备
盒子模型

content:即实际内容,显示文本和图像。

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

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

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

在CSS中,盒子模型可以分成:

1)W3C 标准盒子模型

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

CSS面试考点准备

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

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

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

2)IE 怪异盒子模型

CSS面试考点准备
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

通过裁剪的形式。

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

区别

CSS面试考点准备

5、CSS如何阻塞文档解析

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

所以如果浏览器尚未完成

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

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

6、如何优化渲染路径

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

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

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

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

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

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

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

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

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

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

CSS面试考点准备

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)当你修改网页的默认字体时。

常见的回流:

CSS面试考点准备

重绘触发时机

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

常见的重绘:

CSS面试考点准备

如何减少回流呢?

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条件)

CSS面试考点准备

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

CSS面试考点准备

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

CSS面试考点准备
CSS面试考点准备

2)清除内部浮动

CSS面试考点准备
CSS面试考点准备

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

CSS面试考点准备
CSS面试考点准备

3)自适应多栏布局

CSS面试考点准备
CSS面试考点准备

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

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

CSS面试考点准备
CSS面试考点准备
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。