21.px和em,rem区别？
px:绝对长度单位，像素px是相对于显示器屏幕分辨率来说的
em:相对长度单位，相对于当前对象内文本的font-size，em的值并不是固定的，em会继承父级元素的font-size（参考物是父元素的font-size）
rem:相对于html根元素的font-size
22. 1rem、1em、1vh、1px，vmin，vmax各自代表的含义？
rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
vmin/vmax: 取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。
如果窗口高度1080，宽度1920那么。 1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px。
23. CSS画一个三角形？
这属于简单的css考查，平时在用组件库的同时，也别忘了原生的css
.a { width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent; transform: rotate(90deg); /*顺时针旋转90°*/ } <div class="a"></div>
24.元素水平垂直居中
利用定位+margin:auto
利用定位+margin:负值
利用定位+transform
table布局
flex布局
grid布局
25.响应式布局原理
什么是响应式： 一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整
基本原理： 通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport.
实现方式
媒体查询
百分比布局
vw/vh
rem
26.CSS定位方式？
static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
27.css sprite（雪碧图，精灵图）是什么,有什么优缺点？
CSSSprites(精灵图)，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。
优点：
减少HTTP请求，极大提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需要在一张或几张图片上修改颜色或样式即可
缺点：
图片合并麻烦
维护麻烦
28.设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？
设备像素：又称为物理像素， 指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已
css像素： 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位 。css中长度分为两类：绝对单位和相对单位，px属于相对单位
设备独立像素： 与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念 。我们常说的分辨率，不严谨来讲是指的设备独立像素。在javascript中我们可以通过 window.screen.width/ window.screen.height 来查看
dpr：设备像素比， 代表设备独立像素到设备像素的转换关系
ppi：像素密度， 表示每英寸所包含的像素点数目
29.margin 和 padding 的使用场景
需要在border外侧添加空白，且空白处不需要背景 (色)时，使用 margin;
需要在border内测添加空白，且空白处需要背景(色) 时，使用 padding。
30.对line-height的理解，赋值方式
概念：
line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。
原理：
我们可以理解为将div分为三份，分别为上边距，内容，下边距。举例：div高度100px，字体为16px，那么上下边距计算为(100px-16px)/2
赋值方式：
带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
百分比：将计算后的值传递给后代
31.谈谈你对BFC的理解？触发条件？应用场景？
概念： BFC即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则。BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素
触发条件：
根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed
应用场景：
防止margin重叠
清楚内部浮动
自适应多栏布局
32.如何实现两栏布局，右侧自适应？三栏布局中间自适应？
两栏布局：
使用float左浮动左边栏，右边使用margin-left撑出左边栏宽度大小，为父元素添加BFC通过overflow：hidden开启。
flex布局
三栏布局：
下面三个方法原理与两栏布局第一个方法相同
两边使用 float，中间使用 margin
两边使用 absolute，中间使用 margin
两边使用 float 和负 margin
flex布局
display: table 实现
通过 display: table设置为表格，设置 table-layout: fixed`表示列宽自身宽度决定，而不是自动计算。
内层的左中右通过 display: table-cell设置为表格单元。
左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度
grid网格布局
33.说说flexbox（弹性盒布局模型）,以及适用场景？
理解：flex布局意为“弹性布局”，可以 简便、完整、响应式地实现各种页面布局 。 容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向
属性：
flex-direction 决定主轴的方向
flex-wrap 决定容器内项目是否可换行
wrap，换行
justify-content 项目在主轴上的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：两个项目两侧间隔相等
align-items 项目在交叉轴上如何对齐
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐 垂直居中
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
align-content
34.介绍一下grid网格布局
理解：Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列
容器属性：
display：grid该容器是一个块级元素/inline-grid该容器是一个行内元素
grid-template-columns 属性，grid-template-rows 属性：
设置列宽，行高几行几列。如果重复宽高可通过repeat(3,200px)表示3行列，200px宽高
grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
设置行列间距，grid-gap是两者简写
grid-template-areas 属性：用于定义区域
grid-auto-flow 属性： 划分网格以后，容器的子元素会按照顺序 ， 顺序就是由grid-auto-flow决定
项目属性：
grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性： 指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
grid-area 属性： 属性指定项目放在哪一个区域 。由grid-template-areas 属性划分区域
justify-self 属性、align-self 属性以及 place-self 属性
35.CSS3动画有哪些？
transition 实现渐变动画 transition动画详解
transform 转变动画 transform属性详解
animation 实现自定义动画 animation详解
36.怎么理解回流跟重绘？什么场景下会触发？
回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制
触发条件：
回流：
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
重绘------ 触发回流一定会触发重绘
颜色的修改
文本方向的修改
阴影的修改
37.如果要做优化，CSS提高性能的方法有哪些？
内联首屏关键CSS
避免使用css表达式
异步加载CSS
资源压缩
合理使用选择器
减少使用昂贵的属性 如 box-shadow/border-radius/filter/透明度/:nth-child 等
不要使用@import
38.如何实现单行／多行文本溢出的省略样式？
单行文本溢出
white-space：设置文字在一行显示，不能换行
overflow：文字长度超出限定宽度，则隐藏超出的内容
text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
clip：当对象内文本溢出部分裁切掉
ellipsis：当对象内文本溢出时显示省略标记（…）
text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的
多行文本溢出省略
基于高度截断 – 伪元素 + 定位
position: relative：为伪元素绝对定位
overflow: hidden：文本溢出限定的宽度就隐藏内容）
line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
height: 40px：设定当前元素高度
::after {} ：设置省略号样式 – 设置伪元素
position: absolute：给省略号绝对定位
content：“…”
基于行数截断 – 纯css
-webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
display: -webkit-box：和-webkit-line-clamp结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical：和-webkit-line-clamp结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden：文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本
39.让Chrome支持小于12px 的文字方式有哪些？区别？
Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制 。
解决方案：
zoom ： “变焦”，可以改变页面上元素的尺寸，属于真实尺寸
-webkit-transform:scale()： 针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩
-webkit-text-size-adjust:none： 该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小
区别：
Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排
-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化
-webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效
40.说说对Css预编语言的理解？有哪些区别?
理解： 扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便 。 本质上，预处理是Css的超集 。 包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件
有哪些：sass,less,stylus
比较less和sass：
相同点：
首先sass和less都是css的预编译处理语言，它们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用
区别：
less是基于JavaScript的在客户端处理 所以安装的时候用npm
sass是基于ruby所以在服务器处理
less优缺点
优点： less 简单,易上手;属于css的基础拓展;less更适合静态界面写样式时
缺点： JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器
sass优缺点
优点： 功能强大,更加丰富的拓展sass适合游戏或者其他做效果时需要逻辑来更换不同样式
缺点： 复杂对于新手比较不友好
