关于前端:总结一下我在-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:视口,是用户网页的可视区域。手机浏览器是把页面放在一个虚构的 窗口 中,通常这个虚构的 窗口 比屏幕宽

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理