前端面试题(html+css)

一、行内元素之间出现空白间隙如何解决？

行内元素，包括 display 为 inline 和 inline-block 的元素，它们如果相邻，那么中间就会出现空白间隙

产生原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据 white-space 的处理方式（默认是 normal ，合并多余空白），所以元素之间就出现了空隙。并且行内元素之间的间距会随着字体的大小而变化，但始终是一个空格大小

解决办法：
方法1：行内元素写在一起，不要换行或加空格。如图：

方法2：父元素的 font-size 设置为 0，子元素单独设置 font-size。(个人喜欢)
方法3：让行内元素浮动起来。
方法4：父元素开启 flex 或 grid 布局。

二、引入样式的link和@import的区别

1、首先link是html标签，@import是css规则
2、link会优先加载，link全部加载完才会加载@import
3、link里的样式权重高于@import，在相同的规则下，@import里的覆盖不了link里的样式
4、link全平台兼容，@import不兼容 ie5 以下

三、为什么有的网站logo喜欢用h1包裹？

首先通常一个网页只用一个h1标签。
把logo放里面可以强调品牌，搜索引擎也喜欢爬取h1标签，所以可以提高抓取效率
但通常大品牌网站会把logo放h1，小网站放文字，比如主要内容标题