web前端面试题小结

HTML + CSS

1. 标准盒子模型与 IE盒子模型，以及box-sizing属性
   w3c标准盒子模型： box-sizing：content-box
   height高度只包括content的高度,不包括padding，margin以及border的高度
   IE盒子模型： box-sizing：boder-box
   height高度不但包括content的高度，还包括padding，border的高度，但不包括margin的高度

2. css选择器有哪些？哪些属性可以继承
   一共9种。id选择器（#myid）,类选择器（.myClassName）,标签选择器（div,ul,p）,相邻选择器（h1 + p）,子选择器（ul>li）,后代选择器（ul li）,通配符选择器（*），属性选择器，伪类选择器（a:hover, li:nth-child）
   可继承的属性： font-size, font-family,color
   不可继承的属性： padding，height，margin，width，border

3. css优先级如何计算？

4. 清除浮动的几种方式
   一、额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear:both）
   二、父级添加overflow属性（父元素添加overflow：hidden）
   三、 使用after伪元素清除浮动（推荐使用）
   四、使用before和after双伪元素清除浮动

5. css优化、提高性能的方法有哪些？
   加载性能：
   (1)css压缩：将写好的css进行打包压缩，可以减少很多体积
   (2)减少使用@important，而建议使用link,因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载
   选择器性能：
   (1)避免使用通配规则
   (2)尽量少的使用标签选择器，而是用类名选择器
   (3)不要用标签去限定ID或者类选择器：如,ui #nav
   (4)尽量少的去使用后代选择器，降低选择器的权重值
   (5)考虑继承
   渲染性能：
   (1)慎重使用高性能属性：浮动、定位
   (2)尽量减少页面重排、重绘
   (3)抽象提取公共样式，减少代码量
   可维护性、健壮性：
   (1)样式与内容分离；将css代码定义到外部css中
   (2)将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css可维护性

6. 浏览器是怎样解析css选择器的？
   浏览器对css选择器是从右到左进行匹配解析的，如果是子代选择器，浏览器会遍历所有的子元素来确定是否是指定的元素。

7. 如何让Chrome支持小于12px 的文字？
   谷歌最小字体是12px，不管你设置8px还是10px，在浏览器中只会显示12px,解决这个问题我们的做法是：针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放

<style>
	p span {
		font-size: 10px;
		-webkit-transform:scale(0.8);
		display: block;
	}
</style>
<p>
	<p><span>测试</span></p>
</p>

8. 如何让页面文字变得更加清晰，更细，用css怎么做？
   -webkit-font-smoothing: antialiased

9. 如果需要手动写动画，你认为最小时间间隔是多少？
   因为多数显示屏默认的频率是60HZ,即一秒刷新60次,所以时间间隔为1/60 *1000ms = 16.7ms

10. link和@import区别
    @import