1.css如何实现标准模型与ie盒模型的切换
content+padding+border+margin
box-sizing:content-box;(标准盒模型) content
box-sizing:border-box;(ie盒模型) 宽高计算 content+padding
2.css如何实现文字反过来的效果
上下镜像翻转 transform:rotate(180deg)
左右对称翻转 unicode-bidi: bidi-override; direction: rtl;
3.css的优先级
!important>style>id>class>标签
A---内联样式
B---ID
C---class 属性 伪类选择器
D---标签 伪元素 选择器
#test li{....} ul.list li{......} li{....}
(0,1,0,1) > (0,0,1,2) > (0,0,0,1)
4.重排(回流)和重绘 reflow和repaint的区别
什么时候回重排回流reflow----元素的位置尺寸大小发生了变化，浏览器需要重新计算元素的几何属性，这个时候就会重排
页面窗口大小发生了变化
calc计算宽高的方式
添加或者删除元素
元素的位置，尺寸发生改变
元素内容发生变化
页面一开始渲染的过程
什么时候重绘----在构造渲染树和重排时，已知节点的可见性，几何位置尺寸等属性，将节点转化为屏幕上的实际像素的阶段叫做重绘
v-show 切换的过程就会发生重绘 因为几点的可见性属性发生了变化
如何减少重排和重绘
使用translate的方式改变元素位置 而不是直接改变left top
position fixed ansolute 这样元素会图片里文档流
读取节点属性时，先存成变量再重复使用
样式集中改变 用类名 或者cssText的方式
少使用getBoundingClientRect() getComputedStyle() offsetXXX clientXXX scrollXXX 这些事元素的布局信息，调用时回强制刷新浏览器的操作队列，造成回流
transform opacity filters will-change