好程序员web前端分享HTML5常见面试题集锦四 1、为什么要初始化CSS样式？ 答案：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。 2、浮动元素引起的问题？ 答案：a. 父元素的高度无法被撑开，影响与父元素同级的元素 b. 与浮动元素同级的非浮动元素会跟随其后 c. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构 3、line-height三种赋值方式有何区别？（带单位、纯数字、百分比）？ 答案：带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高 纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px 百分比：将计算后的值传递给后代 4、:link、:visited、:hover、:active的执行顺序是怎么样的？ 答案：L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜欢和讨厌两个词来概括 5、css属性content有什么作用？有什么应用？ 答案：css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容，可以配合自定义字体显示特殊符号。。 6、文字超出显示为省略号？ 答案：//单行： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; //多行： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 7、HTML5有哪些新增的表单元素？ 答案：datalist datetime output date month week time color number range email url 8、用纯CSS创建一个三角形的原理是什么？ 答案：首先，需要把元素的宽度、高度设为0。然后设置边框样式。 width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000; 9、什么时候可以触发BFC？ 答案：根元素，即html float的值不为none（默认） overflow的值不为visible（默认） display的值为inline-block、table-cell、table-caption position的值为absolute或fixed 10、style标签写在body后与body前有什么区别？ 答案：页面加载自上而下 当然是先加载样式。 写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）