自用前端面试题（HTML+CSS）1.src和href的区别 src和href都是用来引用外部的资源，它们的区别如下：

0.

各种布局实现大全：juejin.cn/post/684490…

1.src和href的区别

src和href都是用来引用外部的资源，它们的区别如下：

src 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
href 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。常用在a、link等标签上。

2.HTML的语义化是什么？该特性有什么优点？

定义
语义化指用合理HTML标记以及其特有的属性去格式化文档内容

优点

在没有CSS样式的情况下，页面也会呈现很好的效果
对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

3.DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat）：

CSS1Compat：标准模式（Strick mode） ，默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat：怪异模式(混杂模式)(Quick mode) ，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

4.script标签中defer和async的作用和两者的区别

作用
defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载

两种区别

执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行: async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

5.常用的meta标签有哪些？

（1）charset,用来描述HTML文档的编码类型：

（2）keywords，页面关键词：

（3）description，页面描述：

（4）refresh，页面重定向和刷新：

（5）viewport，适配移动端，可以控制视口的大小和比例：

其中，content参数有以下几种：

-width viewport：宽度(数值/device-width)

-height viewport：高度(数值/device-height)

-initial-scale：初始缩放比例

-maximum-scale：最大缩放比例

-minimum-scale：最小缩放比例

-user-scalable：是否允许用户缩放(yes/no）

（6）搜索引擎索引方式：

其中，content参数有以下几种：

-all：文件将被检索，且页面上的链接可以被查询；

-none：文件将不被检索，且页面上的链接不可以被查询；

-index：文件将被检索；

-follow：页面上的链接可以被查询；

-noindex：文件将不被检索；

-nofollow：页面上的链接不可以被查询。

6.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选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

7.position 属性的值有哪些及其区别？

固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit: 规定应该从父元素继承 position 属性的值。

8.box-sizing属性作用

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
各属性值：
content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】 border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】
inherit：继承父元素的 box-sizing 值。

9.讲一下CSS盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

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

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

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

10.讲一下对BFC的理解？

BFC的概念

BFC 是 Block Formatting Context 的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。

BFC的原理布局规则

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反
BFC的区域不会与float box重叠
BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算高度
元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

如何创建BFC？

根元素，即HTML元素
float的值不为none
position为absolute或fixed
display的值为inline-block、table-cell、table-caption
overflow的值不为visible

BFC的使用场景

去除边距重叠现象
清除浮动（让父元素的高度包含子浮动元素）
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行

11.如何实现让一个元素水平垂直居中？

详解：juejin.cn/post/700834…

水平居中

对于行内元素 : text-align: center;
对于确定宽度的块级元素：
1. width和margin实现。margin: 0 auto;
2. 绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative
对于宽度未知的块级元素
1. table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
2. inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
3. 绝对定位+transform，translateX可以移动本身元素的50%。
4. flex布局使用justify-content:center

垂直居中

利用 line-height 实现居中，这种方法适合纯文字类
通过设置父容器相对定位，子级设置 绝对定位，标签通过margin实现自适应居中
弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

12.隐藏页面中某个元素的方法

opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

该问题会引出回流+重绘

13.用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;
}

14.什么是Flex布局？Flex布局常用属性有哪些？

flex 是flexible Box 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。指定容器display:flex即可。

使用详解：zhuanlan.zhihu.com/p/25303493
flex属性简单分为容器属性和元素属性：
容器的属性：

flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow： .box { flex-flow: || ; }
justify-content：对其方式，水平主轴对齐方式
align-items：对齐方式，竖直轴线方向
align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

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

order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个 item 的 flow-shrink 为 0，则为不缩小
flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
align-items，默认属性为 auto，表示继承父元素的 align-items

15.rem是什么？有什么优缺点？和em有什么区别

rem是什么 rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

优点

可以快速适用移动端布局，字体，图片高度
可以通过修改html里的文字大小来改变页面中元素的大小，可以整体进行控制

缺点

目前 ie 不支持
数据量大：所有的图片，盒子都需要我们去给一个准确的值，才能保证不同机型的适配；
在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前

和em区别
em单位，em（font size of the element）是指相对于父元素的字体大小的单位，依赖父元素计算。 rem计算的规则是依赖根元素

16.百分比布局

通过百分比单位 " % " 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height 百分比相对于 height，width 百分比相对于 width。 padding、border、margin 等等不论是垂直方向还是水平方向，都相对于直接父元素的 width。除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身的。

缺点：

计算困难
各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。

17.浮动布局

浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。

优点

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

18.如何使用rem或viewport进行移动端适配

移动端适配详解：www.jianshu.com/p/fc6b3d64b…

19.清除浮动的方式有哪些？

添加额外标签

<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

父级添加overflow属性，或者设置高度
建立伪类选择器清除浮动

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
    content: '';
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
}

20.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

display: none

DOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间；
事件监听：无法进行 DOM 事件监听，不能点击；
性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大；
继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染；
场景：显示出原来这里不存在的结构；
transition：transition 不支持 display。

visibility: hidden

DOM 结构：不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见；
事件监听：无法进行 DOM 事件监听，不能点击；
性能：修改元素只会造成本元素的重绘（repaint），是重回操作，比回流操作性能高一些，性能消耗较少；读屏器读取visibility: hidden元素内容；
继承：是继承属性，子孙节点消失是由于继承了visibility: hidden，子元素可以通过设置 visibility: visible 来取消隐藏；
场景：显示不会导致页面结构发生变动，不会撑开；
transition：transition 支持 visibility，visibility 会立即显示，隐藏时会延时。

opacity: 0

DOM 结构：透明度为 100%，不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见；
事件监听：可以进行 DOM 事件监听，可以点击；
性能：提升为合成层，是重建图层，不和动画属性一起则不会产生repaint（不脱离文档流，不会触发重绘），性能消耗较少；
继承：会被子元素继承，且子元素并不能通过 opacity: 1 来取消隐藏；
场景：可以跟transition搭配；
transition：transition 支持 opacity，opacity 可以延时显示和隐藏。

21.css sprite是什么？有什么优缺点？

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

优点：

减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便

缺点：

图片合并麻烦
背景设置时，需要得到每一个背景单元的精确位置
维护麻烦，修改一个图片可能需要重新布局整个图片样式

22.`link`与`@import`的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持
link可以通过rel="alternate stylesheet"指定候选样式

23.`display: block;`和`display: inline;`的区别

block元素:

处于常规流中时，如果width没有设置，会自动填充满父容器
可以应用margin/padding
在没有设置高度的情况下会扩展高度以包含常规流中的子元素
处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
忽略vertical-align

inline元素:

水平方向上根据direction依次布局
不会在元素前后进行换行
受white-space控制
margin/padding在竖直方向上无效，水平方向上有效
width/height属性对非替换行内元素无效，宽度由元素内容决定
非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
浮动或绝对定位时会转换为block
vertical-align属性生效

24.PNG,GIF,JPG 的区别及如何选

GIF：

256色
无损，编辑保存时候，不会损失。
支持简单动画。
支持boolean透明，也就是要么完全透明，要么不透明

JPEG：

16.8M颜色
有损压缩，意味着每次编辑都会失去质量。
不支持透明。
适合照片。

PNG：无损，一般分为两类：PNG8和truecolor PNGs。

与GIF相比：

它通常会产生较小的文件大小。
它支持阿尔法（变量）透明度。
无动画支持

与JPEG相比：

文件更大
无损
因此可以作为JPEG图片中间编辑的中转格式。

结论： JPEG适合照片，网络传输 GIF适合动画 PNG8适合带要求半透明背景的图片

25.display,float,position 的关系

blog.csdn.net/weixin_4745…

26.px,em,rem,vw,vh区别

px: px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的。

em: 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem: css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

vw: css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

vh: css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

27.`position:sticky`的特性和使用

www.zhangxinxu.com/wordpress/2…

28.css行高line-height的一些深入理解及应用

www.zhangxinxu.com/wordpress/2…

29.rem布局和vw布局对比讲解

cloud.tencent.com/developer/a…

30.移动端如何实现1px

多种办法详解：juejin.cn/post/684490…
jinlong.github.io/2015/05/24/…
较优办法（viewport+rem+js 实现）：

<html>
  <head>
      <title>1px question</title>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">        
      <style>
          html {
              font-size: 1px;
          }            
          * {
              padding: 0;
              margin: 0;
          }
          .top_b {
              border-bottom: 1px solid #E5E5E5;
          }

          .a,.b {
                      box-sizing: border-box;
              margin-top: 1rem;
              padding: 1rem;                
              font-size: 1.4rem;
          }

          .a {
              width: 100%;
          }

          .b {
              background: #f5f5f5;
              width: 100%;
          }
      </style>
      <script>
          var viewport = document.querySelector("meta[name=viewport]");
          //下面是根据设备像素设置viewport
          if (window.devicePixelRatio == 1) {
              viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
          }
          if (window.devicePixelRatio == 2) {
              viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
          }
          if (window.devicePixelRatio == 3) {
              viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
          }
          var docEl = document.documentElement;
          var fontsize = 32* (docEl.clientWidth / 750) + 'px';
          docEl.style.fontSize = fontsize;
      </script>
  </head>
  <body>
      <div class="top_b a">下面的底边宽度是虚拟1像素的</div>
      <div class="b">上面的边框宽度是虚拟1像素的</div>
  </body>
</html>

32.CSS什么情况下会导致回流？如何进行优化？

以下情况会导致回流：

调整窗口大小（Resizing the window）
改变字体（Changing the font）
增加或者移除样式表（Adding or removing a stylesheet）
内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in
an input box）
激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）
操作 class 属性（Manipulating the class attribute）
脚本操作 DOM（A script manipulating the DOM）
计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
设置 style 属性的值（Setting a property of the style attribute）

优化措施：

尽可能在DOM树的最末端改变class
回流可以自上而下，或自下而上的回流的信息传递给周围的节点。回流是不可避免的，但可以减少其影响。尽可能在DOM树的里面改变class，可以限制了回流的范围，使其影响尽可能少的节点。例如，你应该避免通过改变对包装元素类去影响子节点的显示。面向对象的CSS始终尝试获得它们影响的类对象（DOM节点或节点），但在这种情况下，它已尽可能的减少了回流的影响，增加性能优势。
避免设置多层内联样式
因为每个都会造成回流，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一个reflow。
动画效果应用到position属性为absolute或fixed的元素上
这样不影响其他元素的布局，只会导致重新绘制，而不是一个完整回流。这样消耗会更低。
牺牲动画平滑度换取速度
避免使用table布局
避免使用CSS的JavaScript表达式 (仅 IE 浏览器)

33.各种常见布局实现

juejin.cn/post/684490…
juejin.cn/post/684490…

34.什么是grid布局？和table布局有什么区别？和flex布局有什么区别？

定义
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

对比table

grid是在CSS中实现，而table是在HTML中实现的；
grid是固定大小的，table大小可变；
grid继承自面板元素，table继承自块元素。

对比flex

flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格。

35.什么是层叠上下文、层叠等级、层叠顺序？如何产生层叠上下文？

层叠上下文
是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。

层叠等级

在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。
在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序

层叠顺序
“层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。由此可见，前面所说的“层叠上下文”和“层叠等级”是一种概念，而这里的“层叠顺序”是一种规则。

如何产生层叠上下文

HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。
普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
CSS3中的新属性也可以产生层叠上下文，元素属性满足以下条件之一就会产生层叠上下文:
- 父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
- 元素的opacity属性值不是1；
- 元素的transform属性值不是none；
- 元素mix-blend-mode属性值不是normal`；
- 元素的filter属性值不是none；
- 元素的isolation属性值是isolate；
- will-change指定的属性值为上面任意一个；
- 元素的-webkit-overflow-scrolling属性值设置为touch

36. sass和less有什么异同？

events.jianshu.io/p/9c4ce68ad…

37.什么是CSS预处理器？常见的有哪些？有什么作用？

定义 CSS预处理器定义了一种新的语言，用来为CSS增加一些编程特性（CSS本身不是编程语言）。不需考虑浏览器兼容问题，因为CSS预处理器最终编译和输出的仍是标准的CSS样式。可以在CSS预处理器中：使用变量、简单逻辑判断、函数等基本编程技巧。
常见的有sass、less、stylus

为什么要用预处理器
CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，在很长一段时间内，它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如今网站的复杂度已经不可同日而语，原生 CSS 已经让开发者力不从心。当一门语言能力不能满足普遍变需求时，就会“沦为底层语言”，会使用跟高级的原因替代底层语言进行编程，然后高级语言再编译输出底层语言，这就是为什么使用预处理器，预处理器会定义一门新的比原生css高级的语言，特性更丰富，能力更全面。

作用

文件切分
页面越来越复杂，需要加载的 CSS 文件也越来越大，我们有必要把大文件切分开来，否则难以维护。传统的 CSS 文件切分方案基本上就是 CSS 原生的 @import 指令，或在 HTML 中加载多个 CSS 文件，这些方案通常不能满足性能要求。
CSS 预处理器扩展了 @import 指令的能力，通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题，另一方面也解决了一堆小文件在加载时的性能问题。
模块化
把文件切分的思路再向前推进一步，就是 “模块化”。一个大的 CSS 文件在合理切分之后，所产生的这些小文件的相互关系应该是一个树形结构。
树形的根结节一般称作 “入口文件”，树形的其它节点一般称作 “模块文件”。入口文件通常会依赖多个模块文件，各个模块文件也可能会依赖其它更末端的模块，从而构成整个树形
选择符嵌套
选择符嵌套是文件内部的代码组织方式，它可以让一系列相关的规则呈现出层级关系，在 CSS 预处理语言中，嵌套语法可以很容易地表达出规则之间的层级关系，为单条声明写注释也很清晰易读。
变量在变量出现之前，CSS 中的所有属性值都是 “幻数”。不知道值是怎么来的、有什么样的意义。有了变量之后，就可以给这些 “幻数” 命名，便于记忆、阅读和理解。
运算
运算则可以让值和值建立关联。有些属性的值其实跟其它属性的值是紧密相关的，CSS 语法无法表达这层关系；而在预处理语言中，我们可以用变量和表达式来呈现这种关系。
函数
可以自定义函数，预处理器自己也内置了大量的函数，此外，预处理器的函数往往还支持默认参数、具名实参、arguments 对象等高级功能，内部还可以设置条件分支，可以满足复杂的逻辑需求。
@mixin 使用@mixin可以实现自定义一段代码，然后通过@include直接进行调用，简化了代码，提高了代码的复用率

38.浏览器将rem转成px时有精度误差怎么办？

每个浏览器对小数点的处理方式都不一样。主要有三种：处理成整数、保留4位小数或保留15位小数。现代浏览器基本支持保留小数位的处理。由于显示器是由像素单元组成的，对于小于1像素的部分，是无法像像素级那样精确地处理的，而是采用亚像素渲染的方式进行处理。

百分比数值只需保留3位小数即可
在兼容IE8、IE9的情况下，无法避免1像素的差距，因此百分比宽度或背景定位时，需能兼容1像素的误差范围。

具体参考：isux.tencent.com/articles/10…

39.已知下方布局代码？如何修改才能让图片宽度为300px？给出的代码不能修改

<img src="1.jpg" style="width:480px !important;"/>

答案：增加max-width:300px和transform: scale(0.625,0.625)

40.如何设计实现无缝轮播？

zhuanlan.zhihu.com/p/34943054

41.介绍下BFC、IFC、GFC和FFC

BFC

见本篇 10.讲一下对BFC的理解

IFC

定义

inline Formatting Contexts, 也就是 ”内联格式化上下文“。各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

对于水平书写模式，各个框从左边开始水平地排列
对于垂直书写模式，各个框从顶部开始水平地排列

产生条件

符合以下任何一条件即会生成一个IFC

块级元素中仅包含内联级别元素

形成条件非常简单，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。

布局规则

子元素水平方向横向排列，并且垂直方向起点为元素顶部。
子元素只会计算横向样式空间，（padding, border, margin）, 垂直方向样式空间不会被计算（padding, border, margin ）。
在垂直方向上，子元素会以不同形式来对齐（vertical-align）。
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定的。
IFC中的”line box“一般左右边贴紧其包含块，但float元素会优先排列。
IFC中的”line box“高度由css行高计算规则来确定，同个IFC的多个line box高度可能会不同。
当line-level boxes 的总宽度少于包含它们的line box时，其水平渲染规则由 text-align属性值来决定。
当一个”inline box“超过父元素的宽度时，它会被分割成多个boxes, 这些boxes分布在多个”line box“中。如果子元素未设置强制换行的情况下， ”inline box“将不可被分割，将会溢出父元素。

应用场景

元素水平居中当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中
多行文本水平垂直居中创建一个IFC，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC

定义

栅格格式化上下文（Grid Formatting Contexts），当为一个元素设置display值为grid或者为inline-grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器grid container上定义网格定义行grid definition rows和网格定义列grid definition columns属性各在网格项目grid item上定义网格行grid row和网格列grid columns为每一个网格项目grid item定义位置和空间。

布局规则

通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

GFC应用场景

网格布局

FFC

定义

flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用Flex box布局实际上就是声明创建了FFC(自适应格式上下文)

布局规则

设置为 flex 的容器被渲染为一个块级元素
设置为 inline-flex 的容器被渲染为一个行内元素
弹性容器中的每一个子元素都是一个弹性项目。弹性项目可以是任意数量的。弹性容器外和弹性项目内的一切元素都不受影响。简单地说，Flexbox 定义了弹性容器内弹性项目该如何布局
FFC布局中，float、clear、vertical-align属性不会生效

产生条件

当 display 的值为 flex 或 inline-flex 时，将生成弹性容器（Flex Containers）, 一个弹性容器为其内容建立了一个新的弹性格式化上下文环境（FFC）。

应用场景

弹性布局

42.实现模糊搜索结果的关键词高亮

brightKeyword (val) {
      const keyword = this.searchText // 获取输入框输入的内容
      if (val.indexOf(keyword) !== -1) { // 判断这个字段中是否包含keyword
        // 如果包含的话，就把这个字段中的那一部分进行替换成html字符
        return val.replace(keyword, `<font color='#1677FF'>${keyword}</font>`)
      } else {
        return val
      }
    }

43.CSS实现几个div一行排列

利用float

设置float:left并且多个div盒子总宽度小于等于最外层盒子宽度

使用display属性将div转换为内联元素或内联块状元素

设置display:inline或者display:inline-block

44.如何设置div不换行

white-space:nowrap

45.在div上既设置`display:none`，也设置`v-show="true"`，结果会怎么样？

div正常显示，display:none不生效。
使用v-show指令，实际就是根据绑定的布尔数据，对元素进行动态添加或取消“display:none”进行显示切换的。

46.两个div都设置float那么其父元素会怎样？为什么清除浮动可以解决这个问题？

父元素会塌陷，因为这两个div都脱离了正常文档流。清除浮动后就恢复了正常文档流

47.preload和prefetch的区别

preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源。
prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。
在VUE SSR生成的页面中，首页的资源均使用preload，而路由对应的资源，则使用prefetch。
对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch。

使用 preload 和 prefetch 的逻辑可能不是写到一起，但一旦发生对用一资源 preload 或 prefetch 的话，会带来双倍的网络请求。

48.css的position属性支持哪些？

position有5个值，分别为static，relative，absolute，fixed，sticky。

static

static是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响。

relative

relative相对定位的元素会较正常文档流中的位置进行偏移，受top，bottom，left，right的影响。就是元素还在文档流中像static一样占着位置，但视觉上会有偏移，多用于absolute绝对定位的父元素。

absolute

absolute绝对定位会脱离正常的文档流，相对于最近的进行过定位的（非static）父级元素定位，若没有父级元素进行过定位，则相对于即浏览器窗口定位。

fixed

fixed固定定位同样是脱离正常的文档流，一直相对于浏览器窗口定位，无论页面如何滚动，此元素总在屏幕的同一个位置。注：当fixed定位的父元素使用了transform的样式时，fixed定位会失效，变成和absolute一样的效果。

sticky

sticky粘性定位需要指定 top，right，bottom，left 四个阈值其中之一才会生效。阈值为此元素在可视区域中与边界的距离，跨越特定阈值前为相对定位（relative），当页面滚动导致此元素跨越阈值则变为固定定位（absolute）。

50.通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

利用 calc 计算宽度的方法

.box>div{height: 100%;}
#box1>div{float: left;}
.left1{width: 100px;background: yellow;}
.right1{background: #09c;width:calc(100% - 100px);}

<div class="box" id="box1">
    <div class="left1">左侧定宽</div>
    <div class="right1">右侧自适应</div>
</div>

利用 float 配合 margin

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left2{float: left;background: yellow;width: 100px;}
.right2{background: #09c;margin-left: 100px;}

<div class="box" id="box2">
    <div class="left2">左侧定宽</div>
    <div class="right2">右侧自适应</div>
</div>

利用 float 配合 overflow 实现

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left3{float: left;background: yellow;width: 100px;}
.right3{background: #09c;overflow: hidden;}

<div class="box" id="box3">
    <div class="left3">左侧定宽</div>
    <div class="right3">右侧自适应</div>
</div>

利用 position:absolute 配合 margin 实现

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box4{position: relative;}
.left4{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right4{margin-left:100px;background: #09c;}

<div class="box" id="box4">
    <div class="left4">左侧定宽</div>
    <div class="right4">右侧自适应</div>
</div>

利用 position:absolute 实现

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box5{position: relative;}
.left5{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right5{position: absolute;left: 100px;top:0;right: 0;width: 100%;background: #09c;}

<div class="box" id="box5">
    <div class="left5">左侧定宽</div>
    <div class="right5">右侧自适应</div>
</div>

利用 display: flex 实现

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box6{display: flex;display: -webkit-flex;}
.left6{flex:0 1 100px;background: yellow;}
.right6{flex:1;background: #09c;}

<div class="box" id="box6">
    <div class="left6">左侧定宽</div>
    <div class="right6">右侧自适应</div>
</div>

利用 display: table 实现

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box7{display: table;width: 100%;}
#box7>div{display: table-cell;}
.left7{width: 100px;background: yellow;}
.right7{background: #09c;}

<div class="box" id="box7">
    <div class="left7">左侧定宽</div>
    <div class="right7">右侧自适应</div>
</div>

51.说一说html5的新特性

详解：www.cnblogs.com/vicky1018/p…

语义化标签
增强型的表单和表单属性
音视频
canvas和svg
地理定位
contenteditable
拖拽
webWorker
webStorage

52.说一说css3的新特性

CSS3的主要新特性：

选择器
阴影
形状转换（2D <-> 3D）
变形
动画（过渡动画、帧动画）
边框
多重背景
反射
文字
颜色函数（rgba/hsl/hsla）
滤镜（filter）
弹性布局
多列布局
栅格布局
盒模型
Web字体
媒体查询

53.CSS伪类有哪些？

表示状态的伪类

伪类	描述
:link	所有未访问链接
:visited	所有访问过的链接
:hover	鼠标放到标签上的时候
:active	鼠标点击标签的状态
:focus	标签获得焦点时的样式

结构化伪类

伪类	例子	例子说明
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not§ 选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:root	root	选择文档的根元素
:target	#main:target	选择当前活动#main元素(点击URL包含锚的名字)

表单类

伪类	例子	例子说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:valid	input:valid	选择所有有效值的属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:invalid	input:invalid	选择所有无效的元素
:optional	input:optional	选择没有"required"的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:in-range	input:in-range	选择元素指定范围内的值
:required	input:required	选择有"required"属性指定的元素属性

语言类

伪类	例子	例子说明
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值
:dir		匹配特定文字书写方向的元素

54.父元素设置flex，两个子元素分别为flex:1 和 flex:2，子元素如何呈现？

宽度分别占父布局宽度的 1/3和2/3

55.justify-content align-items分别有哪些属性值？

justify-content ：

flex-start（默认值）：左对齐；
flex-end：右对齐；
center：居中；
space-between：两端对齐，项目之间的间隔都相等；
space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

align-items：

flex-start：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：与交叉轴的中点对齐;
stretch（默认值）：轴线占满整个交叉轴。
baseline 与第一行文字基线对齐

56.flex属性是哪些属性的缩写？

flex是flex-grow,flex-shrink,flex-basis三个属性值的缩写

57.`flex-grow:2` 如何呈现?

比其他flex-grow为1的盒子宽一倍，如果其他盒子没有这个属性，那就是填充满所有的剩余空间

58.rem是怎么计算的？

1rem=根元素默认的字体大小

59.rpx和px怎么换算？

rpx是微信小程序中css的尺寸单位，可以根据屏幕宽度进行自适配。

规定屏幕宽度为750px，譬如iphone6，屏幕宽度为375px，共有750个物理像素，则1rpx = 0.5px。

设备rpx换算px：屏幕宽度/750，px换算成rpx:750/屏幕宽度。

60.flex-basic属性作用

属性值为：

number: 一个长度单位或者一个百分比，规定 flex 元素的初始长度。
auto: 默认值。长度等于 flex 元素的长度。如果该项目未指定长度，则长度将根据内容决定。

61.吸顶粘性布局

CSS3新发布的一个属性position:sticky，当节点出现在可视窗口时，该节点的位置不受任何影响，也就是等于position:static定位；当节点滚动出屏幕后，粘性布局会自动转换为position:fixed固定定位的效果，并使相关的属性生效，如：top，left，right，bottom等等。

62.box-sizing含义和应用场景

不同属性值的作用：

值	说明
content-box	默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。例如还有20px的padding，那组件实际宽度为`100px+20px*2`
border-box	告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。注： border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

应用场景： content-box是一般默认状况，内边距和边框会占用额外空间；
border-box 则适用于要求多盒子严格对齐，不希望边框和内边距破坏布局的情况

63.link标签是如何加载css的？（TODO）

64.讲一下如何实现移动端响应式布局？

媒体查询

CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

百分比布局

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

rem布局

REM是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生相应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

视口单位

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。而且还可以和rem进行搭配使用

图片响应式

图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

65.如何画一条0.5px的线？

详解：mp.weixin.qq.com/s?__biz=Mzg…

66.移动端输入框组件软键盘兼容性处理

www.jianshu.com/p/8557abaf4…

67.做过哪些通用的组件？

按实际回答

68.实现mergePromise函数，把传进去的数组顺序先后执行,并且把返回的数据先后放到数组data中

//实现mergePromise函数，把传进去的数组顺序先后执行，
//并且把返回的数据先后放到数组data中

const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});

const ajax1 = () => timeout(2000).then(() => {
    console.log('1');
    return 1;
});

const ajax2 = () => timeout(1000).then(() => {
    console.log('2');
    return 2;
});

const ajax3 = () => timeout(2000).then(() => {
    console.log('3');
    return 3;
});

const mergePromise = ajaxArray => {
    // 在这里实现你的代码
    var data = [];
    var sequence = Promise.resolve();
    ajaxArray.forEach(function (item) {
        sequence = sequence.then(item).then(function (res) {
            data.push(res);
            return data;
        });
    })

    return sequence;
};

mergePromise([ajax1, ajax2, ajax3]).then(data => {
    console.log('done');
    console.log(data); // data 为 [1, 2, 3]
});

// 分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]

69.一个简单的 sticky footer 布局。大致内容就是当页面高度不够时，页脚固定在页面底部；当页面高度足够时，页脚被页面内容推送下去

参考答案：

<header>
 <h1>Header</h1>
</header>
<main>
  <p>Bacon Ipsum dolor sit amet...</p>
</main>
<footer>
  <p>Footer</p>
</footer>
html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
main {
  flex: 1;
}

70.flex-grow和flex-shrink属性有什么用？

flex-grow

flex-grow 属性定义项目的扩大系数，用于分配容器的剩余空间。

分配规则：

总要分配的剩余空间 = 剩余空间 * ( 所有元素的flex-grow之和 >= 1 ? 1 : 所有元素的flex-grow之和 )
每个元素所能分得空间=总要分配的剩余空间 * ( 单个元素flex-grow / 所有元素的flex-grow之和 )

flex-shrink

flex-shrink 主要处理当 flex 容器空间不足时候，单个元素的收缩比例。当父元素的宽度小于子元素宽度之和并且超出了父元素的宽度时，flex-shrink 就会按照一定的比例进行收缩：将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。

分配规则：

每个元素要收缩的大小= 总超出的大小* ( 单个元素flex-shrink / 所有元素的flex-shrink之和 )
flex-shrink:0表示不收缩

71.如何控制屏幕缩放?

题干描述不太准确，推测是考察响应式布局相关知识，参考：64.讲一下如何实现移动端响应式布局

72.怎样写出更好的CSS？

class一律使用小写字母+下划线格式命名；
id一律使用驼峰命名法；
命名尽量使用英文命名，拼音也可以使用但尽量使用简称+英文的形式；
属性值前加一个空格；
>、+、~选择器的两边各保留一个空格；
尽量减少选择器的层级，最好不要超过四级；
属性应该按照特定的顺序出现以保证易读性；
样式中长度为0的须省略单位；
颜色色值尽量使用小写，相同色值不要出现大小写都存在的情况。如不小写也需要保证同一项目内保持大小写一致；
font-family 属性中的字体名称应使用字体的英文；
如果多个class的样式大部分重复，只有个别样式不同，可以把重复样式独立出来
使用预处理器来避免重复和实现模块化；
延迟加载非关键的样式表
慎用标签名选择器；
尽量避免使用内联样式，以免随着代码库的增长增加维护成本；
尽量使用相对单位来实现响应式布局；
尽量避免会产生回流的样式操作，如频繁修改文档流内元素的位置和尺寸；
对CSS添加注解
在样式表末尾导入动画
尽量避免使用id属性
在顶层将box-sizing默认属性改为border-box
让父级处理检举、位置和大小
在使用JS实现效果前优先考虑CSS解决方案
及时删除未使用的CSS样式
使用后处理器来优化CSS

73.介绍下CSS3动画

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点：

能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。
动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。
让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

配置动画

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyframes 规则实现。

animation的子属性有：

animation-delay

设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
animation-direction

设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
animation-duration

设置动画一个周期的时长。
animation-iteration-count

设置动画重复次数，可以指定 infinite 无限次重复动画
animation-name

指定由@keyframes描述的关键帧名称。
animation-play-state

允许暂停和恢复动画。
animation-timing-function

设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
animation-fill-mode

指定动画执行前后如何为目标元素应用样式。

使用 keyframes 定义动画序列

一旦完成动画的时间设置，接下来就需要定义动画的表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过 CSS 样式定义的，关键帧使用 percentage来指定动画发生的时间点。0% 表示动画的第一时刻，100% 表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from 和 to。这两个都是可选的，若 from/0% 或 to/100% 未指定，则浏览器使用计算值开始或结束动画。

也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

还可以添加百分比的关键帧

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

添加动画事件监听器

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

接收事件

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

74.实现九宫格布局

float+百分比设置宽高

<style type="text/css">
	.boxfather{
		background-color: pink;
		overflow: hidden; 
	}
	.box{
		float:left;
		width: 31%;
		padding-bottom: 31%;
		margin-right: 10px;
		margin-bottom: 10px;
		background-color: blue;
	}
</style>

<body>
	<div class="boxfather">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>	
</body>

flex布局+calc计算宽度

<style type="text/css">
	.boxfather{
		background-color: pink;
		display: flex;
		flex-wrap: wrap;
	}
	.box{
		margin-left: 10px;
		margin-bottom: 10px;
		width:calc(calc(100% / 3) - 10px);
		padding-top: calc(calc(100% / 3) - 10px);
		background-color: lightblue;
	}
</style>

<body>
	<div class="boxfather">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>	
</body>

75.实现上下左右居中

父相子绝，子元素向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）

  #box{
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
     #x{
         width: 200px;
         height: 200px;
         background: yellow;
         position: absolute;
         left: 50%;
         top: 50%;
         margin-left: -100px;
         margin-top: -100px;
     }

父元素设置成弹性盒（flex），子元素横向居中，纵向居中

 #box{
         width: 400px;
         height: 400px;
         background: red;
         display: flex;
         justify-content: center;
         align-items: center;
    
     }
     #x{
         width: 200px;
         height: 200px;
         background: yellow;
       
     }

父相子绝，子元素所有定位为0，margin设置auto自适应

  #box{
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
     #x{
         width: 200px;
         height: 200px;
         background: yellow;
         position: absolute;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
         margin: auto;
      }

76.讲一讲CSS Module、CSS in JS、传统CSS架构的优劣

传统CSS架构

优势
原生的全部的特性

劣势

全局污染 css中采用全局选择器的机制来设置样式，这种方式的优点是方便复用样式，缺点是可能导致需要对某些样式进行重写，必要甚至需要加上!important；
命名混乱多人协作开发时，无法规范化写法，这样会导致样式冲突，选择器的写法会越来越复杂，容易形成不同的命名风格，造成混乱；
无法确定依赖关系有时候我们可能只需要css文件中的一部分样式，但是一旦link一个css文件，文件会被全部加载；
无法共享变量有时候可能需要js和css共享一个变量，但是显然在传统的css中无法实现；
压缩不够彻底压缩工具无法对选择器进行压缩，而一般为了防止样式冲突，选择器的长度都不会太短。

CSSModule

优势
依然使用css，但是使用js来进行状态管理，能最大化地结合现有 CSS 生态和 JavaScript 模块化能力。

劣势
有一定上手门槛

CSS in JS

优势
使用js或者json格式来书写样式，并将样式生成inline-style的形式，这种方式无疑可以让css拥有js的模块化功能。

劣势
几乎无法利用css中特性，比如媒体查询，以及面对hover，active等伪类的处理比较麻烦。

77.CSS权重及其引入方式

权重规则

CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重，CSS的优先级规则：

权重高的样式会被应用到元素上。
如果权重相同则使用最后声明的样式。
属性后加上!important，无条件优先

权重计算

内联样式的权重：1000
ID选择器的权重：100
类选择器、属性选择器、伪类选择器的权重：10
元素选择器的权重：1
通配符*、子选择器>、兄弟选择器+的权重：0

CSS引入方式

1.内联样式

<p style="color:red">红色的字</p>

2.内部样式表

<style>
	p {
		color:red;
	}
</style>

3.外部样式表

链接式：<link type="text/css" rel="styleSheet" href="CSS文件路径" />

导入式：

<style type="text/css">
 @import url("css文件路径");
</style>

链接式的语法是属于HTML的，优先加载CSS文件到页面
导入式的语法属于CSS，先加载HTML结构再加载CSS文件

78.列举`<a><a/>`标签的全部作用

1.超链接

<a href="https://www.baidu.com/" target="_blank">超链接</a>

2.锚点

<div id="runtop"></div>

3.打电话或者发邮件

<a href="tel:123456">打电话给号码为123456的人</a>
<a href="mailto:123456@789.com">发邮件给给号码为123456@789.com的人</a>

4.协议限定符

<a href="javascript:alert("强制运行的javascript代码")">这样就能够在<a>标签被点击的时候强制运行href属性里面的代码</a>

79.用CSS画个三角形

用css绘制一个三角形，其实是利用视觉的效果，将三个边设置成相同的颜色，另一个边设置其他颜色，再通过设置四个边的形状绘制出三角效果的图形。

写一个宽高为0的盒子
选择三角形的底边，将此边界设置为一个颜色，另外三边设置另一个颜色（一般设置白色），即可显示三角效果

div{
            /*宽高为0*/
            width: 0;
            height: 0;
            /*在三角形底边设置一个边界颜色/
            border-top: 20px solid red;
            /*其它3边设置相同颜色，*/
            border-bottom: 20px solid white;
            border-left: 20px solid white;
            border-right: 20px solid white;
}

80.未知宽高元素水平垂直居中的方法

1.使用绝对定位的方法

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
 
<body>
    <div class="box"></div>
</body>

2.父盒子设置为弹性盒子,把子元素设置成行内块元素

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
        }
        
        .child {
            width: 400px; //测试高度
            height: 200px; //测试高度
            background-color: red;
            border: 1px solid blue;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>

3.把父盒子设置为表格元素

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 600px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            border: 1px solid black;
        }
        
        .child {
            width: 400px; //测试高度
            height: 200px; //测试高度
            background-color: red;
            border: 1px solid blue;
            display: inline-block;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>

4.将父盒子设置为网格元素

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 600px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            border: 1px solid black;
        }
        
        .child {
            width: 400px; //测试高度
            height: 200px; //测试高度
            background-color: red;
            border: 1px solid blue;
            display: grid;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>

81.元素种类的划分

HTML元素可以分为：块级元素、内联元素（行级元素）、内联块级元素（行内块级元素）

块级元素

1. 一个块级元素独占一行；
2. 元素的高、宽度、行高、margin、padding都可以设置；
3. 宽度不设置的情况下默认是父元素的100%；      
4. 常见的块级元素：div、h1-h6、ul、ol、dl、table；
5. 设置元素display：block可以将元素转换为块级元素。

内联元素(行内元素)

1. 和其他元素都在同一行上；
2. 元素的宽度和高度都不能设置；
3. 顶部和底部边距不能设置（margin-top,margin-bottom,padding-top,padding-bottom）;
4. 元素的宽度就是它包含的内容的宽度，不可改变；
5. 常用的内联元素有：a、span、br、strong、 em；
6. 设置display：inline可以将元素转换为内联元素

内联块级元素

1. 和其他元素都在一行上；
2. 元素的宽度、高度、边距（margin、padding）都能设置
3. 常见的内敛块级元素有：img、input；
4. 设置inline-block可以将元素转换为内联块级元素
5. float：left/right、position：absolute/fixed可以将元素设置为内联块级元素

82.margin塌陷及合并

margin塌陷

具体表现是当两个元素嵌套到一起时，外层盒模型的margin-top取两个元素中margin-top较大的值。
因为在正常的情况下内层元素是相对于外层元素进行移动，但是这时内层元素却相对于整个文档进行移动，好像外层元素没有“棚顶”一样，因此叫margin塌陷问题

解决方法

触发一个盒子的bfc（块级格式化上下文）,按实际情况在父级盒子上用以下这些方法任意一个都行：

position:absolute;设置定位后自然就变成了bfc元素了
display:inline-block
float:left/right
overflow:hidden

margin合并

父级元素的上外边距和下外边距会合并为单个外边距。

需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向，水平方向上的margin累加，而兄弟结构垂直方向上的margin是合并的。

解决办法

仍然用bfc来解决。可以给其中一个元素包起来，在外层元素中设置bfc渲染规则。此时这个元素的渲染规则就改变了，就能够解决这个问题

margin合并不是bug，一般不需要解决，margin塌陷是bug需要解决

83.display及相关属性

常用的display的属性：

display:inline（默认值）
将设置该元素的标签以内联元素即像普通文本一样插入文档流，不会自动换行或者设置宽度跟高度；其中设置该元素的标签的宽度跟高度以放入的该标签的元素的宽高为准，不允许修改。
display:none 将该元素隐藏，不会再文档流中出现，所谓的文档流也就是文档中可显示对象在排列时所占用的位置
display:inline-block 将绑定该元素的标签以inline内联样式插入到文档流中,然后它本身拥有block块的属性，可以设置宽度跟高度，通俗的说也就是，把我们要放的东西先以不换行的形式放到一个块中，然后再将这个块保存到我们的页面中
display:block 将绑定该属性的标签以块的形式插入到文档流中，即会自动设置宽跟高并，且会换行，说俗一点也就是我们口中的块，他会单独的占一行，可以设定margin 跟padding

还有其他很多属性，但不常用：

84.圣杯布局和双飞翼的布局的实现

圣杯布局

圣杯布局是三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染。也就是在html文档中，中间的部分要写在左右布局之前。

<header><h4>Header内容区</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区</h4></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>

header {
    width: 100%;
    height: 40px;
    background-color: darkseagreen;
}

.container {
    height: 200px;
    overflow: hidden;
    padding: 0 200px;
}

.middle {
    width: 100%;
    height: 200px;
    background-color: deeppink;
    float: left;
}

.left {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: left;
    margin-left:-100%;
    position: relative; 
    left: -200px;
}

.right {
    width: 200px;
    height: 200px;
    background-color: darkorchid;
    float: left;
    margin-left：-200px;
    position: relative;
    right: -210px;
}

footer {
    width: 100%;
    height: 30px;
    background-color: darkslategray;
}

双飞翼布局

在浏览器窗口变窄到一定程度之后，布局全都乱掉了，原因是：因为左右盒子设置了相对定位，所以当左右盒子应该在的位置发生重叠时，一行放不下了，就会换行，造成布局混乱，这可以用双飞翼布局解决

给中间部分套上一层容器，这样做以后，大的容器就不再需要设置padding值，左右栏盒子也不用再设置相对布局，代码精简了很多，而且不会出现上面变的特别窄布局会乱掉的问题

<style>
    .left, .main,.right {
      float: left;
      text-align: center;
      min-height: 500px;
    }
    .left {
      width: 200px;
      background-color: rgb(204, 245, 224);
      margin-left: -100%;
    }
    .right {
      width: 300px;
      background-color: rgb(200, 226, 244);
      margin-left: -300px;
    }
    .main {
      width: 100%;
      background-color: rgb(233, 193, 215);
    }
    .content {
      margin: 0 300px 0 200px;
    }
  </style>
  
	<div class="container"> 
	    <div class="main">
	      <div class="content">main</div> 
	    </div>
	    <div class="left">left</div> 
	    <div class="right">right</div> 
    </div>

85.介绍一下less预处理语言

blog.csdn.net/chen__cheng…

86.什么是媒体查询？

定义

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法与使用

@media mediatype and|not|only (media feature){
      css-code;
}

mediatype

all:全部
print:打印机、打印预览

关键字

and：可以将多个媒体特性连接到一起，相当"且"于的意思
not：排除某个媒体类型，相当于"非"的意思，可以省略
only：指定某个特定的媒体类型，可省略

媒体特性

(width):定义输出设备中页面可见区域宽度
(min-width):定义输出设备中页面最小可见区域宽度
(max-width):定义输出设备中页面最大可见区域宽度

示例：

引入资源

rem和媒体查询结合用

87.两列布局的实现

juejin.cn/post/684490…

88.三列布局的实现

juejin.cn/post/684490…

89.如果有多个元素（例如7个），如何实现左右两个固定，其他的等间距排列？

思路：首先实现三列布局（圣杯布局或者双飞翼布局），然后再在中间元素内部实现等间距布局

90.align-items和align-content区别

align-items：对齐方式，竖直轴线方向
align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

最明显的区别是align-content 适用于多轴线，单轴线不生效，align-item 则是适用于单轴线

91.如果设置background-color:red，那么盒子模型各个部分的背景是什么情况？

背景色会延伸覆盖到边框和内边距，边框有颜色的话，边框部分颜色会覆盖背景色

92.CSS3的动画最小间隔是多少？

多数显示器频率60Hz,两次刷新间最小间隔是16.7ms

93.DOM如何发送ajax请求？

没搜到直接答案，是想考JQuey发送get post请求？

94.如何改变默认盒模型？

通过修改box-sizing来实现

值	说明
content-box	默认值。标准盒模型。
border-box	怪异盒模型。

95.如何进行CSS布局，有哪些CSS属性可以改变页面的布局？

www.shejitang.com/ui/35029.ht…

96.可以通过哪几种方式实现Grid布局？

详细可以参考 74.实现九宫格布局，原理一致

1.传统布局方式

利用position属性+ display属性 + float属性布局, 兼容性最好, 但是效率低。

2.flex布局

3.grid布局 dispaly:grid;

97.boostrap的grid布局

blog.csdn.net/qq_29493173…

98.讲一下z-index

属性作用

z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。

当父元素设置了z-index属性时，子元素的z-index属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的z-index属性值为准进行对比，子元素本身的z-index属性值无效。

当父元素未设置了z-index属性，子元素的z-index属性与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以元素本身的z-index属性值为准进行对比。

取值范围

z-index属性的值分为三种：auto(默认值)：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0、number：整数数值，在兼容所有浏览器的情况下取值范围是 -2147483584 ~ 2147483584，数值越大，层级越高，数值越小，层级越低、inherit：继承父元素的z-index的属性值

适用范围

z-index属性只能在设置了position: relative | absolute | fixed的元素和父元素设置了 display: flex属性的子元素中起作用，在其他元素中是不作用的。

使用规则

同级元素之间

1.两个设置了定位且`z-index`属性值不同的同级元素。

他们之间的层级，由z-index属性值决定，属性值大的，层级高，显示在前面。

2.两个设置了定位且`z-index`属性值相同的同级元素。

由于z-index属性值相同，所以他们之间的层级，由元素的书写顺序决定，后面的元素会覆盖在前面的元素上面。

3.两个设置了定位且一个设置了`z-index`属性一个没设置`z-index`属性的同级元素。

未设置z-index属性的元素，则取默认值0，如果设置了z-index属性的元素的z-index属性值大于0，则该元素的层级会高于未设置z-index属性的元素

如果设置了z-index属性的元素的z-index属性值小于0，则该元素的层级会低于未设置z-index属性的元素。

当设置了z-index属性的元素的z-index属性值为0的时候，这时设置了z-index属性的元素与未设置z-index属性的元素层级相同，遵循后面的元素覆盖前面元素的规则

父子元素之间

1.父元素未设置`z-index`属性，子元素设置了`z-index`属性

当子元素的z-index属性值大于等于 0 时，子元素的层级会高于父元素的层级，而当子元素的z-index属性值小于 0 时，子元素的层级会低于父元素的层级

2.父元素设置了`z-index`属性，子元素未设置`z-index`属性

在这种情况下，无论父元素的z-index属性值为多少，子元素的层级永远高于父元素，子元素永远会挡住父元素的内容

3.父元素设置了`z-index`属性，子元素也设置了`z-index`属性

在这种情况下，无论子元素和父元素的z-index属性值为多少，子元素的层级永远高于父元素，子元素永远会挡住父元素的内容

子元素与其父元素外的其他元素之间

1.父元素未设置z-index属性，子元素z-index属性值与父元素的同级元素z-index属性值进行对比

因为是跟父元素的同级元素进行对比，且父元素未设置z-index，所以是以子元素的z-index属性值为准与父元素的同级元素进行对比，遵循z-index属性值大的元素，层级高规则，以及层级相同时，后面元素覆盖前面元素的规则。当子元素z-index属性值小于父元素的同级元素z-index属性值

2.父元素设置了z-index属性，子元素z-index属性值与父元素的同级元素z-index属性值进行对比

因为是跟父元素的同级元素进行对比，且父元素设置了z-index，所以是以父元素的z-index属性值为准与父元素的同级元素进行对比，同样遵循z-index属性值大的元素，层级高规则，以及层级相同时，后面元素覆盖前面元素的规则。

3.父元素均未设置z-index属性，子元素Az-index属性值与父元素的同级元素的子元素Bz-index属性值进行对比

这种情况比较特殊，元素之前的堆叠顺序，需要分开一一进行比较。首先将每个子元素与其父元素进行比较，再将第一次比较中两个层级低的进行比较，然后将上次比较中两个层级高的进行比较，最后再将第二次比较中层级高的与第三次比较中层级低的进行比较，最终就可以得出结果

4.父元素A和B均设置了z-index属性，子元素A1z-index属性值与父元素的同级元素的子元素B1z-index属性值进行对比

当父元素设置了z-index属性时，子元素的z-index属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的z-index属性值为准进行对比，子元素本身的z-index属性值无效

5.父元素A设置了z-index属性，父元素B未设置，子元素A1z-index属性值与子元素B1z-index属性值进行对比

这又是一个比较复杂的情况，首先将未设置z-index属性的父元素B与其子元素B1进行对比，然后将第一次对比中层级高的与父元素A进行对比，再将第一次对比中层级低的与第二次对比中层级低的进行对比，最后将两个子元素的层级进行对比，这样就可得出最终的层级顺序。

其他

1.父元素设置了`display: flex`，子元素之间对比

其规则相当于同级子元素之间的对比，z-index属性值大的元素，层级高

2.父元素A设置了`display: flex`，父元素B设置了`position`和`z-index`

两者各级元素之间的对比，与上面的两个设置了position的父元素之间进行对比的规则，是相同的

99.BEM是什么？

是CSS的命名规范 bemcss.com/
概括来讲核心规则是 block-name__element-name--modifier-name，也就是模块名 + 元素名 + 修饰器名

100.如何实现一个幻灯片组件？

www.cnblogs.com/mr-yuan/p/7…

101.如何实现一个select组件？

juejin.cn/post/702157…

102.如何实现页面元素的拖拽功能？

思路就是利用html组件原生支持的拖拽事件：www.json.cn/jiaocheng/c…
具体实现：blog.csdn.net/qq_42816270…

103.默认两个div之间，为何会有空隙？

因为我们编写代码的时候，换行符也会占位，需要设置font-size:0 或者浮动才能清除

104.默认的input输入框聚焦的时候会有蓝色边框如何解决？

outline: none

105. ::before 和 :after 的双冒号和单冒号有什么区别？

:用于CSS3伪类，双冒号::用于CSS3伪元素

106.实现一个扇形

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}

107.实现一个宽高自适应的正方形

.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

108.小程序与h5用户体验差异

小程序基于微信客户端实现，对解析进行了优化，并且一旦首次打开小程序，可以直接缓存很多资源。因此，在使用小程序时可以明显感觉很流畅，接近原生 APP 的体验。

而 H5 本质上还是网页，跟之前在 PC 上浏览网页没区别，每次要请求各种图片样式资源，在浏览器内核里渲染，因此体验会差一些。

小程序集成了很多原生APP的组件，从体验和页面流畅度来说，都会比HTML5要优秀很多。小程序相对于HTML5开发来说，除了熟悉API需要学习成本之外，还要学习小程序组件，布局。速度方面，传统HTML5在加载的时候受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面显示在浏览器中。用户经常需要等待很长时间，体验会受到影响。相比之下，小程序的两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。小程序的这种优化策略，可以减少用户的等待时间、加快小程序的响应速度

109.瀑布流如何保证最小高度？

参考：juejin.cn/post/684490…

110.calc, support, media各自的含义及用法？

@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；

@media 查询，你可以针对不同的媒体类型定义不同的样式。

111.Img 标签的 title 与 alt 的区别

鼠标滑到 img 上显示 title
图片加载失败显示 alt

112.文本过长 ... 处理

www.cnblogs.com/loongblogs/…

113. CSS3动画性能优化

github.com/AlloyTeam/M…

114.伪元素和伪类的区别和作用

概念和作用

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。
伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素

区别

作用不同

伪类是一种状态，可以看看做是选择器。比如鼠标经过伪类 :hover , 比如结构伪类 li:nth-child，一个冒号。
伪元素是元素，简单来说，就是用css 模拟出来了一个盒子。

权重不相同

伪类是 10 （类、属性选择器 [type=submit]）
伪元素是 1 (标签选择器 )

使用场景不同

比如:鼠标经过盒子，盒子里面的样式会有变化，则需要使用伪类
如果想在盒子内部插入一个小盒子，此时可以使用伪元素。

115.display:none与visibility:hidden的区别

display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。
visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。

116.img的srcset属性的作⽤?

img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源

表示浏览器宽度达到800px则加载middle.jpg达到1400px则加载big.jpg

117.空(void)元素有哪些？

空元素有：

area
base
br
col
embed
hr
img
input
link
meta
param
source
track
wbr

118.HTML5的离线储存怎么使用，它的工作原理是什么？

www.bilibili.com/read/cv1804…

119.浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器会直接使用离线存储的资源

120.title与h1的区别、b与strong的区别、i与em的区别

title与h1的区别

定义：

    title：概括了网站信息，可以告诉搜索引擎或者用户这个网站的内容主题是什么

    h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么

区别：

    title：显示在网页标题上； h1：显示在网页内容上

    title比h1更重要（SEO的角度）

场景：

    网站的logo都是用h1标签包裹的

2. b与strong的区别

定义：

    b：实体标签，是用来给文字加粗的

    strong：逻辑标签，用来加强字符语气的（盲人阅读器中）

区别：

    b：只有加粗的样式，没有实际的含义

    strong：表示标签内字符比较重要，用以强调的

为了符合CSS3的规范，b尽量少用，改用strong

i与em的区别

定义：

    i：实体标签，用来做文字倾斜的

    em：逻辑标签，用来强调文字内容的

区别：

    i：只是一个倾斜标签，没有实际含义

    em：表示标签内字符重要，用以强调的

场景：

    i：更多用在字体图标

    em：术语上（医药、生物）

自用前端面试题（HTML+CSS）

0.

1.src和href的区别

2.HTML的语义化是什么？该特性有什么优点？

3.DOCTYPE(⽂档类型) 的作⽤

4.script标签中defer和async的作用和两者的区别

5.常用的meta标签有哪些？

6.CSS选择器及优先级

7.position 属性的值有哪些及其区别？

8.box-sizing属性作用

9.讲一下CSS盒子模型

10.讲一下对BFC的理解？

11.如何实现让一个元素水平垂直居中？

12.隐藏页面中某个元素的方法

13.用CSS实现三角符号

14.什么是Flex布局？Flex布局常用属性有哪些？

15.rem是什么？有什么优缺点？和em有什么区别

16.百分比布局

17.浮动布局

18.如何使用rem或viewport进行移动端适配

19.清除浮动的方式有哪些？

20.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

display: none

visibility: hidden

opacity: 0

21.css sprite是什么？有什么优缺点？

22.link与@import的区别

23.display: block;和display: inline;的区别

24.PNG,GIF,JPG 的区别及如何选

25.display,float,position 的关系

26.px,em,rem,vw,vh区别

27.position:sticky的特性和使用

28.css行高line-height的一些深入理解及应用

29.rem布局和vw布局对比讲解

30.移动端如何实现1px

32.CSS什么情况下会导致回流？如何进行优化？

33.各种常见布局实现

34.什么是grid布局？和table布局有什么区别？和flex布局有什么区别？

35.什么是层叠上下文、层叠等级、层叠顺序？如何产生层叠上下文？

36. sass和less有什么异同？

37.什么是CSS预处理器？常见的有哪些？有什么作用？

38.浏览器将rem转成px时有精度误差怎么办？

39.已知下方布局代码？如何修改才能让图片宽度为300px？给出的代码不能修改

40.如何设计实现无缝轮播？

41.介绍下BFC、IFC、GFC和FFC

BFC

IFC

定义

产生条件

布局规则

应用场景

GFC

定义

布局规则

GFC应用场景

FFC

定义

布局规则

产生条件

应用场景

42.实现模糊搜索结果的关键词高亮

43.CSS实现几个div一行排列

利用float

使用display属性将div转换为内联元素或内联块状元素

44.如何设置div不换行

45.在div上既设置display:none，也设置v-show="true"，结果会怎么样？

46.两个div都设置float那么其父元素会怎样？为什么清除浮动可以解决这个问题？

47.preload和prefetch的区别

48.css的position属性支持哪些？

static

relative

absolute

fixed

sticky

50.通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

利用 calc 计算宽度的方法

利用 float 配合 margin

利用 float 配合 overflow 实现

利用 position:absolute 配合 margin 实现

利用 position:absolute 实现

22.`link`与`@import`的区别

23.`display: block;`和`display: inline;`的区别

27.`position:sticky`的特性和使用

45.在div上既设置`display:none`，也设置`v-show="true"`，结果会怎么样？

57.`flex-grow:2` 如何呈现?

78.列举`<a><a/>`标签的全部作用