摘要
我是属于科班出身型的前端 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%; }
发表回复