online阳光-专注于大前端行业领域

前言 近期在编写博客以及在编写这个gitbook的时候，发现在gitbook上有一个插件，就是可以将平时自己编写的在线demo，以链接的方式，集成到gitbook中，再也不用自己去截图，并附加上额外的说明信息了，现特别整理出来关于它的一个集成过程，以及在实际的编写过程中的一个使用。 gitbook集成codepen(gitbook-plugin-codepens) 首先，安装好对应的插件(gitbook-plugin-codepens)，建议采用npm的方式来安装，配置好国内的源之后，速度就嗖嗖嗖的了；1npm install gitbook-plugin-codepens 然后在对应的book.json中配置对应的codepen配置1234567891011{ "plugin": ["codepens"], "pluginsConfig": { "codepen": { "height": 600, "theme": 13200, "description": "我是描述文件", "defaultTab": "html" } ...

前言 css所作用的载体显示设备，则是对应的媒体，对于不同的媒体设备，其展现效果由于硬件设备的原因，需要对应的有所区别，虽然平时在日常的业务或者编码过程中很少涉略到，但是一旦遇到，如果只是淡出的度娘别人的代码，自己反而不知道里面各种原因的话，那么无疑是埋了个雷在代码中。🤔我想要从根本上理解关于媒体的使用、媒体查询的使用，在不同媒体中的作用效果等，无需再去依赖别人的代码，而且，有一个关键的地方，别人的未必是100%准确，可能有不适合自身业务场景。 媒体查询 得益于html与css定义的媒体查询(media query)机制，我们可以针对样式表做出限制，只应用于特定的媒体(屏幕或者印刷品)和符合指定条件的媒体.根据使用方式，可以使用以下三种方式的媒体查询机制： 在style标签中使用media属性，并赋上对应的值 123<style type="text/css" media="print"> body{ font-family: "Times New Roman"; }</style> 在每个css样式表中导入的时候来限定 1@import url(x ...

前言 我想要实现一个⚽️自由落体的过程动画？在未接触到动画之前，我想除了度娘或者谷哥之外，别无选择，但是，我想自己利用动画，实现出这样子的一个效果出来，意味着我需要学习关于动画方面的相关知识点，才能够来实现这里提及到的效果。 那么，什么是动画？它与之前习🉐️的过渡有什么区别呢？我需要掌握哪些知识点，才能够实现这里说到的动画呢？动画都有哪些属性呢？具体这些属性如何配合来使用的呢？下面一一道来！！ 与过渡的区别 相同点： css属性的值都在一段时间内发生变化！！不同点： 动画对变化的方式有很大的控制权，尤其是通过关键帧实现的css动画能设定是否以及如何重复动画，还能够深度控制整个动画的过程； 过渡触发的是属性值的隐式变化，而动画变化过程中用到的属性值要在关键帧中显式声明； 动画改变的属性值可以不在元素的前后两个状态中，比如在它的默认状态下，或者根本没有。 动画的相关概念关键帧 若想要给元素添加动画效果，就必须要有一个关键帧，一个具有名字的关键帧，采用关键词@keyframe来定义可复用的css关键帧动画，然后将该名字赋予要设置动画的元素。 关键帧选择符 关键帧选择符是动画持续 ...

前言 css过渡代表的是在一段时间内，把css属性的初始值变成终止值，这种转变的触发是由于某种操作的响应，一般是由用户触发的，可以是对类、id、其他状态等方式所引起的，正常情况下，无特殊说明的话，该动作是瞬间完成的！ css过渡属性 transition-property transition-duration transition-timing-function transition-delay transition(复合简写属性) ✨ 观察以下👇的一个例子： 12345678910<div> 我是hover测试块 <ul> <li>我是菜单</li> <li>我是菜单</li> <li>我是菜单</li> <li>我是菜单</li> <li>我是菜单</li> </ul></div> 12345678910111213141516171819div{ border: 1px ...

前言 之前关于css变形(transform)只停留在2d级别上的简单理解，一旦涉及到较为负责组合的变形或者是旋转亦或者是缩放等变形操作的时候，就一头雾水，万脸懵逼，根本不晓得它是如何变化而来的。在从2d进入到3d的世界的时候，个人觉得可以是借助于一个正方体，如下图所示：从上图我们可以晓得，在2d的世界里，我们只是以正视图的角度来看待的一个元素，而z轴是从原点指向人视口的位置，这里以一个正方体来描述的话，然后再从侧视图的角度来看的话，关于x轴、y轴、z轴的位置，就会很明确了！！！ 而css中的变形(transform)则是基于上面👆3个轴方向上的平移、缩放、旋转、偏移的变形操作来实现，因此掌握变形的几个要素的基础的话，对于掌握变形就能够迎刃而解了！！！ 基本用法 transform变形其实就一个属性而已，然而它是借助于不同的取值函数，来实现了不同样子的变换，一般它的取值由一个或者多个有效的、按照一定顺序的变形函数来组成，而变形的元素拥有自己的堆叠上下文，经过缩放后的元素可能比变形前大或者小，但由一点需要⚠️的是：元素在页面上所占据的空间与变形前保持不变，这一点对于所有的变形函数都成 ...

前言 近期，学习了关于栅格布局的一个知识点，看着一头雾水，属性的值不确定，且规律多变，看着好像毫无规则可言，而且与其他的布局也可以配合使用，个人觉得🈶️必要对习得的知识点进行一个总结，加深自身对该知识点的一个理解与使用，以便于后续能够很顺畅的来使用，而不是单纯的copy度娘到的别人家的代码，也不知道个中缘由！！！ 栅格属性一览首先甩出这边针对属性以及其组成，整理的一个脑图吧： 🪐 刚开始初步学习完成栅格布局，有点不明白为毛要整如此复杂的布局，在完成自己设置的例子demo出来了之后，发现它的强大之处，比起其他的布局，比如弹性盒子布局、盒子模型、定位、浮动等等，具有重大的优越性，也渐渐地明白了它的一个存在意义，这里整理了以下关于布局的一些相关的优越性： 减少html节点的层数，提高渲染效率；我想这个应该是每个前端人都应该关注的，如今写代码的人到处都有，刚毕业的应届生都能够胜任基本的编码工作，如果对于布局编码方面，没有编写出普适性、兼容性高的代码，那么是没有多大的竞争优势的； 屏幕兼容性高，可伸缩延展； 实战 👇 将通过一两个简单的例子来使用栅格布局 实战一：实现类似目前的商 ...

前言 之前一直认为栅格布局距离自己那么的遥远，对于其愈发又是如此的复杂又感觉深不可测的样子，在看到别人编写了关于栅格布局的相关代码时，看着云里雾里的，按照官方所说的栅格布局时最普适的布局系统，那么我觉得这个很有必要来学习并驾驭它，从而布局自己更加强大的布局系统！栅格布局依赖于行和列，无需考虑各个部分在源文档中的顺序，利用自定义的超级灵活而又复杂的组合来创建对应的栅格线，形成至于对应的栅格轨道，来满足于不同场景下的栅格布局，栅格之内还可以嵌套栅格布局，也可以在栅格中使用表格或弹性容器。🤔 这里提及到的栅格布局、栅格线、栅格轨道都是些什么？如何使用栅格布局来布局自己的系统界面？栅格布局真的🈶️那么的普适吗？👇一一道来！！！ 栅格容器的创建 与弹性盒子布局类似，栅格布局也包括有普通栅格容器与行内栅格容器，通过使用display: grid以及display: inline-grid来创建对应的容器。 栅格容器的特点 虽然普通栅格容器是块级的，但是只是它的行为与块级容器很像而已，两者之间还是有一定的区别的： 浮动的元素不会打乱栅格容器，这意味着栅格容器不会移动到浮动元素的下方； 栅 ...

前言 弹性盒是一种简单而强大的布局方式，通常可以通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中，内容可以横向或者纵向排布，还可以沿着一个轴布局，或者折成多行。🪐 弹性盒模型布局最突出的一个特点就是，能让元素对不同的屏幕尺寸和不同的显示器设备做好适配工作，在响应式网站中表现较好，因为其内容能根据可用空间的大小来增减尺寸！，弹性盒依赖于父子关系，在容器节点上声明display: flex或者display: inline-flex，便激活弹性盒布局，而设置了这个属性的元素则称之为弹性容器 🤔 为什么要叫弹性一词呢？我想原因应该有以下几个： 容器与尺寸均不设置尺寸，可以按照其内容进行伸缩； 适配性高，从布局上控制元素的摆放，又可以让元素自身控制其摆放； 元素的伸缩适配； 元素行的伸缩适配； 主轴与垂轴 弹性盒子中的元素沿着主轴的方向来排布，主轴的方向可能是水平的，也有可能是竖直方向上的，主要来自于👇的flex-direction的控制以下附带相关的概念以及对应的位置的一个介绍： 弹性容器 声明了display: flex/inline-f ...

前言 定位属性position，我想这个属性应该是绝大多数前端基本都滚瓜烂熟的了吧，什么”父相子绝”的快速记住其使用方法；🤔 但是这里如果采用了非强制限定定位元素的尺寸、位置，定位元素可以被允许按照其内容来”安排”自己的话，是否就是可以实现到灵活性更高的布局以及内容的自适应的展示呢？ 基本概念 positions属性 描述 取值 static / relative / sticky / absolute / fixed 初始值 static 适用于 所有元素 继承性 否 ✨ position的各个属性描述如下： static: 正常生成元素框，块级元素生成矩形框，位于文档流中，行内元素生成一个/多个框，跟随父元素流动； relative: 元素框偏移一定的距离，元素的形状以及所占据的空间不变； absolute: 元素框完全从文档流中移除，相对容纳块定位； fixed: 相对于视区进行absolute； sticky: 元素以开始留在常规的文档流中，达到触发粘滞的条件是，从常规的文档流中移除，但原本所占据的空间仍然保留，在此中情况下，相当于相对于容纳块a ...

前言 之前自己较少使用float属性，在月度他人的代码，或者是在使用的时候，总是抱着尝试的方式，并借助于浏览器开发工具，一遍又一遍的尝试，对每次调整的属性值感觉信心不够充足，而且，还经常的出现，调整了一个属性，导致另外一个属性也跟随者变化，或者出现自己意想不到的效果。我想要摆脱这样子的困境，我需要从根本上来学习关于float以及float的使用完整规则 浮动 浮动的元素将告诉其父元素容纳块，请将我浮动到您的左侧或者右侧！！！ 浮动的元素脱离了常规的文档流，不过对布局仍然有影响，元素设置为浮动后，其他内容将围绕它流动。⚠️ 以下有两种情况需要特别注意的： 浮动元素四周的外边距并不会折叠； 非置换元素若设置为浮动，必须🉐️设置它的宽度，否则该元素将趋近与0⃣️。 属性 取值 取值 left/right/none 初始值 none 适用于 所有元素 继承性 否 基础概念容纳块：在深入了解浮动之前，必须要建立容纳块的思维，在之前的学习，我们可以知道，所有的容纳块，其实就是某个子元素所在的最近的块级祖先元素。 使用规则 浮动元素的左(或者右)外边界不能超过容 ...

前言 css中每一个元素都会生成一个矩形框，也就是元素框，在正常的节点元素摆放的过程中，如果按照默认的规则来摆放的话，则会按照其占据的空间，按照流式布局方面进行一个一个来摆放。网上已遍布同质化的学习知识较多，这边仅整理关于额外同类型的知识点的重复说明，这里想整理一个关于自己在学习过程中的不一样的见解！！！ 盒子模型 直接上图，一图胜千言 复值的规则 像padding、border、margin这些属性，一般遵循上、右、下、左的顺序来摆放，如果有重复的值的定义的话，可以采取节省值的方式，比如只有一个值的时候，代表4个方向的边都设置为这个值，设置为两个值的时候，代表设置的上下、左右方向的值。 行内元素的适用规则⚠️ 根据上图，影响一个行中元素的竖直方向上的，只有竖直属性才会影响到，也就是只有横向方向的padding才生效了！！！ 行内非置换元素的运用padding在行内元素的使用 置换元素中的padding属性，都会出现在内容的四周，并且背景色会填充到内边距区域，也就是padding会将border推开，远离内容 border在行内元素的使用 规则基本上与块级元素的处理方式一直 ...

前言 我想直接摆脱关于css的胡乱使用现象，从根本上理解css在浏览器代理中的渲染机制，掌握视觉渲染模型的工作原理，自行判断所遇到的怪异行为！！！通过学习css的基本原理，从根本上理解关于css的的布局逻辑，从而面对后续的特殊效果/复杂效果，更加游刃有余 元素框基础 不管是什么元素，css都嘉定每个元素都会生成一个或者多个矩形框，我们称之为元素框，如下图所示： 通过👆图的展示，对元素有一个大概的轮廓！ 而对于css中关于元素框的分类，主要有一下几种，这边👇的文章也是针对这几种进行阐述 相关概念容纳快容纳块： 表示的是某个节点元素最近的块级父元素，如有以下的例子： 12345 <body> <div> <p>这个是一个段落</p></div></body> div是p段落最近的容纳块 🤔 为什么要解释容纳块呢？✨ 因为容纳块决定了元素所能获得的最大宽度！！！ 调整元素的显示方式 改变元素的显示方式 下面开始来深入了解display属性的使用 display属性 描述 取值 ...

前言 文本是网页编程中的重要元素，提供了很多的相关的属性操作，以不同的方式配合来控制文本的展示，比如可以影响文本中相对一行中其他内容的内置，可以将文本设置为上标等等，针对平时常用的文本属性的学习，加深对文本属性的使用，结合几个常见的文本效果的学习，领略文本属性的魅力！！！！最最最主要的是，我不想一遇到稍微有一点点特殊的文本样式，就是度娘，对自己没有半毛钱提升！！！ 行内与块级傻傻分不清 元素 外观 height/line-height/margin 宽度 容纳元素 块级元素 总是在新的一行开始 可控制 默认100% 容纳行内元素以及其他块级元素 行内元素 和其他元素在同一行上 不可控制 文字/图片宽度，不可变 正常只能容纳文本或其他行内元素 缩进 text-indent: 50px;规定文本块中首行文本的缩进尺寸 值 描述 取值 定义的固定的缩进值，默认是0 初始值 0 适用于 块级元素 继承性 是 对齐行内对齐 根据文字的书写方向，来控制元素中文本行的对齐方式 text-align/text-align-last 值 描述 ...

前言 在目前前端快速发展的情况下，以前就是简单地会去使用别人的脚手架来搭建项目，然后在项目中进行业务的开发，但是慢慢地，随着业务的正常发展，会发现原本的脚手架好像已经不能够满足当前的业务，需要在目前项目上进行一个优化工作，但是基本上大部分都是不清楚脚手架里面都有什么配置，也不知道项目中的配置都用来干嘛，都有什么用途，那么怎能够去站在这个脚手架的上面，来理解并优化项目的架构呢？ 如果连基本的关于webpack知识点都不清楚，不能弄懂其中的原理，又怎能去满足日益曾长的业务发展，来打造适合项目业务的完美方案呢？ 本文以黄金圈规则来简单阐述，用以告诫自己也顺便提醒自己学习webpack的一个初衷！！！ 🤔什么是webpack webpack是一个现在静态模块打包工具，针对js应用程序(任何使用js来编写的项目，比如react、vue、react-native、普通js、electron等等)，当webpack处理应用程序时，它会在内部从一个或者多个入口点开始，将入口文件所引用到的资源依赖”变成”一棵依赖树，树的根就时入口文件，从根出发，所依赖的每一个模块就当作时树上的”枝叶”，将这些模块 ...

前言 在平时日常使用css的时候，最容易忽略的个人认为就是这个字体了，关于字体的使用，一般没有什么特殊的要求的话，都是使用的用户代理，也就是用户浏览器自身设置的字体，而不会去使用其他的字体；也没有多大的必要去使用一些特殊的字体，特别是一不小心就侵权了，因为有部分字体人就是依托这个字体来让自己公司盈利，这里具体怎么盈利就不多说，只希望在使用某些字体之前，需要再三斟酌了！！本文也仅针对平常关于字体使用过程的两三个点进行记录学习，以便于后续查阅！ font-family 声明web程序中使用的字体为某一字体族的字体，可同时声明多个字体进行使用 @font-face @font-face的目的是让我们的程序使用自定义的字体，借助于@font-face可以定义一个专门的字体族名称，并对应于服务器上的一个字体文件，用户浏览器将自动下载那个文件，并使用它来渲染页面中的文本！ 1234567@font-face { font-family: 'my-font'; // 指定的自定义的字体名称 src: url("***.otf"); // url可以用逗号分隔符来定义，也就是可 ...

前言 在平时的日常编码过程中，对于css属性的使用也仅仅是停留在了简单使用的阶段，但如果出现新的未曾见过的css单位或者比较少用的单位时，则一脸懵逼，也不知道这个单位以及它的值是用来作甚的，目前个人这边的方式是闭着👀开浏览器调试模式，然后按照可视化所看到的效果进行简单的调试，也没有去深究其中的一个原理，作为想要在前端领域精进的一名贫穷孩子，我觉得有必要去了解其中的一个原理，以使自己能够对自己/别人所编写的代码更加的熟悉，造就像以前编写Android代码的布局一样，编写一次即可完成80%～90%的界面效果，且兼容到大部分的机型！！！ 全局关键字 全局关键字，指的是所有的css属性均可以使用的属性值 inherit: 把元素某个属性的值设置为与父元素同一属性的值一样，也就是强制从父元素那边继承属性过来 initial: 把属性的值设置为预定义的初始值，相当于”重置”属性值 unset: 作为inherit与initial关键字的替身，对于继承的属性来说，unset的作用与inherit一样，对于不继承的属性来说，unset的作用与initial一样 针对上述3个关键词仅能够使用的 ...

前言 写久了web前端的样式，基本上都知晓如何编写css，已经对应如何应用到对应的标签上，那么，我们自己有没有想过，为毛这里编写的css久可以直接在界面上展示出我们所编写的效果，浏览器它做了什么事情，使🉐️我们可以编写出排版整齐，配色优美的界面的呢？这里通过对这个浏览器中关于css的原理简单讲解，来更加深入地理解我们所编写地css样式代码，是如何被浏览器所识别并使用到每个节点标签中地！！！ 浏览器中css的工作原理 浏览器中的css的工作原理，是将原本写在一起的css样式规则，通过浏览器自身代理，拆分为一个个分散的独立的css属性，根据每个属性的特指度来进行层叠，然后最终计算出其合并后的css规则，也就是getComputedStyle对象，该对象是不可编辑的，最终展示在界面中 具体流程如下所示： 基础概念要了解关于css中的应用规则，首先需要掌握一下几个基本的概念 特指度(specificity) 选择符的特指度有选择符本身的组成部分决定，一个特指度值由4部分组成：0，0，0，0 对应特指度中的每一位的对应关系图如下： 有以下一个例子可供学习关于特指度： 123html &g ...

前言 之前一直想在网上针对一些三方框架或者方案编写自己的一个使用手册/阅读笔记，原本自己的hexo博客比较适合平时自己的点击积累，但不能够像一本书这样子来浏览，因此，我在网上找相关的，终于发现有这样的一个框架：gitbook，可以用它来编写一样的markdown文件，来组织自己的书籍/手册的一个目录 gitbook介绍 gitbook是一个基于node.js的命令行工具，使用github/git和markdown/asciiDoc来构建精美的电子书。gitbook支持输出静态网页和电子书等多种格式，其中默认输出静态网页格式。 gitbook使用 gitbook主要有三个工具： gitbook命令行工具； gitbook Editor官方编辑器(目前新版已找不到了); gitbook.com官网在线编辑； 这里主要是介绍gitbook命令行工具的方式来创建自己的电子书 gitbook命令行1、初始化项目script1gitbook init 语法说明：初始化项目，如果目录是空的话，就会自动创建README.md以及SUMMARY.md两个文件，如果这两个文件已经存在的话，则会自 ...

前言 平时在用三方UI库的时候，那爽🉐️不要不要的，但是作为一个前端开发者，如果连基本的界面都不能画好的话，又怎么能够胜任得了后续复杂不断的业务变动以及页面的交互呢。之前从来没有考虑过这个问题，认为不懂的内容，只需要简单的度娘就可以了，实际上，更重要的是要关注于基础，凡事多问几个为什么。本文从元素的背景属性：background来进行诠释，向自己解析其中是如何将背景给发挥🉐️淋漓尽致的。 开局先上一幅图，了解一个整体的概况： background-image 设置元素的背景图片 描述 描述 取值 继承性 false 动画性 false <image>中的取值范围为：[<uri>|<linear-gradient>|<repeating-linear-gradient>|<radial-gradient>|<repeating-radial-gradient>] ⚠️ 这里🈶️一个点需要注意的是：background-image允许接收多个不同的参数，代表这不同的背景，同时需要配 ...

前言目标