一、position有几种取值，分别是什么意思？
css中的position有4种取值，分别是static、fixed、relative、absolute。
详细解释：
static：相当于没有定位，元素会出现在正常的文档流中。
fixed：元素框的表现类似于absolute，但是fixed是相对于视窗本身，也就是浏览器窗口而定位的。所以，采用该定位的元素在页面下拉的时候，其位置并不会发生变化。
relative：生成相对定位的元素，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留。
absolute：生成绝对定位的元素，相对于static定位以外的第一个有定位的祖先元素进行定位。由于static定位相当于没有定位，所以absolute定位实际上就是相对于有定位的第一个祖先元素定位，如果所有的祖先元素都没有定位，则相对于初始包含块或者画布，一般就是body元素定位。
二、px、em、rem的区别
1、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
3、em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。
总之：对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
三、清除浮动的方式有哪些？最优的事哪一种？
（1）给父级元素单独定义高度（height）
原理：如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。
（2）在标签结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，不利于页面的优化。
（3）父级div定义 伪类:after 和 zoom ------------比较支持
原理：元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题，写法是固定的，不理解也可以直接复制使用；（小编大力推荐使用此种方法，简单便捷，只需添加一个class即可解决问题）
缺点：css代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
（4）父级div定义 overflow:hidden
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。（不建议使用此种方式，可能会影响页面元素布局）
（5）父级div定义 overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
四、readonly和disabled的区别
两个属性都可以作用于input等表单元素上，都使得元素成为“不可用”的状态；
1、字面意义上的区别：
readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单“只读”与“不只读”似乎没有啥区别；
disabled表示“使残废，使无效”，都残废了，那还管你有没有文字内容，都得残掉
2、两者的作用范围区别在哪呢？。
disabled属性可以作用于所有的表单元素。
readonly属性只对可以输入的表单元素有效，如：（text、password、文本框等）
3、作用程度的区别：
disabled属性阻止对元素的一切操作，例如获取焦点，点击事件等等。
readonly属性只是将元素设置为只读，其他操作正常。
4、readonly和disabled对表单提交的作用不同
disabled属性可以让表单元素的值无法被提交。
readonly属性则不影响提交问题。
总结一下子：
readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。readonly 属性可与 或 配合使用。
disabled 属性规定应该禁用 input 元素。
被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。注释：disabled 属性无法与 一起使用。
五、什么是浏览器重绘和重排？什么情况下会触发重排？
1、 什么是浏览器重绘和重排？
重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。
回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）
通过上诉我们知道：回流必定引发重绘，重绘不一定引发回流。回流的代价比重绘高。
2、什么情况下会触发重排？
（1）哪些属性的修改会引起回流：
DOM的添加和删除；
页面的加载；
元素尺寸改变——边距、填充、边框、宽度和高度；
元素位置的改变；
内容变化，比如用户在input框中输入文字；
浏览器窗口尺寸改变——resize事件发生时；
获取某些属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight。（浏览器为了返回最精确的值，需要flush队列，因为队列中可能会有影响到这些值的操作）
（2）常见引起重绘的属性：
六、css优先级算法如何计算？有什么不同？
通过CSS的specificity来计算优先级，specificity的规则用一个四位数来表示，更像四级从左到右，左的最大级，一级大于一级，数位之间没有进制，多个选择符用到同一个元素上时那么specificity上值高的最终获得优先级。
优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;优先级为:!important > id > class > tagimportant比内联优先级高(style)
1、行内样式优先级specificity值为1,0,0,0 高于外部定义
2、按CSS代码中出现的顺序决定，后者CSS样式居上；
3、!important声明specificity值优先级最高
4、由继续而得到的样式没有specificity的计算，它低于一切其他规则（比如全局选择符*定义规则）