[击败前端面试大作战] HTML 和CSS

[击败前端面试大作战] HTML 和CSS

系列文章同步发布在 iT铁人赛 ,有兴趣的读者也可以去那里观看喔!

今天是击败前端面试大作战正文的第一篇!我们就先来点轻松的吧,今天会讨论文章的写作方式会是以面试问答为主,欢迎读者先把回答遮住试着答看看,再看回答!。

这一篇文章适合谁看

适合阅读者

  1. 对HTML/CSS 已经有一定的了解。
  2. 或是最少已经有看过w3school 对 html css 的文章。

开头

HTML/CSS 在面试题中算是比较少考的部分,以我自己的经验为例,大部分的公司在面试前端工程师这个职位的时候有大概90 趴的比重会是在考JS/框架/浏览器/演算法,只有大概10 趴会问到HTML/CSS。而剩下的少部分公司会考大量的HTML/CSS,这时候就要注意一下该公司是不是在征工作内容注重在切版的工程师(我个人是对写JS 逻辑、优化比较有兴趣~)。

所以在HTML/CSS 准备的部分,会根据你想做的工作内容而有不同得准备方向。
以JS 逻辑为主要工作内容的职缺,我觉得了解基本的HTML5、跟常用的CSS flexBox/grid、选择符、position、display 跟CSS 有的问题和如何解决(ex, 用css modules 来解决命名冲突)等等就非常足够了!

那如果你对上面我列出来了的HTML/CSS 都蛮熟悉的话,下面有些考题可以试试看你对HTML/CSS 的熟悉度!

面试题

1. src vs href 的差别?

回答:
src 用于替代元素,而href 用于建立这个标签与外部资源之间的关系。举例,

<link href="style.css" rel="stylesheet" />
当使用href 的时候,浏览器载入到link 的时候, html 的渲染和解析不会暂停,而css 档案的载入是同时进行的

<script src="script.js"></script>

当使用src 时,浏览器解析到script 时, 页面的载入和解析都会暂停直到浏览器拿到并执行完这个js 档案,因此会建议把 **脚本** 放到 ** <body>** 的最下面

follow up 问题: 推迟 脚本 的差别?

回答:
HTML5 中新增了 推迟 异步 脚本 中,

当使用 推迟 时, 执行到该 **脚本** 时会继续建立DOM,并且非同步的去跑该 **脚本** ,但是会等到DOM 建立完成后才会去执行该 **脚本**

而当使用 异步 时, 执行到该 **脚本** ,就会非同步的去跑该 **脚本** ,跑完后直接执行 ,因此 异步 适合用在GA,或是其他不会影响使用者体验的地方。

说这么多我们来看图比较好理解!

注意:defer 和async 属性都是非同步下载外部的JS 脚本文件,它们都不会阻塞页面的解析

2. HTML 语义化优点?

回答:

  • 增加程式码可读性,可以马上知道程式的结构。
  • 有利于SEO,有助于爬虫到到更多讯息。

3. display:inline-block, block, inline 的区别及差别

回答:

inline-block,会以block 的方式呈现,但可以在同一列inline 水平并列,它可以设定元素的宽高/margin/padding。

inline,为行内元素,元素的宽高/margin/padding 接不可以改变,多个相邻的行内元素排在同一行里,如果页面一行排列不下,才会换新的一行。

block,可以设定元素的宽高/margin/padding,并且每个block 都是新的一行。

4. CSS 模块 VS。 styled-components?

回答思路:
可以先从单纯css 所遇到的问题开始讲起,然后提到这两个的不同。

回答:
原生CSS 因为缺乏变量、函数这等方法,导致程式码的维护性不高而且无法复用。除此之外,原生CSS 还会造成 全局污染 的问题,同样名称的选择器会造成样式覆盖等等问题。因此出现CSS Module 和CSS-in-JS 的解决方法,两者的特点如下:

CSS 模块

  • 利用文件名来产生hash className 来解决命名冲突的问题
  • 然后搭配Sass 或是Less 来增加变量、函数等特性来增加维护性

styled-components 则是CSS-in-JS 其中一种

  • 可读性佳,好维护因为相关的css 会在同一个区块
  • 样式是和JS 文件打包在一起,所以会拖慢JS 文件加载时间
  • 没有单独CSS 文件所以无法缓存

5. 什么是postCSS?

回答:
PostCSS 是一个plugins 用来转换CSS,可以把它想成CSS 的babel,透过postCSS,我们可以做到以下几件事:

  • 自动前缀
    :用来处理跨浏览器的支援度。

    //原先的CSS
    :全屏 {
    } //编译过后的CSS
    :-webkit-全屏 {
    }
    :-ms-全屏 {
    }
    :全屏 {
    }

  • cssnext
    : 透过polyfills,让我们可以使用新的语法。

    //原先的CSS,浏览器尚未支援
    身体 {
    颜色:oklch(61% 0.2 29);
    } //编译过后的CSS
    身体 {
    颜色:RGB(225、65、52);
    }

  • 样式表
    : css 的 lint

    //输入错误的CSS颜色
    一个 {
    颜色:#d3;
    } //报错
    应用程序.css
    2:10 无效的十六进制颜色

postCSS 网站

6.垂直放置?

回答:
我的范例

关于垂直置中,我推荐两个不错的学习资源~
[学习资源1]( https://www.w3schools.com/css/css_align.asp)
[学习资源2] https://css-tricks.com/centering-css-complete-guide/

这一篇的HTML 和CSS 就讨论到这里~~今天这篇只是小试牛刀,下一篇开始就会上主菜,开始讨论JS 搂,那我们就明天见吧!

推荐的面试题资源:

HTML:
https://juejin.cn/post/6905294475539513352

CSS:
https://hackmd.io/@mingjunlu/front-end-interview-questions

资源:

https://onurkul.com.tr/css-satir-ici-blok-inline-block
https://hackmd.io/@mingjunlu/front-end-interview-questions

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/37308/18251714

posted @   哈哈哈来了啊啊啊  阅读(26)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
点击右上角即可分享
微信分享提示