前端-HTML-css面试题归纳

1.style标签写在body后和body之前的区别

    浏览器的解析过程：

    文件资源的下载完成 => dom解析（树形的数据结构 dom tree）+ CSS解析（CSSOM） => 数据 tree => layout（布局） => paint（渲染）

    如果style写在body后面，浏览器会html解析是逐行进行解析的，html解析完成后，然后去解析css(html解析完成，要等待css)，可能会出现白屏的现象，对于ie浏览器的某些版本出现页面闪烁的现象。

2.HTML5中为什么只需要写?

        - html 超文本标记语言
        - html 4.01及以前的版本，引入 DTD (document type defition) 文档类型定义, 因为它们遵循的 SMGL规范(标准通用标记语言)，html xml都是在SMGL基础上发展的；HTML5不是遵循SMGL规范，它不需要引用。 

3.介绍下标准的盒子模型和低版本的盒子模型的区别

• ie 8以下为怪异盒模型，width=content +padding +border
• 标准盒模型：width=content
• 变换：box-sizing： content-box（默认.标准）,border-box(怪异)
• 用法：在移动端开发时，在制作导航按钮的时候，宽度过宽，出现滚动条的时候，可以转换为border-box来消除滚动条。

4.介绍下精灵图(雪碧图)的作用 用法及优缺点？ 有没有替代精灵图更好的方案

• 优点：
  - 减少网页的http请求，从而加快了网页加载速度，提高用户体验。

            - 减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。
  
            - 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
  
            -更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
  

  • 缺点：
    -在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。

          -CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置。
          
          -在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。
          
          -精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图。
    

    -方案：

      -可以使用Icons fonts库；
      https://www.iconfont.cn/
      http://www.fontawesome.com.cn/
    

5.在使用 display: inline-block时， inline-block元素会有4px左右的空隙，这是什么原因导致的，说出你的解决办法

原因：父元素的字体大小影响子元素转换为行内块之间的间隔，宽度约为父元素的三分之一
-代码之间的空格删除；
-闭合标签和相邻开始标签写在一起；
-必和标签的尖括号和相邻开始标签写在一起；
-两行代码之间用注释隔开；
-删除闭合标签，但是在xhtml下无法识别；
-父元素的font-size设置为0，在inline-block下重新设置字体大小；
-父元素display:table；