共计 4005 个字符，预计需要花费 11 分钟才能阅读完成。
快来退出咱们吧！
“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (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: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 的区别
两者在网页中显示成果大抵一样，理论目标不同。
<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元素提供用户定义的元数据。
下节预报
下节咱们将为大家带来 前端框架 的面试题解，敬请期待！
