包含JS、CSS、React、浏览器等 前端经典面试题( 八 )

/*** 在标准浏览器下使用* 1 content内容为空格用于修复opera下文档中出现*contenteditable属性时在清理浮动元素上下的空白* 2 使用display使用table而不是block:可以防止容器和*子元素top-margin折叠,这样能使清理效果与BFC,IE6/7*zoom: 1;一致**/.clearfix:before,.clearfix:after {content: " "; /* 1 */display: table; /* 2 */}.clearfix:after {clear: both;}/*** IE 6/7下使用* 通过触发hasLayout实现包含浮动**/.clearfix {*zoom: 1;}8、PNG,GIF,JPG 的区别及如何选参考答案GIF:

  1. 8 位像素,256 色
  2. 无损压缩
  3. 支持简单动画
  4. 支持 boolean 透明
  5. 适合简单动画
JPEG:
  1. 颜色限于 256
  2. 有损压缩
  3. 可控制压缩质量
  4. 不支持透明
  5. 适合照片
PNG:
  1. 有 PNG8 和 truecolor PNG
  2. PNG8 类似 GIF 颜色上限为 256,文件小,支持 alpha 透明度,无动画
  3. 适合图标、背景、按钮
9、display,float,position 的关系参考答案
  1. 如果display为 none,那么 position 和 float 都不起作用,这种情况下元素不产生框
  2. 否则,如果 position 值为 absolute 或者 fixed,框就是绝对定位的,float 的计算值为 none,display 根据下面的表格进行调整 。
  3. 否则,如果 float 不是 none,框是浮动的,display 根据下表进行调整
  4. 否则,如果元素是根元素,display 根据下表进行调整
  5. 其他情况下 display 的值为指定值 总结起来:绝对定位、浮动、根元素都需要调整display
10、如何水平居中一个元素参考答案