brightan-CSDN博客

原创 Eslint

在前端协作开发中，Eslint和Stylelint格外重要。在vscode中配合prettier使用时遇到一些问题，百度结果没有解决自己的问题，于是自己研究了一下。Eslint和prettier结合使用因为Eslint的格式化配置和prettier会有冲突，于是需要将它们结合起来使用1. prettier优先我们在项目根目录下创建一个.prettierrc.js的prettier配置文件。...

2019-08-03 14:22:52 283

原创 CSS文本换行设置

1、word-wrapword-wrap:normal | break-word;这里设置的是文本内容换行normal：默认值，当一行剩余空间无法容纳下一个字（英文是指单词）时，会换行break-word：针对英文的文本，这个值可以让一个单词拆分开来换行。2、word-breakword-break:normal | break-all | keep-all决定单词是否柴拆分...

2019-07-28 20:16:12 17986 1

原创 CSS浮动定位（float）

CSS浮动定位在CSS中设置一个盒子的float值为left或者right，就会使得盒子浮动起来。浮动盒子的特点：浮动盒子向左或者右移动，直到碰到包含块的边界（content）或者另一个浮动盒的外边界（margin）如果存在行框，浮动盒的上外边界（margin）和当前行框的上边界对齐...

2019-07-28 19:05:46 341

原创 CSS2.1常规流（包含BFC，IFC）

常规流中的盒可能是块，可能是行内，块级盒参与块格式话上下文（BFC），行内级盒参与行内格式化上下文（IFC）一、BFC（Block Formatting contexts）BFC就是我们常说的块级格式化上下文。哪些元素会建立新的块级格式化上下文？浮动元素绝对定位元素非块盒的块容器（display为inline-blocks、table-cells和table-captions）...

2019-07-27 22:26:19 245

原创 CSS（深入研究合并外边距collapse）

合并外边距CSS中，两个或多个盒（可能但不一定是兄弟）的相邻的垂直方向的margin会被结合成一个margin。外边距按这种方式结合叫做合并（collapse）1、相邻的垂直外边距会合并，除了html和body的外边距不合并图一元素如果带有clear属性（生成间隙clearance），上外边距与下外边距相邻（height为0），那么它的外边距会和兄弟的相邻外边距合并，但合并后的m...

2019-07-25 22:12:32 538

原创 Canvas进阶（相关接口）

Canvas进阶（相关接口） Canvas进阶（相关接口）绘制线条多边形的自动闭合当我们简单地绘制一个多边形的时候，最终运行出来会发现没有完全闭合 ...

2019-07-25 11:22:26 276

原创 Canvas高级内容

Canvas高级内容 Canvas高级内容阴影 context.shadowColor context.shadowOffsetX context.shadowO...

2019-07-25 11:12:11 274

原创简单canvas入门

简单canvas入门 - 幕布简单canvas入门创建canvas以及初始化 <canvas id="canvas" width="1024" height="768"></canvas>注意这个widt...

2019-07-25 11:07:03 131

原创 js属性描述对象

javascript属性描述结构6个元属性value 属性值writable 属性是否可写enumerable 属性是否可遍历configurable 属性是否可配置（属性描述对象的可写性）get getter函数set setter函数Object.getOwnPropertyDescriptor(对象，属性名)用于获取属性描述对象Object.getOwnPrope...

2019-07-23 22:07:37 375

原创 html文件!DOCTYPE声明

在html文件中，如果不加！DOCTYPE则会按照浏览器的解析标准去解析。加了就会按照W3C标准解析。所以为了更好地兼容浏览器，应该要写明！DOCTYPE

2019-07-23 20:35:18 163

原创前端模块化（ES6和CommonJS）

前端模块化对于开发大型的、复杂的项目，模块化显得十分重要。ES6出现之前，社区主要有CommonJS和AMD两种，前者用于服务器，后者用于浏览器。ES6模块化则可以完全替代它们。ES6模块与CommonJS和AMD的主要区别ES6模块依赖是在编译时就能确定，而后两者只能在运行时才能确定。1. 运行时加载// CommonJS模块let { stat, exists, readFile...

2019-07-22 21:58:01 545

原创 Babel的使用

babel工具Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。所需的包@babel/corebabel核心功能模块@babel/clibabel CLI命令行工具@babel/preset-envbabel预设(包含一组设定好的插件)@babel/polyfi...

2019-07-22 21:08:53 539

原创 ES5概略

ES5学习1、概要轻量级脚本语言（不能开发OS，只控制其他大型program）嵌入式语言（JS无I/O相关API，靠host提供）JavaScript核心语法：基本的语法构造和标准库使用领域：浏览器、Node、数据库操作、移动平台、内嵌脚本语言（GNOME3）、跨平台桌面应用性能强大：适合异步编程、支持编译后运行、事件驱动和非阻塞式设计2、JavaScript...

2019-07-16 15:38:19 395

原创 display,position和float之间的关系（Relationships between 'display', 'position ',and 'float ')

三个影响盒子构建和布局的元素——‘display’，‘position’ 和 ‘float’——相互影响如下： 1、如果‘display’ 取 ’none‘ 值，那么’position‘ 和 ’float‘ 的设置都不会应用。在这种情况下，元素不构建盒子（不显示） 2、否则，如果 ’postion‘ 取值为 ’absolute‘ 或者 ’fixed‘ ，那么该盒子就被放在绝对位...

2018-06-18 14:33:40 269

原创 Node.js入门

一、定义 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。官方网站 http://nodejs.cn二、npm的使用 npm的官网https://www.npmjs.com/ 查询npm版本号...

2018-04-25 21:39:03 146

原创 CSS3新布局

一、多列布局 1、columns属性定义多列布局 columns: column-width | | column-count; columns属性初始值根据元素个别属性决定，它适用于不可替换的块元素、行内块元素、单元格，但是表单元素除外。1）设置列宽 column-width: length | auto ;2）设置列数 column-count: integer | auto...

2018-04-25 21:38:05 2122

原创 jQuery选择器基础

一、基础 1）支持CSS1、CSS2、CSS3不同版本的选择器 2）不用考虑浏览器兼容性问题 3）依然依靠j原生方法 4）如果jQuery选择器没有匹配元素，则会返回一个空的伪数组对象。、 Ps：$是jQuery的别名，如$()等效于jQuery()，将jQuery对象转换为DOM对象有两种方法，一是借助下标，二是借助jQuery方法如get（)方法二、基本选择器 1、ID选择器 ...

2018-04-25 21:37:58 192

原创使用过滤器

一、过滤其中的expr是css查询字符串表达式过滤方法说明 eq(index) 获取第N个元素 hasClass(class) 检查当前元素是否属于特定的类，如果有，返回true filter(expr) 筛选出与指定函数返回值匹配的元素集合 filter(function) 筛选出与指定函数返回值匹配的元素集合 i...

2018-04-25 21:37:45 166

原创 jQuery操作DOM

一、创建节点在web开发中，主要操作的节点包括元素、属性和文本 1）创建元素使用DOM创建节点，使用appendChild()方法添加到文档中 document.createElement("tagName") 使用jQuery构造函数$()创建元素对象（返回一个jQuery对象） $(html字符串) eg:$("<div></div>")使用appen...

2018-04-25 21:37:31 203

原创 jQuery事件处理

一、事件模型基础 jQuery使劲按模型体现了以下特征： ①统一了事件处理中的各种方法 ②允许在每个元素上为每个事件类型建立多个处理程序 ③采用了DOM事件模型中标准的事件类型名称 ④统一了event事件对象的传递方法，并进行了规范 ⑤为事件管理和操作提供了统一的方法 jQuery事件模型不支持DOM中的捕获型阶段1、绑定事件 jQuery提供了四种事件绑定方式：bind()、...

2018-04-25 21:37:17 744

原创 html居中问题

一、水平居中（text-align：center）（可继承） 1、行内元素 text-align：取值包括4个：left | right | center | justify 这里的align指的是每行的文字都向一个方向靠。 ps：text-align存在兼容性问题 CSS2.1标准下，center可以居中所有行内元素 CSS1（IE6，7，8）标准下，只有块状元素具有该属性，并且所有...

2018-03-19 11:12:34 868

转载块状元素和内联元素

块状元素内联元素address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易，也是CSS layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单h1 - 大标题h2 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6...

2018-03-04 06:28:26 179

原创 JS笔记（事件处理）

一、事件基础 1、事件模型在浏览器的发展历史中，出现4种事件处理模型基本事件模型，DOM事件模型，IE事件模型，netscape事件模型 2、事件流冒泡型，捕获型，混合型 3、绑定事件在基本事件模型中，JavaScript支持两种绑定方式：；静态绑定和动态绑定 4、事件处理函数事件处理函数是一类特殊的函数，与函数直接量结构相同，为异步调用。 5、注册事件在DOM事...

2018-02-14 16:46:29 261

原创操作DOM（Document Object Model）

一、使用节点 Node接口：所有节点类型必须继承Node类型 1、节点类型 DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等等。介绍12种节点类型的博客：https://www.cnblogs.com/xiaohuochai/p/5785189.html 2、节点名称和值 nodeName和nod...

2018-02-13 18:28:08 400

原创操作BOM（Browser Object Model)

一、使用window对象在浏览器中window对象既是JS访问浏览器窗口的接口，又是JS的全局对象。 1、访问浏览器窗口浏览器对象简单说明： window：客户端JavaScript中的顶层对象。每当<body>或<frameset>标签出现时，window对象就会被自动创建。 navigator：包含客户端有关浏览器的信息 screen：包含客户端有关显示...

2018-02-12 14:17:22 191

原创 JavaScript笔记（基础）

一、入门 1、使用<script>标签可以把js源代码直接放入网页文档中注意：引擎是从上往下解析网页源代码，js脚本要放到应用元素声明之后 2、使用js文件使用<script>标签，通过src属性指定.js文件的URL即可 3、语法基础 1）语言编码（Unicode），可以使用双字节字符 2）大小写敏感（声明类型习惯大写，声明变量习惯小写 3）代码注释：...

2018-02-12 12:23:28 211

原创 CSS笔记（动画变换）

一、设计2D变换 transform：none | <transform-function> [<transform-function>]* <transform-function>设置变化函数。常用的变换函数的功能如下： matrix()：定义矩阵变换，即基于X和Y坐标重新定位元素的位置 translate()：移动元素对象，即基于X和Y坐标重新定...

2018-02-11 23:30:21 275

原创 HTML、CSS笔记（网页排版）

一、使用结构标签 HTML网页不仅需要div标签，还需要以下几类标签来完善结构 1）<h1>~<h6> 2）<p> 3）<ul><ol><li>等 4）<table><tr><td>等 5）<form><i

2018-02-11 16:48:40 318

原创 CSS笔记（布局基础）

一、CSS盒模型 1、盒模型结构 content（内容）、padding（内边距）、border（边框）、margin（外边距）所有元素都可以视为一个盒子，盒模型是页面元素的基本模型结构 *content包括width、height、background，它可以延伸到补白或边框内。可以通过min-width、max-width、min-height、max-height灵活控制大小（...

2018-02-10 16:45:22 181

原创 CSS笔记(美化表单）

一、表单的基本结构表单由很多控件构成，如文本框、文本区域、单选按钮、复选框、下拉菜单和按钮等。一个完整的表单结构应该由三部分组成 1）表单框架（<form>)：<form>是一个包含框，里面包含所有表单对象。包含处理表单数据的各种属性，如提交字符编码、与服务器交互的页面、HTTP提交方式等 2）表单域（<input>、<select>...

2018-02-09 22:31:21 3745

原创 CSS笔记（美化表格）

一、表格的基本结构表格由行、列、单元格三部分组成，单元格是行与列交叉的部分，可以拆分和合并。表格<table>，行<tr>，单元格<td> 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。 1、标准化的表格结构 *<table>定义表格 *<caption>定义表格标题<caption>必须紧随&l...

2018-02-08 23:38:52 1170

原创 CSS笔记（美化列表）

一、列表的基本结构列表的结构可以分为两种基本类型：有序列表和无序列表。无序列表使用项目符号来标识列表，而有序列表则使用编号来标识列表的项目顺序。 <ul></ul>标识无序列表 <ol></ol>标识有序列表 <li></li>标识列表项目还有一种特殊列表是定义列表，它包括词条和解释两块内容 <dl&gt

2018-02-08 21:41:10 1529 1

原创 CSS笔记（美化超链接）

一、定义超链接 1、超链接分类 1）内部链接（链接的目标在同一网站中，直接相对路径就可以链接的，URL不需要指定协议和互联网位置） 2）外部链接（一般为外部网站目标，需要指定协议和网站地址） 3）锚点链接（锚标记后缀“#”）2、<a>标签 <a href="https://www.baidu.com/" target="_blank">百度一下</a&g...

2018-02-08 19:57:55 1434

原创 CSS笔记（美化图像）

一、插入图像 <img src="URL" alt="替代文本“> <img>标签并不会在网页中插入图像，而是从网页上链接图像，它创建的是被引用图像的占位空间二、设置图像格式 1、定义图片大小 height：定义图像的高度 width：定义图像的宽度 ismap：将图像定义为服务器端图像映射 usemap：将图像定义为客户端图像映射 longdesc：指...

2018-02-08 05:25:13 575

原创 CSS笔记（美化文本）

2018-02-07 21:41:28 910

原创 HTML笔记（网页文本）

一、标题 h1、h2…h6标签定义标题，级别逐渐递减 h1只能够使用一次，其他可反复使用。若h2作为副标题则只能使用一次二、段落文本标签定义段落文本，前后会有一段空白。三、引用文本（不具备超链接特性）标签定义短的引用，浏览器经常在内容周围加引号定义块引用，其文本会分离，左右缩进，有时会显示斜体定义参考文献的引用，以斜体显示，常与一起使用四、强调文本用于强调文

2018-02-07 17:25:57 1027

原创 CSS选择器

一、基本选择器分为四类：标签选择器、类选择器、ID选择器、和通配选择器。 1、标签选择器（标签名） p { } 2、类选择器（“.”前缀开头+class属性值） .classname { } 指定类选择器 p.classname { } class属性可以表示属于多个类，空格隔开 <p class="cn1 cn2 cn3...">&...

2018-02-07 14:55:00 258

原创 CSS笔记（基础知识）

CSS CSS样式基本结构 CSS注释语句/*注释语句*/CSS样式主要应用方式（4种）行内样式、内嵌式、链接式以及导入式 1、行内样式： 2、内嵌式：样式定义文本 3、链接式： 4、导入样式： @import "yangshi.css" CSS样式表：包括内部样式表和外部样式表CSS两个基本特性 1、层叠性 1）样式表的优先级：作者>用户>浏览器>HT

2018-02-06 16:15:14 205

原创 H5笔记（二）

HTML5的元素(在HTML4元素的基础上增加的）结构元素 header：示页面中一个内容区块或整个页面的标题 footer：表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息 section：表示页面中的一个内容区块，如章节、页眉、页脚或页面中的其他部分。它可以与h1~h6等元素结合使用，标识文档结构 article：表示页面中的一块与上下

2018-02-05 23:43:19 236

原创 H4笔记

HTML4元素结构元素（多指块状元素） div (division划分):包含框，容器 span （span范围):行内包含框 ol （ordered list）:根据一定的排序进行列表 ul （unordered list):没有排序的列表 li （list item):列表项 dl （definition list):以定义的方式进行列表 dt （definit

2018-02-05 22:56:50 391

空空如也

空空如也