1、position有几种取值，分别是什么意思？
position有四种取值
- relative相对定位，参照物为自己本身，不脱离文档流(他表面上可以脱离文档流但实际上自己本身还占位置)，不改变元素类型，相对于自己本身定位
- absolute绝对定位，参照物默认的是body，完全脱离文档流，行内元素加了绝对定位就变成了块元素(不给固定宽高，他的宽高就是内容撑开的宽高)，相对于body定位
- fixed固定定位，参照物为浏览器可视区，完全脱离文档流
- static静态定位，是position属性的默认值，无论怎么设置元素的位置都不会发生改变，不常用
偏移量为：top(上)、bottom(下)、left(左)、right(右)
四种取值中除了static之外，其他属性都可以通过z-index进行层次分级（最大值为0~9999）
2、浏览器中的回流和重绘是什么，分别在什么情况下触发？
什么是回流？
当render tree中的一部分或者全部因为元素的规模尺寸、布局、隐藏等改变而需要重新构建
什么是重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格等，是不会影响布局的，比如background-color
每个页面至少需要一次回流，就是在页面第一次加载的时候，这个时候是一定会发生回流的，因为要构建render tree ，在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受到影响的部分到屏幕中该过程为重绘。
区别：
回流必将引起重绘，而重绘不一定会引起回流
比如：
只有颜色改变的时候就只会发生重绘而不会引起回流，但当页面布局和几何属性改变时就需要引起回流
3、px、em、rem的区别
px：固定的像素，不能自适应页面大小
em：相对于父元素
rem：相对于根元素（根元素是html）
4、清除浮动的方式有哪些？最优的是哪一种？
给父级div添加：
- height
- overflow:hidden/auto
- display:table
- 伪类：after和zoom *****
- 父级div也浮动，需要定义宽度
在结尾处添加：
- 加br标签clear:both
- 加空div标签clear:both
推荐使用after伪元素清除浮动：
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</body>
优点：
用after在需要清除浮动的元素后面通过content添加内容，使这个内容display：block；成为块级，再用clear：both；清除浮动。这样做减少了一个空标签，节省了一个DOM元素的渲染
缺点：
ie6-7不支持伪元素：after，使用zoom:1 触发hasLayout
5、readonly和disabled的区别
<input type="text" name="name" value="xxx" disabled />
<input type="text" name="name" value="xxx" readonly />
这两种写法都会使显示出来的文本框不能输入文字
disabled会使文本框变灰，而且通过表单提交时，如果有的话，获取不到文本框中的value值
readonly只是使文本框不能输入，外观没有变化，而且表单提交时不影响获取value值
另外：
readonly只针对input(text / password)和textarea等可编辑的type类型有效
disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等
6、css优先级算法如何计算？有什么不同？
- 优先级就近原则，同权重情况下样式定义最近者为准
- 载入样式以最后载入的定位为准
优先级为:
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
!important > id > class > tag
important 比 内联优先级高
扫一扫
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
