总结一下我在 HTML 和 CSS 中的不足

摘要

  我是属于半路出家型的前端 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：视口，是用户网页的可视区域。手机浏览器是把页面放在一个虚拟的 窗口 中，通常这个虚拟的 窗口 比屏幕宽。

  
  
  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%。在浏览器窗口大小调整时会自动伸缩。

  
    
  ...
    
  ...
  
  
  /* 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%;
  }