css
1、介绍下CSS的盒子模型 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
css 是如何设置这两种模型的
box-sizing: border-box; width 不包含padding 和border
box-sizing: content-box;
css 3 伸缩盒模型弹性盒模型
27 base64的原理及优缺点
- 优点可以加密，减少了HTTTP请求
- 缺点是需要消耗CPU进行编解码
45 水平居中的方法
- 元素为行内元素，设置父元素text-align:center
- 如果元素宽度固定，可以设置左右margin为auto;
- 如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
- 使用flex-box布局，指定justify-content属性为center
- display设置为tabel-ceil
46 垂直居中的方法
- 将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
- 使用flex布局，设置为align-item：center
- 绝对定位中设置bottom:0,top:0,并设置margin:auto
- 绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
- 文本垂直居中设置line-height为height值
47 如何使用CSS实现硬件加速？
硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能，
- 一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免2D动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)
48 重绘和回流（重排）是什么，如何避免？
- DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何
- 属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分
- 重新绘制到屏幕上的过程称为重绘。引起重排的原因有
- 添加或者删除可见的DOM元素，
- 元素位置、尺寸、内容改变，
- 浏览器页面初始化，
- 浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排，
减少重绘和重排的方法：
- 不在布局信息改变时做DOM查询
- 使用cssText或者className一次性改变属性
- 使用fragment
- 对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素
如何实现小于12px的字体效果
transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;
如何获取dom对应的宽和高
dom.style.width/height;//设置获取的是内联样式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置
如何解决边距重叠问题
CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
伪类更偏向于匹配元素的状态
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
display有哪些值？说明他们的作用?
inline（默认）--内联
none--隐藏
block--块显示
table--表格显示
list-item--项目列表
inline-block
position的值？
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
rgba() 和 opacity 的透明效果有什么不同？
- opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
- rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
如果需要手动写动画，你认为最小时间间隔是多久？
16.7ms 多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔: 1s / 60 * 1000 ＝ 16.7ms
常见的媒体查询
CSS : @media only screen and (max-device-480px) {/css样式/}
媒体查询的原理
元素上下居中，有几种方式？
margin和padding分别适合什么场景使用？
何时使用margin：
需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：
需要在border内侧添加空白
空白处需要背景颜色
png、jpg、gif svg 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
为什么要初始化CSS样式
不同浏览器对有些标签的默认值是不同的，不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
如果没对CSS初始化往往会出现浏览器之间的页面显示差异。