关于前端:前端面试系列二HTML-CSS

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

“Code tailor”，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！

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

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

留神： 本篇专栏只会波及到重点内容，并不会进行拓展。某些题目须要拓展知识点的，咱们会将拓展内容、整体详细信息搁置于每个题目的最后面，能够自行查看。

Html+CSS
`Flex` 布局有哪些属性？别离代表什么意思？
`css3` 相比于 `css2` 多了什么
什么是 `BFC`
布局设计：顶部固定，下方滚动页面
请阐明 `Html` 布局元素的分类有哪些？形容每种布局元素的利用场景
`Html` 标签 `b` 和 `strong` 的区别
说一下缩小 `Dom` 数量的方法？一次加载大量 `Dom` 怎么优化
`Html5` 有哪些新个性？如何解决新标签的浏览器兼容问题？
`a` 标签默认工夫禁用后做了什么能力实现跳转
`meta` 元素都有什么

指定容器为 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;

详情请见：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）

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

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

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

设计办法有很多种，言之有理即可，以后给出 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>

内联元素：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

利用场景：

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

两者在网页中显示成果大抵一样，理论目标不同。

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

<strong> 标签意思是增强，示意该文本比拟重要，揭示读者留神，而后浏览器将其加粗留神显示。

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

缩小 DOM 数量的办法

应用伪元素，暗影实现的内容尽量不应用 DOM 实现，如革除浮动、款式实现。
按需加载，缩小不必要渲染
应用正当的构造，语义化标签

一次性加载大量 DOM 优化

这个问题能够借鉴各个框架是怎么干的：

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

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 来命名，新版本应用结构化语言标签。

简略来说，找到该控件，增加点击 click 监听事件，应用 location.href 进行跳转。

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

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 元素都有什么

下节预报