文章 | Mr.LRH 博客

传统 CSS3 的方式绘制几何图形

clip-path

clip-path 属性使用裁剪方式创建元素的可显示区域。

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

<clip-source> ：用 url 引用 SVG 的 clipPath 元素。
<basic-shape> ：使用一些基本的形状函数创建的一个形状。
- inset() ：定义一个 inset 矩形。
- circle() ：定义一个圆形（使用一个半径和一个圆心位置）。
- ellipse() ：定义一个椭圆（使用两个半径和一个圆心位置）。
- polygon() ：定义一个多边形（使用一个 SVG 填充规则和一组顶点）。
- path() ：定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。
<geometry-box> ：如果同 basic-shape 一起声明，它将为基本形状提供相应的参考框盒。
- margin-box ：使用 margin box 作为引用框。
- border-box ：使用 border box 作为引用框。
- padding-box ：使用 padding box 作为引用框。
- content-box ：使用 content box 作为引用框。
- fill-box ：利用对象边界框（object bounding box）作为引用框。
- stroke-box ：使用笔触边界框（stroke bounding box）作为引用框。
- view-box ：使用最近的 SVG 视口（viewport）作为引用框。

Mr.LRH大约 9 分钟

/* 规定边框的宽度 */
/* thin ： 定义细的边框，等同于 1px */
/* medium ： 默认。定义中等的边框，等同于 3px */
/* thick ： 定义粗的边框，等同于 4px */
/* length ： 允许自定义边框的宽度 */
border-width: medium;
/* 规定边框的样式 */
/* none ： 默认值，不显示边框。优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。因为默认值，所以单纯设置 border-width 或 border-color 没有边框显示的原因 */
/* hidden ： 不显示边框。优先级最高，意味着如果存在其他的重叠边框，边框不会显示 */
/* solid ： 实线边框 */
/* dashed ： 虚线边框 */
/* dotted ： 虚点边框 */
/* double ： 双实线边框。表现规则为：双线宽度永远相等，中间间隔 ±1。例如： 1px （0+1+0）、 2px（1+0+1）、3px（1+1+1）、4px（1+2+1）、5px（2+1+2）、6px（2+2+2）、7px（2+3+2） */
/* groove ： 有雕刻效果的边框，样式与 ridge 相反 */
/* ridge ： 有浮雕效果的边框，样式与 groove 相反 */
/* inset ： 有陷入效果的边框，样式与 outset 相反 */
/* outset ： 有突出效果的边框，样式与 inset 相反 */
border-style: none;
/* 规定边框的颜色。当没有指定 border-color 颜色值的时候，会使用当前元素的 color 计算值作为边框色。 */
border-color: inherit;

Mr.LRH大约 5 分钟

滚动条样式

序号	伪元素	说明
1	::-webkit-scrollbar	滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等
2	::-webkit-scrollbar-button	滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
3	::-webkit-scrollbar-track	外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
4	::-webkit-scrollbar-track-piece	内层轨道，滚动条中间部分（除去）
5	::-webkit-scrollbar-thumb	滚动条里面可以拖动的那部分
6	::-webkit-scrollbar-corner	边角
7	::-webkit-resizer	定义右下角拖动块的样式

Mr.LRH大约 2 分钟

视口（viewport）

viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素）和 CSS 像素之间的关系。

layout viewport（布局视口）

一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的 layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

Mr.LRH大约 7 分钟

CSS 选择器与权重

CSS 选择器权重

权重计算规则
- 第一等：代表内联样式。如: style=”” 权值为 +1000
- 第二等：代表 ID 选择器。如：#content 权值为 +100
- 第三等：代表类，伪类和属性选择器。如：.content 权值为 +10
- 第四等：代表类型选择器和伪元素选择器，如：div p 权值为 +1
- 通配符、子选择器、相邻选择器等。权值为 +0
- 继承的样式没有权值
权重比较规则： 1,0,0,0 > 0,99,99,99
- 从左往右逐个等级比较，前一等级相等才往后比
- 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
- 通配符、子选择器、相邻选择器等的。虽然权值为 0000，但是也比继承的样式优先
!important

!important 的作用是提升优先级，样式的优先级是最高的（比内联样式的优先级还高）

Mr.LRH大约 6 分钟

background

/* 规定要使用的背景颜色。无论是单背景图还是多背景图，背景色一定是在最底下的位置 */
background-color: transparent;
/* 规定背景图像的位置 */
background-position: 0% 0%;
/* 规定背景图片的尺寸 */
background-size: auto auto;
/* 规定如何重复背景图像  */
/* repeat ： 默认。背景图像将在垂直方向和水平方向重复 */
/* repeat-x ： 背景图像将在水平方向重复 */
/* repeat-y ： 背景图像将在垂直方向重复 */
/* no-repeat ： 背景图像将仅显示一次 */
background-repeat: repeat;
/* 规定背景图片的定位区域 */
background-origin: padding-box;
/* 规定背景的绘制区域 */
background-clip: border-box;
/* 规定背景图像是否固定或者随着页面的其余部分滚动 */
/* scroll ： 默认值，背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的） */
/* fixed : 背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动 */
background-attachment: scroll;
/* 规定要使用的背景图像  */
background-image: none;

Mr.LRH大约 12 分钟

font

font-size

`font-size` 属性值

font-size 支持长度值（如 1em），也支持百分比值（如 100%）。同时，还支持关键字属性值。

font-size 的关键字属性值分以下两类。

相对尺寸关键字。指相对于当前元素 font-size 计算，包括：
- larger ：大一点，是 <big> 元素的默认 font-size 属性值。
- smaller ：小一点，是 <small> 元素的默认 font-size 属性值。
绝对尺寸关键字。与当前元素 font-size 无关，仅受浏览器设置的字号影响。
- xx-large ：好大好大，和 <h1> 元素计算值一样。
- x-large ：好大，和 <h2> 元素计算值一样。
- large ：大，和 <h3> 元素计算值近似（“近似”指计算值偏差在1 像素以内，下同）。
- medium ：不上不下，是 font-size 的初始值，和 <h4> 元素计算值一样。
- small ：小，和 <h5> 元素计算值近似。
- x-small ：好小，和 <h6> 元素计算值近似。
- xx-small ：好小好小，无对应的 HTML 元素。

Mr.LRH大约 13 分钟

text

text-indent 与内联元素缩进

text-indent 对文本进行缩进控制。

/* <length> 值，允许使用负值 */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> 值，相对于包含区块的宽度 */
text-indent: 15%;

/* 关键字值 */
/* each-line 缩进会影响区块容器的第一行以及强制换行后的每一行，但不影响软换行后的行。 */
/* hanging 反转缩进行。除第一行外，所有行都将缩进。 */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* 全局值 */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

Mr.LRH大约 14 分钟

脚手架

脚手架本质是操作系统的客户端，用于快速构建项目的工具。

环境变量

环境变量（environment variables）一般是指在操作系统中用来指定操作系统运行环境的一些参数，如：临时文件夹位置和系统文件夹位置等。

在 Windows 和 DOS 操作系统中的 path 环境变量，当要求系统运行一个程序而没有告诉它程序所在的完整路径时，系统除了在当前目录下面寻找此程序外，还应到 path 中指定的路径去找。

脚手架执行过程

#!/usr/bin/env node ：表示让系统动态的查找 node 执行脚本文件。

Mr.LRH大约 2 分钟

设计原则

面向对象程序设计

面向对象程序设计（OOP，Object-oriented programming）是种具有对象概念的编程典范，同时也是一种程序开发的抽象方针。

它可能包含数据、特性、代码与方法。
对象则指的是类（class）的实例。
它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性，对象里的程序可以访问及经常修改对象相关连的数据。

面向对象程序设计的基本概念：

类与对象：
- 类：定义事物的抽象特点。类的定义包含了数据的形式以及对数据的操作。
- 对象：类的实例（Instance），可以调用类中的方法。
封装：通过限制只有特定类的对象可以访问该特定类的成员，通常利用接口实现消息的传入传出。通常来说，成员的访问权限被分为 3 种：公有成员（public）、私有成员（private）以及保护成员（protected）。
继承：根据已有类创建新类，子类继承父类。
- 子类比父类要更加具体化。
- 如果父类实现了某个接口，那么其所有子类都必须实现该接口。
多态：由继承而产生的相关的不同的类，其对象对同一消息会做出不同的响应。程序能够检测对象所属的实际类，并在当前上下文不知道其真实类型的情况下调用其实现的能力。

Mr.LRH大约 4 分钟