前端面试题

一、HTML部分

空元素有那些

<area> <base> <br> <col> <colgroup> <command>

<embed> <hr> <img> <input> <keygen> <link>

<meta> <param> <source> <track><wbr>

前端页面有那三层构成，分别是什么？作用是什么？

网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

二、CSS部分

flex布局；

https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb

适配不同尺寸屏幕的CSS

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

css中link和@import的区别

@import + 空格+ url(CSS文件路径地址);

<link href="img/divcss5.css" rel="stylesheet" type="text/css" />

Display:none和visibility:hidden的区别

它们的作用都是将元素隐藏，display:none不保留物理空间，visibllity:hiddden视觉上隐藏，保留物理空间，

img标签上title和alt属性的区别是什么？

alt是给搜索引擎识别，在图像无法显示时的替代文本；title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。