前端面试题总结 HTML+CSS篇（一）

介绍一下dl\dt\dd标签

dl是列表标签，dt和dd须出现在dl中，其中，dt是上层项目，dl是下层项目。在浏览器渲染时，二者差别体现在dd会因为-webkit-margin-start属性而距离dt的左边有一定的边距。

行内元素、块级元素、空元素都有哪些？

如果不考虑html5的语义化标签，那么
行内元素有：

img\input\a\span\i\strong\select\button\label\textarea

块级元素有：
div\ul\ol\dl\li\dd\dt\blockquote\p

空元素是指单个标签，中间没有内容的元素，包括：
input\img\br\hr\meta\link

css如何实现垂直水平居中？

请简述href和src的区别

href指向网络资源所在位置，建立和当前元素或文档的连接，常用于a标签和link标签。
src指向外部文档，指向的内容将会嵌入到文档中当前标签所在位置。在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
总而言之，我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个引用关系。

请简述link和@import的区别

（1）link是XHTML标签，除了加载CSS外，还可以定义RSS（ 真正简易联合，被设计用来展示选定的数据）等其他事务；@import属于CSS范畴，只能加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

（3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

（4）link支持使用Javascript控制DOM去改变样式；而@import不支持。

什么是CSS hack?有什么作用？

通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。Hack一般又分为三种，条件Hack（if ie）、属性级Hack(_color)、选择符Hack(* + html)

请简述px，rem和em有什么区别？

px是绝对尺寸单位，其值是固定的。而em和rem是字体相对尺寸单位，其值并不固定。em会继承父级元素的字体大小，而rem则是相对于html根元素确定的。

什么是优雅降级、什么是渐进增强？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

说说对BFC的理解

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

table布局的缺点？

（1）首先，table布局会占用更多的字节，从而影响下载速度
（2）table布局编写起来麻烦耗时，即不利于设计思维，也影响开发者阅读体验。
（3）稍加改动就会造成大量的重排操作，且不利于浏览器的顺序渲染。