今天，跟大家分享一下我自己个人连续读半年的书后，发生了什么变化！ 可能大家都会觉得自己没有时间读书，每天都有做不完的活之类的话语，或者说是道理我都懂，但就是懒！难到就真的只是懒而已吗？其实不是，如果真的懂道理，就不会有这个情况的出现了。 首先这里并不是吹捧自己多厉害，阅读了有多少的书籍之类的，这里⚠️重要的是想跟大家分享一下，在平时忙碌的工作中，抽空来给自己充...

前言 相信不少前端童鞋一开始接触前端，就直接是上三方的ui框架，但有没有想过这个第三方的ui框架，大部分是从bootstrap中演变而来的，形成更加方便的开发模式，那么假如撇开三方的ui框架，仅借助于bootstrap框架，我是否能够编写出轻量级的网站呢？答案肯定是可以的，那么关于bootstrap应当如何使用呢？为什么它能够号称自己的移动优先的响应式ui框架呢？ 关于...

前言 近期在编写博客以及在编写这个gitbook的时候，发现在gitbook上有一个插件，就是可以将平时自己编写的在线demo，以链接的方式，集成到gitbook中，再也不用自己去截图，并附加上额外的说明信息了，现特别整理出来关于它的一个集成过程，以及在实际的编写过程中的一个使用。 gitbook集成codepen(gitbook-plugin-codepens) 首先...

前言 css所作用的载体显示设备，则是对应的媒体，对于不同的媒体设备，其展现效果由于硬件设备的原因，需要对应的有所区别，虽然平时在日常的业务或者编码过程中很少涉略到，但是一旦遇到，如果只是淡出的度娘别人的代码，自己反而不知道里面各种原因的话，那么无疑是埋了个雷在代码中。🤔我想要从根本上理解关于媒体的使用、媒体查询的使用，在不同媒体中的作用效果等，无需再去依赖别人的代码，...

前言 我想要实现一个⚽️自由落体的过程动画？在未接触到动画之前，我想除了度娘或者谷哥之外，别无选择，但是，我想自己利用动画，实现出这样子的一个效果出来，意味着我需要学习关于动画方面的相关知识点，才能够来实现这里提及到的效果。 那么，什么是动画？它与之前习🉐️的过渡有什么区别呢？我需要掌握哪些知识点，才能够实现这里说到的动画呢？动画都有哪些属性呢？具体这些属性如何配合来使...

前言 css过渡代表的是在一段时间内，把css属性的初始值变成终止值，这种转变的触发是由于某种操作的响应，一般是由用户触发的，可以是对类、id、其他状态等方式所引起的，正常情况下，无特殊说明的话，该动作是瞬间完成的！ css过渡属性 transition-property transition-duration transition-timing-function tr...

前言 之前关于css变形(transform)只停留在2d级别上的简单理解，一旦涉及到较为负责组合的变形或者是旋转亦或者是缩放等变形操作的时候，就一头雾水，万脸懵逼，根本不晓得它是如何变化而来的。在从2d进入到3d的世界的时候，个人觉得可以是借助于一个正方体，如下图所示：从上图我们可以晓得，在2d的世界里，我们只是以正视图的角度来看待的一个元素，而z轴是从原点指向人视口的...

前言 近期，学习了关于栅格布局的一个知识点，看着一头雾水，属性的值不确定，且规律多变，看着好像毫无规则可言，而且与其他的布局也可以配合使用，个人觉得🈶️必要对习得的知识点进行一个总结，加深自身对该知识点的一个理解与使用，以便于后续能够很顺畅的来使用，而不是单纯的copy度娘到的别人家的代码，也不知道个中缘由！！！ 总结首先甩出这边针对属性以及其组成，整理的一个脑图吧：...

前言 之前一直认为栅格布局距离自己那么的遥远，对于其愈发又是如此的复杂又感觉深不可测的样子，在看到别人编写了关于栅格布局的相关代码时，看着云里雾里的，按照官方所说的栅格布局时最普适的布局系统，那么我觉得这个很有必要来学习并驾驭它，从而布局自己更加强大的布局系统！栅格布局依赖于行和列，无需考虑各个部分在源文档中的顺序，利用自定义的超级灵活而又复杂的组合来创建对应的栅格线，形...

前言 弹性盒是一种简单而强大的布局方式，通常可以通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中，内容可以横向或者纵向排布，还可以沿着一个轴布局，或者折成多行。🪐 弹性盒模型布局最突出的一个特点就是，能让元素对不同的屏幕尺寸和不同的显示器设备做好适配工作，在响应式网站中表现较好，因为其内容能根据可用空间的大小来增减尺寸！，弹性盒依赖...

前言 定位属性position，我想这个属性应该是绝大多数前端基本都滚瓜烂熟的了吧，什么”父相子绝”的快速记住其使用方法；🤔 但是这里如果采用了非强制限定定位元素的尺寸、位置，定位元素可以被允许按照其内容来”安排”自己的话，是否就是可以实现到灵活性更高的布局以及内容的自适应的展示呢？ 基本概念 positions属性 描述 取值 static / relat...

前言 之前自己较少使用float属性，在月度他人的代码，或者是在使用的时候，总是抱着尝试的方式，并借助于浏览器开发工具，一遍又一遍的尝试，对每次调整的属性值感觉信心不够充足，而且，还经常的出现，调整了一个属性，导致另外一个属性也跟随者变化，或者出现自己意想不到的效果。我想要摆脱这样子的困境，我需要从根本上来学习关于float以及float的使用完整规则 浮动 浮动的元素...

前言 css中每一个元素都会生成一个矩形框，也就是元素框，在正常的节点元素摆放的过程中，如果按照默认的规则来摆放的话，则会按照其占据的空间，按照流式布局方面进行一个一个来摆放。网上已遍布同质化的学习知识较多，这边仅整理关于额外同类型的知识点的重复说明，这里想整理一个关于自己在学习过程中的不一样的见解！！！ 盒子模型 直接上图，一图胜千言 复值的规则 像padding、...

前言 我想直接摆脱关于css的胡乱使用现象，从根本上理解css在浏览器代理中的渲染机制，掌握视觉渲染模型的工作原理，自行判断所遇到的怪异行为！！！通过学习css的基本原理，从根本上理解关于css的的布局逻辑，从而面对后续的特殊效果/复杂效果，更加游刃有余 元素框基础 不管是什么元素，css都嘉定每个元素都会生成一个或者多个矩形框，我们称之为元素框，如下图所示： 通过...

前言 文本是网页编程中的重要元素，提供了很多的相关的属性操作，以不同的方式配合来控制文本的展示，比如可以影响文本中相对一行中其他内容的内置，可以将文本设置为上标等等，针对平时常用的文本属性的学习，加深对文本属性的使用，结合几个常见的文本效果的学习，领略文本属性的魅力！！！！最最最主要的是，我不想一遇到稍微有一点点特殊的文本样式，就是度娘，对自己没有半毛钱提升！！！ 行内...

前言 在目前前端快速发展的情况下，以前就是简单地会去使用别人的脚手架来搭建项目，然后在项目中进行业务的开发，但是慢慢地，随着业务的正常发展，会发现原本的脚手架好像已经不能够满足当前的业务，需要在目前项目上进行一个优化工作，但是基本上大部分都是不清楚脚手架里面都有什么配置，也不知道项目中的配置都用来干嘛，都有什么用途，那么怎能够去站在这个脚手架的上面，来理解并优化项目的架构...

前言 在平时日常使用css的时候，最容易忽略的个人认为就是这个字体了，关于字体的使用，一般没有什么特殊的要求的话，都是使用的用户代理，也就是用户浏览器自身设置的字体，而不会去使用其他的字体；也没有多大的必要去使用一些特殊的字体，特别是一不小心就侵权了，因为有部分字体人就是依托这个字体来让自己公司盈利，这里具体怎么盈利就不多说，只希望在使用某些字体之前，需要再三斟酌了！！本...

前言 在平时的日常编码过程中，对于css属性的使用也仅仅是停留在了简单使用的阶段，但如果出现新的未曾见过的css单位或者比较少用的单位时，则一脸懵逼，也不知道这个单位以及它的值是用来作甚的，目前个人这边的方式是闭着👀开浏览器调试模式，然后按照可视化所看到的效果进行简单的调试，也没有去深究其中的一个原理，作为想要在前端领域精进的一名贫穷孩子，我觉得有必要去了解其中的一个原...

前言 写久了web前端的样式，基本上都知晓如何编写css，已经对应如何应用到对应的标签上，那么，我们自己有没有想过，为毛这里编写的css久可以直接在界面上展示出我们所编写的效果，浏览器它做了什么事情，使🉐️我们可以编写出排版整齐，配色优美的界面的呢？这里通过对这个浏览器中关于css的原理简单讲解，来更加深入地理解我们所编写地css样式代码，是如何被浏览器所识别并使用到每...

前言 之前一直想在网上针对一些三方框架或者方案编写自己的一个使用手册/阅读笔记，原本自己的hexo博客比较适合平时自己的点击积累，但不能够像一本书这样子来浏览，因此，我在网上找相关的，终于发现有这样的一个框架：gitbook，可以用它来编写一样的markdown文件，来组织自己的书籍/手册的一个目录 gitbook介绍 gitbook是一个基于node.js的命令行工具...