【JS】Web前端常见面试题（含答案）

CSS

1.简要描述浏览器渲染过程：

• 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render
• HTML/SVG/XHTML，解析这三种文件会产生一个 DOM Tree。
• CSS，解析 CSS 会产生 CSS 规则树。
• JavaScript脚本，主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.
  参考： http://blog.youkuaiyun.com/xiaozhuxmen/article/details/52014901

2.和CSS选择器优先级
优先级：（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

3.什么是盒模型，块元素、行内元素（内联元素）特性和区别，常用举例；

• 盒模型：是CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。
• 块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.（例：div、h1、table、p、ul、form、dl）
• 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.（例： a、br、img、input、label、i、select）
• 参考： http://www.cnblogs.com/laobeiV5/p/5114202.html

4.line-height:1.5与150%区别

• 150%： 父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承
• 父元素行高为1.5时，会根据子元素的字体大小动态计算出行高值让子元素继承
• 参考： https://www.zhihu.com/question/20394889

5.清除浮动的方法

• 添加新的元素，应用clear：both
• 给父级元素定义overflow
• after 方法：（注意：作用于浮动元素的父亲）
• 参考： http://www.cnblogs.com/qiye2016/p/5868217.html

6.css如何实现垂直居中（至少说2中方法）

• 实际高度height和所在行的高度line-height相等
• 设定Padding，使上下的padding值相同
• 让< div >模拟< table >，使用vertical-align
• 参考： http://www.cnblogs.com/hutuzhu/p/4450850.html

JS

1.js跨域访问如何实现

• document.domain + iframe (只有在主域相同的时候才能使用