css面试题基础@酷酷的小航航

Position属性四个取值用法和区别

static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。

relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。

absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。

fixed：绝对定位，相对于浏览器窗口进行定位，同样是使用top、bottom、right、left。

浏览器中的回流和重绘是什么

重绘：当元素的外观或外观可见性（visibility）发生变化时会触发重绘
回流：render树中的部分或全部因为元素的规模尺寸、布局、隐藏等改变，需要重新计算render树。

避免回流和重绘方法
减少回流、重绘其实就是需要减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略

回流时，浏览器会使渲染树中受影响的部分失效，然后重新构造这部分的render树。完成

回流之后浏览器会重新布局、绘制受影响的部分到屏幕中，该过程就是重绘。所以回流必定会引起重绘，但重绘不一定引起回流。
每个页面至少需要一次回流，就是页面第一次加载时。回流变化涉及到部分页面（或整个页面）的布局。一个元素的回流导致其所有子元素以及DOM中紧随其后的祖先元素和其子元素都发生回流。

执行顺序 先回流后重绘

px、em、rem的区别

1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
3、rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。

清除浮动的方式有哪些？最优的事哪一种？

（1）给父级元素单独定义高度（height）
（2）在标签结尾处加空div标签 clear:both
（3）父级div定义 伪类:after 和 zoom ------------比较支持
4）父级div定义 overflow:hidden

表单中Readonly和Disabled的区别

这两种写法都会使显示出来的文本框不能输入文字，

但disabled会使文本框变灰，而且通过通过表单提交时，获取不到文本框中的value值（如果有的话），

而readonly只是使文本框不能输入，外观没有变化，而且表单提交时不影响获取value值。

还有：

Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。

css优先级算法如何计算？

1、！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
2、权重算法：(0,0,0,0)==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的3、比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。