前言

想实践练习一下 canvas，简单复现一下原神一个网页活动的加载页面的一些部分。本文主要是记录一下实现过程中的一些收获。

在网页开发过程中难免会有内容过多需要滚动的时候，但是浏览器默认的滚动条样式不够美观，使用overflow:hidden去隐藏滚动条又将导致内容不可滚动。以往我以为那些自定义滚动条样式的网页都是通过自己开发定义行为、实现样式等一系列复杂的操作来达到自定义滚动条的效果。但是今天发现可以通过伪元素来轻松实现。

简介

React 为了对类组件进行状态控制，在类组件生命周期的各个阶段提供了对应的生命周期函数；而在函数式组件中，则是用 hooks 来实现状态控制。本篇中以类组件为例，对各个生命周期函数进行初步解析。

简介

本篇读书速记的内容对应《深入浅出 React 和 Redux》这本书的第二章的前半，主要内容是 React 如何通过 state 和 prop 进行状态管理。

本章的内容是从组件化开发的基础上，介绍了 React 进行组件化开发的方式，其中尤其介绍了在 React 父子组件间的数据通信方式，即 state 与 prop 参数，以及组件的生命周期。

在 React 提供的组件开发方式中，我们可以一瞥 React 的设计思路，对后面理解 React 的一些实现原理以及开发过程中应当遵循的原则有所裨益。

前言

近年来读书欲望偏低，记忆力也不如从前，究其原因，可能是在面对大量文字时不甚愿意花费心思和时间从中提取吸收知识。今逢有 React 学习需求，手边有恰有《深入浅出 React 和 Redux》这本书，因此在拜读学习同时略作笔记，以锻炼自己从文本中提取信息并加以分析的能力，同时以期能够再次爱上读书。

简介

本篇读书速记是在观读本书第一章内容后的笔记。在第一章中，作者旨在简要介绍 React，并对 React 一些突出的特点进行分析以及与其他框架进行对比，以便读者能够相对直观的简单认识 React。在本章中，首先是介绍了一个 React 应用的创建方式以及为何要使用这种方式。接着介绍了 React 的首要思想——组件化开发（这也是如今代码开发过程中的重要思想，当然各自框架对于组件化的理解会有所出入，但都大同小异）。紧接着就着组件化开发介绍了 React 的另一特色——JSX 语法。然后对脚手架搭建的项目结构进行简要解读。最后，对 React 的工作方式进行概况并与 JQuery 进行对比，在这一段中，React 的工作方式不仅仅是使用 React 的方式，也是以 React，Vue 这类框架为代表的初衷。

前言

近期在跟小伙伴合作开发，期间频繁使用到了一些git命令以及学习到一些分支管理流程，记录一下。

前言

在平时代码编写过程中，时常需要将值为空作为特殊情况考虑，因而有了如何判空的问题。在此对空值及其判空方法做个总结。

算法原理

选择排序的原理是，在每一轮中，从未排序的部分挑选出最小（最大）的数放到正确的位置。例如在一个长度为 N 的数组中，第一趟选择出最小的数放在数组的最前面，然后第二趟从未排序的部分中选择从最小的数放在已排序的部分的末端，然后以此循环下去直到将每个数都放到了对应的位置就完成了排序。示意图如下：

说在前面的话

本系列的前三篇是以前老博客的补档，当初的所有博客内容因为系统缘故丢失了md文件。但是排序算法系列还是比较重要的，因此根据残留的网页文件手动补档。

盒模型

盒模型由内到外分为内容content、内边距padding、边框border、外边距margin共四层。

根据制定标准的不同，盒模型分为 W3C 标准的标准盒模型和 IE 浏览器使用的怪异盒模型。

标准盒模型与怪异盒模型

标准盒模型与怪异盒模型的不同点在于实际显示大小在计算上的不同。

在标准盒模型下，css 中的height与width属性设置的是内容content的宽高，因此实际盒子显示的宽高=height\width+内边距padding+边框border。
而在怪异盒模型下，css 中的height与width属性设置即是盒子可视区域的宽高，所以内容content的宽高=height\width-内边距padding-边框border。

浏览器默认采用的是标准盒模型（IE 除外），但是可以通过box-sizing属性去设置采用哪种盒模型，content-box对应标准盒模型、border-box对应怪异盒模型。

拓展

以前碰到过一个面试题，问一个盒模型最多能实现几层的同心圆，即盒模型的四层中有几层能够设置颜色。

盒模型的四层中只有content和border能设置颜色。

参考

MDN 手册-盒模型