1、面试官：说说你对盒子模型的理解?

CSS盒模型本质上是一个盒子，它包括：content、padding、border、margin。CSS 中的盒子模型包括IE 盒子模型和标准的 W3C 盒子模型。

在标准的盒子模型中，width 指 content 部分的宽度。

在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度

故在计算盒子的宽度时存在差异：

标准盒模型： 一个块的总宽度= width+margin(左右)+padding(左右)+border(左右)

怪异盒模型： 一个块的总宽度= width+margin（左右）（既 width 已经包含了 padding 和 border值）

2、box-sizing属性

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

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

content-box：元素的 width/height 不包含padding，border，。【标准盒子模型】

border-box：元素的 width/height 包含 padding，border。【IE 盒子模型】

inherit：继承父元素的 box-sizing 值。

3、面试官：css选择器有哪些？优先级？哪些属性可以继承？

关于css属性选择器常用的有：

id选择器(#myid)

类选择器(.myclass)

属性选择器(a[rel="external"])

伪类选择器(a:hover, li:nth-child)

标签选择器(div, h1,p)

兄弟选择器（h1 + p）

子选择器(ul > li)

后代选择器(li a)

通配符选择器(*)

优先级：

!important

内联样式（1000）

ID选择器（0100）

类选择器/属性选择器/伪类选择器（0010）

元素选择器/伪元素选择器（0001）

关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important> 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

继承属性：

字体系列属性

文本系列属性

元素可见性visibility等

无继承的属性：

display

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

背景属性、盒子模型的属性、定位属性等

4、面试官：说说em/px/rem/vh/vw区别?

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，相对的只是HTML根元素font-size的值

vw，就是根据窗口的宽度，分成100等份，100vw就表示满宽，同理，vh则为窗口的高度vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

5、面试官：css中，有哪些方式可以隐藏页面元素？区别?

通过css实现隐藏元素方法有如下：

1、display:none 将元素设置为display:none后，元素在页面上将彻底消失，导致浏览器的重排和重绘，无法响应点击事件。

2、visibility:hidden 仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘，无法响应点击事件。

3、opacity:0 将元素的透明度设置为0后，元素也是隐藏的，不会引发重排，一般情况下也会引发重绘，可以响应点击事件

4、设置height、width模型属性为0 将元素的height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，无法响应点击事件

5、position:absolute 将元素移出可视区域 top: -9999px; left:-9999px; 特点：元素不可见，不影响页面布局

6、面试官：谈谈你对BFC的理解？

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

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

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

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

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

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

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

如何创建BFC？

1、根元素，即HTML元素

2、float的值不为none

3、position为absolute或fixed

4、display的值为inline-block、table-cell、table-caption

5、overflow的值不为visible

BFC应用场景

1、防止margin重叠（塌陷）

2、清除内部浮动

3、自适应多栏布局等

7、面试官：元素水平垂直居中的方法有哪些？

一、水平居中

对于行内元素 : text-align: center;

对于确定宽度的块级元素：

（1）width和margin实现。margin: 0 auto;

（2）绝对定位和margin-left: (父width - 子width）/2,前提是父元素position: relative

对于宽度未知的块级元素

（1）inline-block实现水平居中方法。子元素display：inline-block和父元素text-align:center实现水平居中。

（2）绝对定位+transform，translateX可以移动本身元素的50%。

（3）flex布局父元素使用justify-content:center

（4）table标签配合margin左右auto实现水平居中。使用table标签，再通过给该标签添加左右margin为auto。

二、垂直居中

1、利用 line-height 实现居中，这种方法适合纯文字类

2、通过设置父容器 相对定位 ，子级设置绝对定位，标签通过margin实现自适应居中

3、弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中

4、父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现

5、table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。

8、面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

两栏布局：

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。

实现思路1：

1、float 左浮左边栏

2、使用 margin-left 撑出内容块做内容展示

3、级元素添加BFC，防止下方元素飞到上方内容，如overflow: hidden

实现思路2：

flex弹性布局

父盒子display: flex，左侧盒子写入宽度，右侧盒子flex: 1占一份

三栏布局

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

实现思路：

1、两边使用 float，中间使用 margin

2、使用 absolute，中间使用 margin

3、圣杯布局，利用margin负值法(详细解释)

使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度为百分之百，这样中间盒子独占一行，左右盒子被挤到下方，让左边的盒子上去要设置margin-left:-100%，让右边的盒子上去要设置margin-left: 负自身宽度

4、使用 display: table 实现

5、使用flex实现 将父级设置为display: flex; justify-content: space-between;即可

6、grid网格布局

设置display: grid; width: 100%; grid-template-columns: 300px auto 300px;即可

9、面试官：说说flexbox（弹性盒布局模型）,以及适用场景？

关于flex常用的属性，我们可以划分为容器属性和容器成员属性，

一、容器属性

flex-direction：决定主轴的方向flex-direction: row | row-reverse |column | column-reverse;

flex-wrap：决定换行规则 flex-wrap: nowrap | wrap |wrap-reverse;

flex-flow： flex-direction属性和flex-wrap属性的简写形式

justify-content：对其方式，水平主轴对齐方式

1、space-between：两端对齐，项目之间的间隔都相等

2、space-around：两个项目两侧间隔相等

align-items：对齐方式，竖直轴线方向

align-content：定义了多根轴线的对齐方式

二、项目的属性（元素的属性）：

order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0

flex-grow属性：定义项目的放大比例，默认为0，即使存在空间，也不会放大

flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个item 的 flow-shrink 为 0，则为不缩小

flex-basis属性：定义了在分配多余的空间，项目占据的空间。

flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖

10、flex实现div左上角、中间、左下角布局css

父级设置 子级利用绝对定位，自由移动到页面的不同位置，例左上角。

display:flex;

position:relative;

flex-direction:row;

justify-content:space-around;

align-items:center;

11、面试官：清除浮动的方式有哪几种？

1、添加额外标签 给父级添加<divstyle="clear:both"></div>

2、父级添加overflow属性，或者设置高度

3、建立伪类选择器清除浮动(下面案例)或者4、使用before和after双伪元素清除浮动

.parent:after{

/* 设置添加子元素的内容是空*/

content: '';

/* 设置添加子元素为块级元素*/

display: block;

/* 设置添加的子元素的高度0*/

height: 0;

/* 设置添加子元素看不见*/

visibility: hidden;

/* 设置clear：both */

clear: both;

}

12、面试官：CSS3新增了哪些新特性？

一、选择器

css3中新增了一些选择器，主要包括属性选择器、结构伪类选择器、伪元素选择器等

二、新样式

三、transition过渡

transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，语法如下：

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

四、transform 转换

transform属性允许你旋转，缩放，倾斜或平移给定元素

五、animation 动画

六、渐变：linear-gradient：线性渐变

background-image:linear-gradient(direction, color-stop1, color-stop2, ...);

七、关于css3其他的新特性还包括flex弹性布局、Grid栅格布局

13、面试官：css3动画有哪些？

css实现动画的方式，有如下几种：

1、transition 实现渐变动画 过渡简写：transition: all 2s ease-in 500ms;

2、transform 转变动画

包含四个常用的功能：translate：位移scale：缩放rotate：旋转skew：倾斜

3、animation 实现自定义动画

通过 @keyframes 来定义关键帧

14、面试官：如果要做优化，CSS提高性能的方法有哪些？

实现方式有很多种，主要有如下：

1、内联首屏关键CSS：通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染

2、异步加载CSS：

3、资源压缩：利用webpack等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

4、合理使用选择器：不要嵌套使用过多复杂选择器

5、减少使用昂贵的属性：在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

6、不要使用@import：@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

15、面试官：浏览器重绘与重排的区别？

重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。

重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变

当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

重绘不一定会出现重排，重排必然会出现重绘

如何触发重排和重绘？

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

1、添加、删除、更新DOM节点

2、通过display: none隐藏一个DOM节点-触发重排和重绘

3、通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化

4、移动或者给页面中的DOM节点添加动画

5、添加一个样式表，调整样式属性

6、用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者重排？

1、集中改变样式，不要一条一条地修改 DOM 的样式。

2、不要把 DOM 结点的属性值放在循环里当成循环里的变量。

3、为动画的 HTML 元件使用 fixed 或 absolute 的 position，那么修改他们的 CSS 是不会reflow 的。

4、不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

5、尽量只修改position：absolute或fixed元素，对其他元素影响不大

6、动画开始GPU加速，translate使用3D变化

7、将元素提升为合成层

16、面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？

响应式网站设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

响应式设计的基本原理：通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

实现响应式布局的方式有如下：1、媒体查询 2、百分比 3、vw/vh 4、rem

媒体查询语法：

@mediascreen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

响应式布局优点：1、面对不同分辨率设备灵活性强2、能够快捷解决多设备显示适应问题

缺点：

1、仅适用布局、信息、框架并不复杂的部门类型网站

2、兼容各种设备工作量大，效率低下

17、面试官：如何实现单行／多行文本溢出的省略样式？

一、单行文本溢出省略

1、text-overflow: ellipsis：规定当文本溢出时，显示省略符号来代表被修剪的文本

2、white-space:nowrap：设置文字在一行显示，不能换行

3、overflow:hidden：文字长度超出限定宽度，则隐藏超出的内容

二、多行文本溢出省略

基于行数截断

-webkit-line-clamp:2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）

display:-webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示

-webkit-box-orient:vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式

overflow:hidden：文本溢出限定的宽度就隐藏内容

text-overflow:ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

18、面试官：如何使用css完成视差滚动效果?

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验

可以使用transform:translate3D来实现

transform:css3 属性，可以对元素进行变换(2d/3d)，包括平移 translate,旋转 rotate,缩放 scale,

perspective:css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感

这种方式实现视觉差动的原理如下：

1、容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，

2、子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样

3、滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果

19、如何画一条0.5px的线

方法一、移动端，采用metaviewport的方式

<metaname="viewport" 
      content="width=device-width, 
      initial-scale=0.5, minimum-scale=0.5,maximum-scale=0.5"/>

这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。

方法二、采用transform: scale()的方式

transform:scale(0.5,0.5);

方法三、使用boxshadow

height:1px;
box-shadow:0 0.5px 0 #000;

设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px。

20、面试官：CSS如何画一个三角形？原理是什么？

/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

21、面试官：让Chrome支持小于12px的文字方式有哪些？区别？

常见的解决方案有：

1、zoom

zoom的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸

其支持的类型有：

zoom:50%，表示缩小到原来的一半

zoom:0.5，表示缩小到原来的一半

2、-webkit-transform:scale()

针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩

3、-webkit-text-size-adjust:none

该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小

22、面试官：说说对Css预编语言的理解？有哪些区别?

Css作为一门标记性语言，语法相对简单，但同时也带来一些问题。需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，Css预处理器便是针对上述问题的解决方案

Css预编译语言在前端里面有三大优秀的预编处理器，分别是：

1、sass 2、less 3、stylus

变量：less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开

嵌套：三者的嵌套语法都是一致的

作用域：Css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js一样，它会先从局部作用域查找变量，依次向上级作用域查找

混入：Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用

代码模块化：模块化就是将Css代码分成一个个模块

使用方法：

@import './common';