css部分

两种盒模型分别说一下。

CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin。

两种盒模型的区别：宽度和高度的计算方式不同。
• w3c盒模型（标准盒模型）
  width = content-width
  height = content-height
  
• ie盒模型（怪异和模型）
  width = content-width + padding-width + border-width
  height = content-height + padding-height + border-height
  

如何垂直居中？

• flex布局：display:flex; justify-content: center; align-items: center;

---

• 父display:table;子display:table-cell、vertical-align:middle;它俩在一起可以解决居中的问题。

---

• 父height、line-height;子display:inline-block、vertical-align:middle、line-height;居中。

Flex 怎么用，常用属性有哪些？

• Flex意为：‘弹性布局’
• flex-direction:row（水平）、column（垂直）
• justify-content:center（居中）、flex-start（起始点顶部对齐）、flex-end（终点底部对齐）、

  space-between：两端对齐，组件之间的间隔都相等。

  space-around：距边界两侧的间隔相等，元素之间的间隔比项目与边框的间隔大一倍。

• align-items:center（居中）、flex-start（起始点顶部对齐）、flex-end（终点底部对齐）
• flex-wrap:nowrap（不换行）、wrap（换行）

Grid布局用过吗？

• grid是栅格布局系统
• display:grid;
  grid-template-columns设置列宽
  grid-template-row设备行高
  grid-gap 网格项间隙

BFC 是什么？

• BFC(Block formatting context)直译为"块级格式化上下文"。
• 属于同一个BFC的两个相邻Box的margin会发生重叠。
• 1.利用BFC避免margin重叠。
  2.自适应两栏布局。
  3.清楚浮动。

CSS 选择器优先级

• !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS 中 class 和 ID 的区别

• id和class都是选择器，唯一不同的地方在于权重不同。id > class。
• class可重复，id是唯一的。

CSS reset 和 CSS normalize是什么？

• CSS reset重置默认样式。删除浏览器内置样式。
• CSS normalize Normalize.css是一种CSS reset的替代方案。
  1、保护有用的浏览器默认样式而不是完全去掉它们
  2、修复浏览器自身的bug并保证各浏览器的一致性
  3、优化CSS可用性：用一些小技巧
  4、Normalize.css是模块化的

浮动 (Floats)元素有哪些特性？

• 任何定义为float的元素都会自动被设置为一个块状元素显示。
• 当我们没有指定浮动元素宽度时，浮动元素会自动收缩到能够包含内容的宽度。
• 浮动模型不会与流动模型发生冲突

清除浮动说一下

• 1.对父元素中最后一个元素清除浮动。div style=”clear:both”。
• 给父元素添加overflow:hidden
• 2.对父元素加样式.clearifix样式。.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }

z-index和叠加上下文是如何形成的？

• 在一个层叠上下文，所有的元素根据规则从下到上排列，分成七个等级。
  1、背景和边框 - 元素的背景和边边框。层叠上下文中的最低等级。
  2、负z-index值 - 有着负z-index值的子元素。
  3、块级盒 - 文档流中非定位子元素。
  4、浮动盒 - 非定位浮动元素。
  5、行内盒 - 文档流中行内级别非定位子元素。
  6、z-index:0 - 定位元素。这些元素形成新的层叠上下文。
  7、正z-index值 - 定位元素。层叠上下文中的最高等级。
  层叠上下文七种层叠等级示意图

CSS sprites是什么

• 多个图像组合成一个称为精灵表或拼贴图的单个图像，用户不下载多个文件，而是下载单个文件并通过偏移文件显示必要的图像。

字体图标和svg图标用过吗

• iconfont阿里巴巴图标库。
• Element和antd vue ui中的icon。

你日常工作是如何处理浏览器兼容的？

• 浏览器中内置样式，使用css normalize进行样式和浏览器的兼容。
• Margin不一致的问题：
  当有多张图片需要排在一行时，我们通常使用“Float：Left”来实现，这样一来，浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display：inline”项即可。
• DIV居中问题：
  通常我们会利用“vertical-align:middle”来实现，这对于搜狗浏览器来说，是正常的，但是对于IE浏览器来说，却并没有效果。对此，一种较好的解决方法是：将文字的行高设置与DIV一样时即可解决问题。
• 设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
  给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

如何为有功能限制的浏览器提供网页？

渐进增强，优雅降级是什么？

• 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

有哪些的隐藏内容的方法？

• display：none;删除dom树上的节点。
• visibility: hidden ;文档流的位置变空，会占页面上的空间。
• overflow：hidden；
• 内容透明度设置为0

栅格系统是什么

你用过媒体查询吗？

• 响应式布局
• @media screen and (min- 400px) and (max- 700px) { … }

如何优化网页的打印样式？

• 1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
• 2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
• 3、隐藏掉不必要的内容。（@print div{display:none;}）
• 4、打印样式表中最好少用浮动属性，因为它们会消失。
• 5、如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。

如果设计中使用了非标准的字体，你该如何去实现？

• 1、用图片代替。
• 2、使用在线字库。

浏览器是如何判断元素是否匹配某个 CSS 选择器？

• 首先浏览器会生成一个元素集合，这个集合一般是由最后一个索引生成的(如果没有索引就是所有元素的集合)。随后，从后向前匹配，如果不符合上一部分，就将这个元素从集合中删掉，如此操作直至整个集合都遍历完成，最后剩下的元素就是匹配当前CSS选择器的。

伪元素 (pseudo-elements) 有什么用？

• 可以不用再多写一个 dom; 可以用 content 搭配出很多效果

列出你所知道的 display 属性的全部值

• block、inline、flex、grid、list-item、table、table-cell、content、 inline-block、inline-flex

inline 和 inline-block 的区别

• inline - 内联元素特点：1、和其他元素都在一行上；2、元素的高度、宽度及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
• inline-block - 内联块状元素：1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。

relative、fixed、absolute 和 static 元素的区别？

• relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
• fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
• absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
• static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？

• 响应式是通过视口分辨率识别不同客户端展现不同的布局和内容，一套代码。(bootstrap)
• 自适应是为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。多套代码。

为什么提倡使用 translate() 而非 不是 absolute？

• translate()是transform的一个值。
• 改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）
• transform使浏览器为元素创建一个 GPU 图层;translate改变位置时，元素依然会占据其原始空间。
• 而改变绝对定位会触发重新布局，进而触发重绘和复合。改变绝对定位会使用到 CPU。
• 因此translate()更高效，可以缩短平滑动画的绘制时间。