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;