前端面试系列二:HTML / CSS

快来加入我们吧!

"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习,及时获取最新文章。

"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!

面试系列不定期更新,请随时关注

前言

本篇专栏重点在于讲解面试中 HTML + CSS 的面试题内容。

注意: 本篇专栏只会涉及到重点内容,并不会进行拓展。某些题目需要拓展知识点的,我们会将拓展内容、整体详细信息放置于每个题目的最前面,可以自行查看。

Html+CSS 专栏题目列表

Html+CSS
Flex 布局有哪些属性?分别代表什么意思?
css3 相比于 css2 多了什么
什么是 BFC
布局设计:顶部固定,下方滚动页面
请说明 Html 布局元素的分类有哪些?描述每种布局元素的应用场景
Html 标签 bstrong 的区别
说一下减少 Dom 数量的办法?一次加载大量 Dom 怎么优化
Html5 有哪些新特性?如何处理新标签的浏览器兼容问题?
a 标签默认时间禁用后做了什么才能实现跳转
meta 元素都有什么

题目解析

1. Flex 布局有哪些属性?分别代表什么意思?

指定容器为 flex 布局:

.box {
  display: flex;
}

容器的属性有以下 6 个:

  • flex-direction:决定主轴的方向(即项目的排列方向)
flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap:(flex-wrap属性定义,如果一条轴线排不下,如何换行)
flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-flow:(flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
flex-flow:  || ;
  • justify-content:(justify-content属性定义了项目在主轴上的对齐方式)
justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items:(align-items属性定义项目在交叉轴上如何对齐)
align-items: flex-start | flex-end | center | baseline | stretch;
  • align-content:(align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用)
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

2. CSS3 相比于 CSS2 多了哪些属性?

详情请见:CSS Backgrounds and Borders Module Level 3 (csswg.org)")

下面只列入部分常见以及常用属性:

  • 布局(flex 弹性布局、Grid 网格布局)
  • 背景(backgroundbackground-imagebackground-repeatbackground-originbackground-clip等)
  • 边框(border-imageborder-radius 等)
  • 颜色(可以用 RGBAHSL 两种颜色指定方法,也可也使用渐变指定)
  • 渐变(渐变 linear-gradient、径向渐变 radial-gradient
  • 过渡(transition
  • 形变、变换(transform
  • 动画(animation
  • 媒体查询(@media@import,这个属性是响应式设计的关键部分)
  • 文字(个性化字体 @font-face、文字装饰 text-stroke-color 、文字溢出 text-overflow

3. 什么是 BFC

详情请见:块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)")

块格式化上下文(Block Formatting Context,BFC) 是 Web 页面的可视 CSS 渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

块格式化上下文对浮动定位(参见 float)与清除浮动(参见 clear)都很重要。浮动定位和清除浮动时只会应用于同一个 BFC 内的元素。浮动不会影响其它 BFC 中元素的布局,而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一 BFC 的块级元素之间。

4. 布局设计:顶部固定,下方滚动页面

设计方法有很多种,言之有理即可,当前给出 flex 弹性布局的写法。

注意: css 写法采用的是内联样式,当 main 中内容超过页面高度时候会展示滚动条进行页面滚动。

  
内容区域

5. 请说明 Html 布局元素的分类有哪些?描述每种布局元素的应用场景

  • 内联元素:display:inline

    span、a、b、strong、i、em、br、input、textarea

    和其他内容从左到右在一行显示,不能只能控制宽高,宽高有内容本身大小决定(文字、图片)

  • 块状元素:display:block

    div、h1-h6、hr、menu、ui、li、dl、table、p、from

    独占一行,每一个块级元素都会从新的一行重新开始,从上到下布局,可以直接控制 css 属性(宽高、padding、margin)不设置宽高的情况下,高度为本身内容的高度,宽度为父级内容的宽度。

  • 内联块状元素:display:inline-block

    上面两种的结合,不能自动换行,但是能够识别 widthheightline-heightpaddingmargin

应用场景:

  • 内联元素:用于不指定宽高,宽高由内容指定
  • 块级元素:用于指定宽高,标签独占一行
  • 内联块级元素:用于指定元素宽高,不占满一行

6. Html 标签 b 和 strong 的区别

两者在网页中显示效果大致一样,实际目的不同。

标签对应为 bold,文本加粗,仅仅为了加粗文本,是一种样式需求。

标签意思是加强,表示该文本比较重要,提醒读者注意,然后浏览器将其加粗注意显示。

最重要的区别就是样式标签和语义化标签的区别。

7. 说一下减少 Dom 数量的办法?一次加载大量 Dom 怎么优化

减少 DOM 数量的方法

  • 使用伪元素,阴影实现的内容尽量不使用 DOM 实现,如清除浮动、样式实现。
  • 按需加载,减少不必要渲染
  • 使用合理的结构,语义化标签

一次性加载大量 DOM 优化

这个问题可以借鉴各个框架是怎么干的:

  • 虚拟 DOM ,直接操作 JS 对象开销更少且高效
  • 缓存 DOM 对象,将一些不需要循环遍历的 DOM 节点先缓存,在循环中直接引用
  • 如果 DOM 只是换了个位置,不需要删除后在另一个位置重建,可以直接将整个 DOM 换个位置即可(这个地方需要算法遍历优化)

8. Html5 有哪些新特性?如何处理新标签的浏览器兼容问题?如何区分 Html 和 Html5?

Html5 新特性

  • 拖拽释放APIDrag and drop
  • 更好的语义化内容标签(headernavfooterasidearticlesection
  • 音频、视频 APIaudiovideo
  • 画布(CanvasAPI
  • 地理(GeolocationAPI
  • 本地存储 localstorage、会话存储 sessionstorage
  • 表单控件,calendardatetimeemailurlsearch
  • 新技术 webworkerwebsocket

如何处理新标签浏览器兼容性

  • 做好错误处理,如果显示不了且一定需要该功能,是否可以用其他内容填充。
  • 引入已经支持这些标签的封装好的库(html5shiv.js

如何区别 Html 和 Html5

  • 查看文档头部doctype。旧版本会声明为xhtml1-transitional.dtd
  • 结构语义化,旧版本一般使用,使用 classname 来命名,新版本使用结构化语言标签。

9. a 标签默认时间禁用后做了什么才能实现跳转

简单来说,找到该控件,添加点击 click 监听事件,使用 location.href 进行跳转。

let domArr = document.getElementsByTagName("a")
[...domArr].forEach(item=>{
    item.addEventListener('click',function(){
        location.href=this.href
    })
})

10. meta 元素都有什么

meta 元素定义的元数据的类型包括以下几种:

  • 如果设置了 name 属性,meta 元素提供的是文档级别(_document-level_)的元数据,应用于整个页面。
  • 如果设置了 http-equiv 属性,meta 元素则是编译指令,提供的信息与类似命名的 HTTP 头部相同。
  • 如果设置了 charset 属性,meta 元素是一个字符集声明,告诉文档使用哪种字符编码。
  • 如果设置了 itemprop 属性,meta 元素提供用户定义的元数据。

下节预告

下节我们将为大家带来 前端框架 的面试题解,敬请期待!

你可能感兴趣的:(前端面试)