前端面试系列二：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: || ;
- 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:inlinespan、a、b、strong、i、em、br、input、textarea
和其他内容从左到右在一行显示，不能只能控制宽高，宽高有内容本身大小决定（文字、图片）
-
块状元素：
display:blockdiv、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 的区别
两者在网页中显示效果大致一样，实际目的不同。
标签对应为 bold，文本加粗，仅仅为了加粗文本，是一种样式需求。
标签意思是加强，表示该文本比较重要，提醒读者注意，然后浏览器将其加粗注意显示。
最重要的区别就是样式标签和语义化标签的区别。
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 - 结构语义化，旧版本一般使用
，使用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元素提供用户定义的元数据。
下节预告
下节我们将为大家带来 前端框架 的面试题解，敬请期待！