web前端面试题总结1.HTML/CSSpart1.什么是盒子模型？盒子模型由四部分组成：content、padding、margin和border。2.什么是行级元素？什么是块级元素？什么是空（void）元素？(1)行级元素特点：a．可以和其他元素排成一行，不需要另起一行。 b。无法设置元素的高度、宽度和上下外边距。 c。元素的宽度是它包含的文字和图片的宽度，不能改变。常见行级元素：a、span、img、input、textarea、label、button等（2）块级元素特点：a．每个块级元素单独占一行，后面的元素只能单独开始一行，两个元素不能共用一行。 b。可以设置元素的高度、宽度、行高和上下边距。 c.如果未设置元素的宽度，则默认为父元素的宽度。常见的块级元素：div,p,h1...h6,ol,ul,dl,table,address,blockquote,form等总结：（1）在css样式中使用display:inline设置块级元素asrow-levelElement(2)可以使用display:block将row-level元素设置为block-level元素3.简述src和href的区别(1)href指向网络资源的位置，建立当前链接之间的元素（锚点）或当前文档（链接），用于超链接。(2)src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签的位置；当请求src资源时，指向的资源将被下载并应用到文档中，例如js脚本、img图片和frame等元素。当浏览器解析到这个元素时，会暂停其他资源的下载和处理，直到该资源被加载、编译和执行。图片、框架等元素也是如此，类似于将指向的资源嵌入到当前标签中。这也是js脚本放在底部而不是放在头部的原因。4.什么是CSSHack？一般来说，针对不同的浏览器编写不同的CSS，就是CSSHack。IE浏览器Hack一般分为三种，conditionalHack,attributelevelHack,selectorHack//1,conditionalHack//2.属性Hack.test{color:#090\9;/*对于IE8+*/*color:#f00;/*对于IE7和更早版本*/_color:#ff0;/*对于IE6和更早版本*/}//3.选择器Hack*html.test{color:#090;}/*对于IE6和更早版本*/*+html.test{color:#ff0;}/*ForForIE7*/5.position的值，relative和absolute是相对于谁定位的？absolute：生成一个绝对定位的元素，相对于最近的非静态定位的父元素定位。fixed（不被旧的IE支持）生成绝对定位的元素，通常相对于浏览器窗口或框架定位。relative生成??一个相对定位的元素，相对于它在正常流中的位置定位。静态默认。没有定位，元素在正常流中显得很粘。要生成粘性定位元素，容器的位置是根据正常文档流计算的。请求，并将请求发送到本地域名服务器。第二步：本地域名服务器收到请求后，首先查询本地缓存。如果有这样一条记录，则本地域名服务器直接返回查询结果。第三步：如果本地缓存中没有该记录项，则本地域名服务器直接向根域名服务器发送请求，根域名服务器返回给本地域名服务器一个查询到的域名（根的子域）主名称服务器的地址。第四步：本地服务器向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存。如果没有该记录，则返回相关的下级域名服务器地址。第五步：重复第四步，直到找到正确的记录。2.Web前端性能优化的途径减少http请求，合理设置HTTP缓存每个http都需要启动一个独立的线程来处理。减少http的主要手段是合并css、javascript、图片b。使用浏览器缓存(1)静态资源文件可以通过设置http头中的cache-control和expires属性来设置浏览器缓存。(2)静态资源变化需要及时应用到客户端浏览器，可以通过更改文件名来实现，即更新javascript文件并不是更新javascript文件的内容，而是生成一个新的js文件并更新html文件中的引用。(3)使用浏览器缓存策略的网站在更新静态资源时应采用增量更新的方式。C。启用压缩在服务器端压缩文件，在浏览器端解压文件，可以有效减少通信传输的数据量。d.lazyload图片等图片，在页面刚加载时只加载第一屏，当用户继续向后滚动时才加载后续图片。e.css放在页面顶部，javascript放在页面底部。F。减少cookie传输每个请求和响应中都包含Cookie，过大的cookie会严重影响数据传输。g.javascript代码优化
