摘要

  我是属于科班出身型的前端 programmer。学习的过程中常常听见的话就是 - 不要纠结 html 和 css，JavaScript 才是前端的精华。这话没有任何故障，然而随着我工作工夫的增长，我就愈发的感觉本人的前端根底 - 特地是 
html 和 css 根底 真的是惨不忍睹。这篇博客我将总结一下我在这两个范畴内的有余，梳理一下我认为比拟有价值的 html 和 css 面试题。另外还会分享一个自我测验工具，看着会比拟低级。然而我并不是心愿通过这个工具来展现本人的程度，而是心愿通过阶段性的自我检测来让我看清本人的有余与提高。

关键词

HTML5 | 布局 | 动画 | Flex

一个自我测验工具

Items

将 知识点 列举进去，能够是 大项 （例如：HTML/CSS）, 也能够是 细项 （例如：HTML5 Canvas、CSS 布局）。通过 定时 （一个月一次或者一个月两次）给 本人对每一项的把握水平打分 ，最初计算出 总分 ，并与实践分值做 比照 来认清本人当初的 实在程度。

Detail

这些常常被咱们拿来阐明本人程度的词语，尽管看着有点“搞笑”，然而我感觉既然大家都在用就肯定是有它们存在的合理性。上面是我的集体高见，如果有更妙的想法的，欢送指教。

工具库 VS 原生

• 第一次接触款式框架 bootstrap 当前，给我感触最大的就是它的 栅格零碎 。简略易用，能满足大部分布局场景须要。而后我又应用过 layui 和 element-ui，在这些前端款式框架中都实现了本人的栅格零碎。除此以外对于 按钮、表单和表格等 的封装也十分的欠缺好用。
• 那时天真的我认为从此以后就不须要再去学习 CSS 了，这么多轮子摆在这里，想用哪个关上官网复制粘贴不就成了。可是当我进来面试的时候发现，面试官问的最多的并不是某个款式组件的应用形式，反而是最根底的布局、居中、盒子模型等等问的最多。这使得我也不得不去反思会应用工具库与把握原生 css 的差异到底在哪里。
• 工具库必定也是基于原生去实现的。相熟并了解 原生 css 常识对于咱们 疾速上手 一个工具库会有很大的帮忙。此外如果工具库无奈满足业务需要，就须要咱们用 原生的形式 从布局开始到特定的款式一整套 实现 下来。
• 援用英剧《是！首相》中行政事务部大臣吉姆·哈克的一句话：他只是当初的首相，而我可始终都是事务大臣 — 流水的款式组件库，铁打的原生 css。

我的有余

• 没有用原生 html 和 css 写过残缺的网页。就比方 node 的官网，首先是布局，典型的 Header – Aside – Main – Footer 布局。如果用款式框架去搭建会很快，然而用原生如何更好的实现？再看一些小细节，例如导航标签处于 acitve 状态时的三角形要如何实现？

• 对大部分 概念 仍停留在 理解 的水平，也就是只据说过名字，没有亲自 实战 过，也 没有在我的项目中应用过 。 做技术的永远不要置信过目不忘，更不要靠死记硬背就认为把握了常识，没有实操永远也无奈记住知识点，永远也无奈体会知识点。

一些面试题

HTML5

HTML 语义化标签知多少

cookie，sessionStorage 和 localStorage 的区别

如何实现浏览器内多个标签页之间的通信

HTML 页面渲染过程

Canvas

SVG

CSS3

居中

革除浮动

盒模型

• box-sizing

Flex 弹性布局

圣杯布局 / 双飞翼布局

瀑布流布局

BFC

伪类和伪元素选择器

css 过渡

css 动画

媒体查问

Media queries 媒体查问是 响应式 web 设计 的要害局部，它容许用户 依照视口的尺寸创立不同的布局 。具体点说就是它能够依据 不同媒体 （打印机设施等）或者 不同设施参数 （屏幕分辨率）来主动的 调整 咱们事后设定好的 款式。

• 语法 ：每条媒体查问语句都由一个 可选的 媒体类型 和 任意数量的 媒体个性表达式 形成。能够应用 多种 逻辑操作符 合并 多条媒体查问语句。

  @media screen and (max-width: 300px) {
    body {background-color: lightblue;}
  }

• 媒体类型：用以形容设施的个别类别。可选，缺省值是 all 类型。

  all  print  screen  speech
  
  /* 当该页面被打印时设置 body 字体大小为 12px */
  @media print {
    body {font-size: 12px;}
  }

• 媒体个性 ：每条媒体个性表达式都必须用 括号 括起来。

  @media (any-hover: hover) {
    a:hover {background: yellow;}
  }

• 逻辑操作符 ：logical operators，逻辑操作符可用于 联结结构 简单的媒体查问。

  and : 该操作符用于将多条媒体查问规定组合成单条媒体查问。当所有为 true，整体才为 true.
  not : 该操作符用于否定媒体查问。only：该操作符仅在整个查问匹配时才用于利用款式。,：逗号用于将多个媒体查问合并为一个规定。任意一条为 true 则整体为 true.

  @media screen and (min-width: 400px) and (orientation: landscape) {
    body {color: blue;}
  }

• 定位媒体查问 ：许多媒体性能都是 范畴性能 ，这意味着能够在它们后面加上 最小 或最大 来示意 最小条件 或最大条件 束缚。

  /* 仅当浏览器 viewport 宽度等于或小于 1245px 时，此 css 才利用款式 */
  @media (max-width: 1245px) {...}

• 朝向 ：orientation 媒体特色 ，容许咱们用它来检测 竖放（portrait mode）和 横放（landscape mode）模式。

  @media (orientation: landscape) {
    body {color: rebeccapurple;}
  }

• 应用触屏设施 ：hover 媒体特色 ，能够检测用户是否能在一个元素上 悬浮。以此来判断是否是触摸屏。

  @media (hover: hover) {
    body {color: rebeccapurple;}
  }

• 思考 ：媒体查问的 外在体现 是 实现 web 响应式。然而这只是它的一个最显著的作用，除此以外还有很多形式都能够实现 web 响应式。

WEB 响应式

响应式 web 设计不是独自的技术 ，它是形容 web 设计的一种 形式 或是一组最佳实际的 一个词 ，它是用来建设能够 响应查看内容 的词。

• viewport：视口，是用户网页的可视区域。手机浏览器是把页面放在一个虚构的 窗口 中，通常这个虚构的 窗口 比屏幕宽。

  <meta name="viewport" content="width: device-width, initial-scale=1.0">
  
  width：管制 viewport 的大小，device-width 为设施的宽度；height：高度；initial-scale：初始缩放比例；maximum-scale：容许用户缩放到的最大比例；minimum-scale：容许用户缩放到的最小比例；user-scalable：用户是否能够手动缩放；

• 媒体查问 ： 响应式设计仅仅是因为媒体查问才新兴起来的 。应用媒体查问时的一种通用形式是，为 窄屏设施 （例如：挪动设施） 创立 一个简略的 单栏布局 。而后查看是否是大些的屏幕，在你晓得你有 足够包容 的屏幕宽度的时候，开始采纳一种 多栏布局 。这就是咱们常说的 挪动设施优先 设计。

  @media screen and (min-width: 800px) {
    .container {margin: 1em 2em;}
  }

• 网格视图：响应式网格视图通常是 12 列，宽度为 100%。在浏览器窗口大小调整时会主动伸缩。

  <div class="row">
    <div class="col-3">...</div>
    <div class="col-9">...</div>
  </div>
  
  /* target / context = result */
  .col {width: 6.25%; /* 60 / 960 = 0.0625 */}

• 多列：

  .container {column-count: 3;}
  
  .container {column-width: 10em;}

• 弹性盒 flex：在弹性盒中，初始的行为是，弹性的元素将参照容器外面的空间的大小，放大和散布元素之间的空间。

  .container {display: flex;}
  
  .item {flex: 1;}

• 网格 grid：在 css 网格布局中，fr 单位许可了跨网格轨道可用空间的散布。

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

• 响应式图像：用一张有着所需最大尺寸的图像，而后缩放它。弊病是会节约带宽。

  img {max-width: 100%;}