1.什么是盒子模型?

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。


    2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

    行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
    块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
    空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img


      3.CSS实现垂直水平居中

      一道经典的问题,实现方法有很多种,以下是其中一种实现:
      HTML结构:
      
      <div class="wrapper">
           <div class="content"></div>
      </div>
      CSS:
      
      .wrapper {
          position: relative;
          width: 500px;
          height: 500px;
          border: 1px solid red; 
       }
      .content{
          position: absolute;
          width: 200px;
          height: 200px;
          /*top、bottom、left和right 均设置为0*/
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          /*margin设置为auto*/
          margin:auto;
          border: 1px solid green;    
      }


        4.简述一下src与href的区别

        href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
        
        src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。
        
        当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。


          5.Ajax的优缺点及工作原理?

          定义和用法:
          AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
          
          传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
          
          优点:
          1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求
          
          2.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
          
          3.基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离
          
          缺点:
          1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
          
          2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.
          
          3.对流媒体还有移动设备的支持不是太好等
          
          AJAX的工作原理:
          1.创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))
          
          2.判断数据传输方式(GET/POST)
          
          3.打开链接 open()
          
          4.发送 send()
          
          5.当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或者304(缓存)执行回调函数


            6.Web Storage与Cookie相比存在的优势:

            (1)、存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。
            
            (2)、存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。
            
            (3)、更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。
            
            (4)、独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。


              7.浏览器是如何渲染页面的?

              渲染的流程如下:
              1.解析HTML文件,创建DOM树。
                 自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
              2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
              3.将CSS与DOM合并,构建渲染树(Render Tree)
              4.布局和绘制,重绘(repaint)和重排(reflow)