关于前端:总结一下我在-HTML-和-CSS-中的不足

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

HTML5 | 布局 | 动画 | Flex

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

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

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

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

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

box-sizing

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 设计的一种形式或是一组最佳实际的 一个词 ，它是用来建设能够 响应查看内容 的词。

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%;}
```

关于前端:总结一下我在-HTML-和-CSS-中的不足

摘要

关键词

一个自我测验工具

Items

Detail

工具库 VS 原生

我的有余

一些面试题

HTML5

HTML 语义化标签知多少

cookie，sessionStorage 和 localStorage 的区别

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

HTML 页面渲染过程

Canvas

SVG

CSS3

居中

革除浮动

盒模型

Flex 弹性布局

圣杯布局 / 双飞翼布局

瀑布流布局

BFC

伪类和伪元素选择器

css 过渡

css 动画

媒体查问

WEB 响应式