公司面试题总结（一）

1.说说你对盒子模型的理解，如何切换

当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，

将所有元素表示为一个个矩形的盒子

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

• boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三

部分组成

• padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒

子的 background 属性影响

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

盒子模型可以分成：

• W3C 标准盒子模型,是浏览器默认的盒子模型

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

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

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

• IE 怪异盒子模型

o 盒子总宽度 = width + margin;

o 盒子总高度 = height + margin;

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

Box-sizing

定义了引擎应该如何计算一个元素的总宽度和总高度

• content-box 默认值，元素的 width/height 不包含 padding，border，与标准盒子

模型表现一致

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

致

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

2. css 选择器有哪些？优先级？哪些属性可以继承？

css 选择器

• id 选择器（#box），选择 id 为 box 的元素

• 类选择器（.one），选择类名为 one 的所有元素

• 标签选择器（div），选择标签为 div 的所有元素

• 后代选择器（#box div），选择 id 为 box 元素内部所有的 div 元素

• 子选择器（.one>one_1），选择父元素为.one 的所有.one_1 的元素

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

• 群组选择器（div,p），选择 div、p 的所有元素 • 还有一些使用频率相对没那么多的选择器：

• 伪类选择器

o :link：选择未被访问的连接

o :visited：选取已被访问的链接

o :active：选择活动链接

o :hover：鼠标指针浮动在上面的元素

o :focus：选择具有焦点的

o :first-child：父元素的首个子元素

• 伪元素选择器

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

o :first-line ：选取指定选择器的首行

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

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

• 属性选择器

o [attribute]选择带有 attribute 属性的元素

o [attribute=value]选择所有使用 attribute=value 的元素

o [attribute~=value]选择 attribute 属性包含 value 的元素

o [attributel=value]:选择 attribute 属性以 value 开头的元素

• 在 CSS3 中新增的选择器有如下：

o 层次选择器（p~ul），选择前面有 p 元素的每个 ul 元素

o 伪类选择器

▪ :first-of-type 表示一组同级元素中其类型的第一个元素

▪ :last-of-type 表示一组同级元素中其类型的最后一个元素

▪ :only-of-type 表示没有同类型兄弟元素的元素

▪ :only-child 表示没有任何兄弟的元素

▪ :nth-child(n) 根据元素在一组同级中的位置匹配元素

▪ :nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元

素中的位置，从末尾开始计数

▪ :last-child 表示一组兄弟元素中的最后一个元素

▪ :root 设置 HTML 文档

▪ :empty 指定空的元素

▪ :enabled 选择可用元素

▪ :disabled 选择被禁用元素

▪ :checked 选择选中的元素

▪ :not(selector) 选择与 <selector> 不匹配的所有 元素

• 属性选择器

o [attribute*=value]:选择 attribute 属性值包含 value 的所有元素选择

o [attribute^=value]: attribute 属性开头为 value 的所有元素

o [attribute$=value]:选择 attribute 属性结尾为 value 的所有元素

优先级

内联 > ID 选择器 > 类选择器 > 标签选择器

• 如果存在内联样式，那么 A = 1, 否则 A = 0 • B 的值等于 ID 选择器出现的次数

• C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数

• D 的值等于 标签选择器 和 伪元素 出现的总次数

比较规则：

• 从左往右依次进行比较 ，较大者优先级更高

• 如果相等，则继续往右移动一位进行比较

• 如果 4 位全部相等，则后面的会覆盖前面的

内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important

继承属性

• 字体系列属性

o font:组合字体

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

o font-weight:设置字体的粗细

o font-size:设置字体的尺寸

o font-style:定义字体的风格

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

• 文本系列属性

o text-indent：文本缩进

o text-align：文本水平对刘

o line-height：行高

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

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

o text-transform：控制文本大小写

o direction：规定文本的书写方向

o color：文本颜色

• 元素可见性

o visibility

• 表格布局属性

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

o border-collapse：合并表格边框

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

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

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

• 列表属性

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

o list-style-position：小点点位置

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

• 引用

o quotes：设置嵌套引用的引号类型

• 光标属性

o cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

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

无继承的属性

• display

• 文本属性：vertical-align、text-decoration

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

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

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

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

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

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

3. 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

实现元素水平垂直居中的方式：

• 使用 Flexbox 布局：

o 将父容器的 display 属性设置为 flex，

o 然后使用 align-items 和 justify-content 属性分别设置为 center，

• 使用绝对定位和负边距：

o 父级设置为相对定位，子级绝对定位，

o 并将 left 和 top 属性设置为 50%，

o 然后使用负边距将子级向左和向上移动自身宽度和高度的一半

o 不要求父元素的高度

• 使用 table 布局：

o 设置父元素为 display:table-cell，

o 子元素设置 display: inline-block。

o 父元素利用 vertical 和 text-align 可以让所有的行内块级元素水平垂直居中

o vertical-align: middle；

o text-align: center

• 使用 grid 布局：

o 将父容器的 display 属性设置为 grid，

o 并使用 justify-items 和 align-items 属性分别设置为 center，

• 使用 transform 和 translate 方法：

o 不需要知道自身元素的宽高

o 父级设置为相对定位，子级绝对定位

o translate(-50%, -50%)将子级水平和垂直方向上平移自身宽度和高度的一半

• 利用定位+margin:auto

o 父级设置为相对定位，子级绝对定位

o 四个定位属性的值都设置了 0

o 如果子级没有设置宽高，则会被拉开到和父级一样宽高

o 子元素设置了宽高，实际上子级的虚拟占位已经撑满了整个父级

o margin：auto 就可以上下左右都居中

• 内联元素居中布局

o 水平居中

▪ 行内元素可设置：text-align: center

▪ flex 布局设置父元素：display: flex; justify-content: center

o 垂直居中

▪ 单行文本父元素确认高度：height === line-height

▪ 多行文本父元素确认高度：display: table-cell; vertical-align: middle

• 块级元素居中布局

o 水平居中

▪ 定宽: margin: 0 auto

▪ 绝对定位+left:50%+margin:负自身一半

o 垂直居中

▪ position: absolute 设置 left、top、margin-left、margin-top(定高)

▪ display: table-cell

▪ transform: translate(x, y)

▪ flex(不定高，不定宽)

▪ grid(不定高，不定宽)，兼容性相对比较

4. 怎么理解回流跟重绘？什么场景下会触发？如何减少回流和重回

Html 的渲染流程：dom 节点 dom 树 css 生成 OM Html 分为 dom+css

回流（重排）：获取尺寸大小 生成几何 重绘：根据像素渲染 回流一定重绘

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

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

浏览器解析渲染机制：

⚫ 解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树

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

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

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

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

回流触发时机

• 添加或删除可见的 DOM 元素

• 元素的位置发生变化

• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）

• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代

• 页面一开始渲染的时候（这避免不了）

• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

重绘触发时机

• 触发回流一定会触发重绘

• 颜色的修改

• 文本方向的修改

• 阴影的修改

减少回流和重回

• 想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)

• 避免设置多项内联样式

• 应用复杂的元素动画，使用 position 属性 fixed 值或 absolute 值

• 避免使用 table 布局，每个元素的大小以及内容的改动，导致整个 table 的重新计算

• 使用 css3 硬件加速，可以让 transform、opacity、filters 这些动画不会引起回流重绘

• 避免使用 CSS 的 JavaScript 表达式

5. 什么是响应式设计？响应式设计的基本原理是什么？如何做？

适配 rem（根元素字体大小） em（父元素字体大小）媒体查询 vw/vh（性能问题） %

响应式网站设计 是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环

境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

响应式设计的基本原理 是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，

页面头部必须有 meta 声明 viewport

属性对应：

• width=device-width: 是自适应手机屏幕的尺寸宽度

• maximum-scale:是缩放比例的最大值

• inital-scale:是缩放的初始化

• user-scalable:是用户的可以缩放的操作

实现响应式布局的方式有如下：

• 媒体查询

o 设置不同类型的媒体条件，并根据对应的条件，

o 给相应符合条件的媒体调用相对应的样式表

o 当视口在 375px - 600px 之间，设置特定字体大小 18px

@media screen (min-width: 375px) and (max-width: 600px) {

body {

font-size: 18px;

}

}

• 百分比

o 当浏览器的宽度或者高度发生变化时，通过百分比单位

o 浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果

• vw/vh

o vw 表示相对于视图窗口的宽度，

o vh 表示相对于视图窗口高度。

o 任意层级元素，在使用 vw 单位的情况下，1vw 都等于视图宽度的百分之一

• rem

o rem 是相对于根元素 html 的 font-size 属性

o 默认情况下浏览器字体大小为 16px，此时 1rem = 16px

6. 如果要做优化，CSS 提高性能的方法有哪些？

• 内联首屏关键 CSS

o 使浏览器在下载完 html 后就能立刻渲染

o 注意：较大的 css 代码并不合适内联（初始拥塞窗口、没有缓存）

• 异步加载 CSS

o 使用 javascript 将 link 标签插到 head 标签最后

o 设置 link 标签 media 属性为 noexist

        ▪ 浏览器认为当前样式表不适用当前类型，会在不阻塞页面渲染的情

        况下再进行下载。

        ▪ 加载完成后，将 media 的值设为 screen 或 all，从而让浏览器开始解

        析 CSS

o 通过 rel 属性将 link 元素标记为 alternate 可选样式表，

        ▪ 加载完成之后，将 rel 设回 stylesheet

• 资源压缩

o 利用 webpack、gulp/grunt、rollup 等模块化工具

o 将 css 代码进行压缩，使文件变小，大大降低了浏览器的加载时间

• 合理使用选择器

o 不要嵌套使用过多复杂选择器，最好不要三层以上

o 使用 id 选择器就没必要再进行嵌套

o 通配符和属性选择器效率最低，避免使用

• 减少使用昂贵的属性

o 如 box-shadow/border-radius/filter/透明度/:nth-child 等，

o 在页面发生重绘的时候，昂贵属性会降低浏览器的渲染性能

• 不要使用@import

o css 样式文件有两种引入方式，一种是 link 元素，另一种是@import

o @import 会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增

添了额外的往返耗时

o 而且多个@import 可能会导致下载顺序紊乱