一、说说对盒模型的理解

css在文档布局的时候，会对每一个元素看作一个个矩形盒子 盒模型分为两种：标准盒模型，怪异盒模型

• 标准盒模型：

• 盒子的总宽高 = width / height + padding + border + margin

• 怪异和盒模型

• 盒子的总宽高 = width / height + margin 可以通过box-sizing : border-box / content-box 设定盒模型类型

二、CSS选择器有哪些，优先级是什么

CSS选择器分为id选择器、类选择器、标签选择器、后代选择器、后代选择器、子选择器、相邻选择器 还有伪类选择器、属性选择器 优先级是 内联 > ID选择器 > 类选择器 > 标签选择器 因为伪类选择器也是类的一种，所以他的优先级代码是 10 与之同级的还有属性选择器 标签属于元素，伪元素属于元素所以他们的优先级代码为1

三、哪些属性可以继承

• 文本的属性比如font
• 文本系列的比如缩进、行高等
• 列表属性list-style
• 光标属性

四、em / px / rem / (vh、vw)有什么区别

他们都是前端开发中能用到的单位 em：相对长度单位，指的是相对于对象内文本的尺寸，如果此文本没有设置单位，则使用浏览器的长度单位 px：1.1的比例下1px对应1像素点，就是浏览器的每个像素点 rem：相对单位，相对于HTML根元素的字体尺寸 vw/vh：就是将浏览器的窗口分为100份，在pc端指的是浏览器的可视区域，移动端指的是视口 rem 和 px的转化 如果设计稿是750px 我们将布局分为100份 那么 1 rem = 7.5px

五、web移动端适配问题

1. 移动端采用什么布局 定宽布局，一般使用的设计稿是750px，使用响应式的方式，有两种解决方案 正常是使用lib-flexible vant中也有解决方案，使用postcss-px-to-viewport或者使用postcss-pxtorem插件 + lib-flexible
2. 移动端在什么浏览器上面测试 chorme，safari（苹果浏览器），微信x5，uc，还有手机自带的浏览器
3. 移动端怎么做竖屏显示 检测到竖屏的时候，给元素添加90deg旋转，检测到横屏改为0deg
4. 为什么移动端click会有300ms延迟 移动端的浏览器会有一些默认行为，比如双击缩放，双击滚动，主要是为了增加用户体验设计的，当用户操作的时候，会优先判断是否触发了默认行为
5. 固定定位布局键盘挡住输入框内容 一般没有用到固定布局😂

• 在键盘弹出时判断可视区高度和输入框高度，看输入框是否还在可视区，
• 如果不在可视区，就将input的固定定位位置改变

6. 为什么安卓浏览器看背景图片，有些设备会模糊 如果手机分辨率小，如果按照分辨率显示网页字就会非常小，如果想要使图片更为清晰，就使用background-size：contain
7. 移动端1px问题及解决方案

在移动端，因为屏幕分辨率的问题，分为一倍屏、二倍屏、三倍屏所以1px可能会被渲染成2、3像素点 方法1. 用height 1 的div，然后用媒体查询，设置transform：scale(.5) 方法2. 用伪类设置线，然后缩放 方法3. 使用js的方式，线判断几倍屏然后修改视口的属性

// 不用看，用到复制上去
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');
}

8. 设备像素、css像素、设备独立像素、dpr、ppi之间的区别 设备像素：就是物理像素，设备控制最小物理单位 css像素：按照缩放比例，将内容展示在屏幕中，1：1的缩放比例下， css像素与物理像素一一对应 dpr：代表独立像素到设备像素的转换关系 ppi：像素密度

六、BFC机制的理解

BFC即块级格式化上下文，它是页面中的渲染区域，并且有一套属于自己的渲染机制

• 内部的盒子会垂直方向一个一个放置
• 对于同一个BFC两个相邻盒子margin会重叠，与方向无关
• BFC区域不会与浮动元素重合，早期用于做两栏布局
• 计算BFC元素高度时，浮动元素也会参与计算
• 容器中与容器外不会互相打扰 BFC元素的触发条件
• 根元素
• 浮动元素
• overflow值不为visible
• display：为table、flex等
• 定位的元素 应用场景
• 防止margin重叠，两个盒子分别触发BFC机制
• 清除浮动
• 清除高度塌陷
• 两栏布局

七、元素水平垂直居中的方法

• 定位然后都设置为0，margin：auto
• 定位top、left 50% 然后transform
• flex布局

八、dom重绘和回流

重绘：当页面的颜色，背景颜色等发生改变时会触发浏览器对页面的绘制 回流：浏览器对所有的内容重新进行计算 回流触发的时机：

• 页面的布局发生改变
• 添加删除元素
• 元素位置发生改变、页面尺寸、浏览器窗口发生改变
• 还有最重要的一个浏览器获取元素的特定属性比如offset等 如何减少重绘
• 读写分离
• 多用浏览器的动画，
• 对于复杂的动画，最好脱离文档流
• 多使用transform、opactiy这些都特殊处理过，不会进行重绘
• 避免使用css表达式 九、CSS优化
• 异步加载css
• 合理使用选择器，因为选择器是从右到左加载，所以耗费比较高
• 压缩css
• 读写分离
• 不要使用css表达式 十、单行 / 多行文本溢出省略 单行： text-overflow:elipsis;white-space: nowrap;overflow:hidden 多行：

-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

十一、CSS画三角形

1. 宽高都设置为0
2. 设置border-width
3. 设置某个方向的border-color 十二、CSS预编译语言 sass、less、stylus