1. 什么是css盒子模型
盒子的构成由margin border padding content决定
分为边框盒子和内容盒子
谷歌默认为内容盒子 IE为边框盒子
内容盒子：宽度和高度决定了内容的大小 盒子的大小需要计算
边框盒子：宽度和高度决定了盒子自身的大小 内容的大小需要计算
习惯使用边框盒子，为了兼容IE
2. css选择器的作用？常用的有哪些？css3新增的有哪些？
1作用是选中html进行样式设置
2 class id *
3 伪类选择器 :hover :focus :nth-type-of :checked
3. css样式的权重如何计算
1 首先看选择器的优先级*<元素选择器<class<id<!import
2 相同权重的选择器看顺序，用下面的样式
3 利用权重和代码的执行顺序解决样式覆盖的问题
4. css单位分类？哪些单位可以实现响应式布局？
em与rem的区别是什么？
em ex px 的区别是什么？
单位分为 相对单位和绝对单位
相对单位可以实现响应式布局
% 相对父元素，最大视图的大小
Em 相对于祖籍元素中的大小
rem 相对于根元素的大小
vw vh 相对于浏览器视图窗口
ex 相对字母‘x’大小 默认为浏览器默认‘x‘的大小
绝对单位
px
如何让谷歌浏览器字体小于12px?
transform 缩放 让字体大小小于12px
5. 如何实现多行文本省略？
text-overflow ellipsis
css 中哪些属性可以继承？
文本属性：font-size color font-family font-weight
布局属性不能继承
6. 如何去除inline-block默认缝隙
1. 压缩代码，不让元素间有缝隙
2. 用html注释，连接两个元素
3. 给父元素设置font-size 0
7. 如何实现垂直居中？
1. 通过绝对定位，2d平移实现垂直居中
2. 通过绝对定位 四个值为0 margin：auto 实现
3. 父容器弹性布局
8. display:none 与 visibility:hidden 区别是什么？
visibility属性的collapse属性值，在不同浏览器下有什么区别?
1 display:none 不占据元素空间 visibility：hidden 占据元素空间
2 谷歌保留位置，ie没有位置
外边距一般用于拉开相邻兄弟元素的距离
内边距一般用于拉开父子元素之间的距离
9. rgba 与 opacity
rgba 渐变 属性不能继承 一般用来写遮罩层
opacity 属性会被继承
10. 绝对定位与相对单位的区别？
绝对定位是相对与祖籍元素中具有position relative 的元素进行定位
特点：脱离文档流 位置移动幅度大 元素由block 转化为inline-block
优点：可以实现通用布局，兼容低版本的IE
缺点：触发重排，消耗浏览器的性能，不容易实现复杂的布局
====适合要求兼容低版本的IE 常用的布局
相对定位是相对于元素自身进行移动
特点：定位后不会脱离文档流，会占据位置，元素保留自身特点
优点：不会触发重排
缺点：定位后会占据位置
==== 只适合小范围的微调
绝对定位和固定定位的区别是什么？
固定定位是基于浏览器的视图进行定位
特点：定位后脱离文档流，位置被其他元素占据，块元素变成inline-block
缺点：会触发重排
====适用于 广告和固定导航等
如何清除浮动？
有多种方案，常用的是
.clear::after
content’ ’;
display:block;
clear:both;
}
11. 移动端布局
移动端：ios android 应用
混合app 开发 uniapp weex react-nactive tora ionic
移动端：微信公众号嵌入网页
移动端css样式：
1. 弹性布局
2. rem设计方案
3. 媒体查询
===响应式
4. 圣杯布局
5. 双飞翼布局
圣杯布局：为了让中间div内容不被遮挡，为中间的div设置了左右padding之后，将左右两个div 用position：relative分别配合right和left属性，以便左右两栏div移动后不遮挡中间的div
双飞翼布局：为了让中间div内容不被遮挡，直接在div内部创建子div用来放置内容
在该div里用margin-left 和margin-right为左右两栏div空出位置
12. 左右定宽中间自适应
1. 给左右两边元素定宽
2. 给父元素设置弹性布局
3. 中间子项目设置flow-grow：1；
13. 中间自适应高度，上下定高
1. 上下定高
2. 父元素设置弹性布局，并改变主轴方向 flex-direction
3. 中间子元素设置 flow-grow：1；
14. css性能优化方案：
1. 图片是加载的资源，通过使用精灵图减少加载图片次数
2. 能使用字体图标不使用图片
3. 尽量减少重排和重绘。重排一定会触发重绘，重绘不一定触发重排
4. 避免书写多余命名空间
5. 提取公共样式，提高样式的可复用性
15. 浏览器是怎么样解析css选择器的？
css选择器的解析是从右往左解析的。若从左往右的匹配，发现不符合规矩，则需要进行回溯，会损失很多性能。
若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步，就筛选掉了大量的不符合条件的最右节点（叶子节点）而从左往右的匹配规则的性能都浪费在失败的查找上面。
而在css解析完毕后，需要将解析的结果与DOM Tree 的内容 一起进行分析建立一棵Render Tree，最终用来进行绘图。
在建立Render Tree时（webkit 中的[Attachment]过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
