一、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 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

            disabled 属性规定应该禁用 input 元素。

            被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。注释：disabled 属性无法与 <input type="hidden"> 一起使用。

五、什么是浏览器重绘和重排？什么情况下会触发重排？

       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的计算，它低于一切其他规则（比如全局选择符*定义规则）