前端面试系列二：HTML / CSS

快来加入我们吧！

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

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

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

前言

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

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

Html+CSS 专栏题目列表

Html+CSS
`Flex` 布局有哪些属性？分别代表什么意思？
`css3` 相比于 `css2` 多了什么
什么是 `BFC`
布局设计：顶部固定，下方滚动页面
请说明 `Html` 布局元素的分类有哪些？描述每种布局元素的应用场景
`Html` 标签 `b` 和 `strong` 的区别
说一下减少 `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: <flex-direction> || <flex-wrap>;

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 网格布局）
背景（background 、background-image 、background-repeat 、background-origin 、background-clip等）
边框（border-image、border-radius 等）
颜色（可以用 RGBA、HSL 两种颜色指定方法，也可也使用渐变指定）
渐变（渐变 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 中内容超过页面高度时候会展示滚动条进行页面滚动。

<body
  style="display: flex;
    flex-direction: column;
    height: 100vh;"
>
  <header
    style="
        min-height: 100px;
        width: 100%;
        border: 1px solid black;
    "
  ></header>
  <main
    style="
        flex: 1;
        overflow-y: scroll;"
  >
    <div>内容区域</div>
  </main>
</body>

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
上面两种的结合，不能自动换行，但是能够识别 width 、height、line-height、padding、margin

应用场景：

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

6. Html 标签 b 和 strong 的区别

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

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

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

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

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

减少 DOM 数量的方法

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

一次性加载大量 DOM 优化

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

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

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

Html5 新特性

拖拽释放API（Drag and drop）
更好的语义化内容标签（header、nav、footer、aside、article、section）
音频、视频 API （audio、video）
画布（Canvas）API
地理（Geolocation）API
本地存储 localstorage、会话存储 sessionstorage
表单控件，calendar、date、time、email、url、search
新技术 webworker，websocket

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

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

如何区别 Html 和 Html5

查看文档头部doctype。旧版本会声明为xhtml1-transitional.dtd
结构语义化，旧版本一般使用<div id="header"></div>，使用 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 元素提供用户定义的元数据。

下节预告

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

前端面试系列二：HTML / CSS

快来加入我们吧！

前言

Html+CSS 专栏题目列表

题目解析

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

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

3. 什么是 BFC

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

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

6. Html 标签 b 和 strong 的区别

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

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

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

10. meta 元素都有什么

下节预告

小和山的菜鸟们

引用和评论

前端面试系列六：手写程序算法题

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了