萌新在线嘤嘤嘤-CSDN博客

原创 Canvas时钟

JS代码 let cavEles = document.getElementsByTagName("canvas"); // 画背景 let ctx1 = cavEles[0].getContext("2d"); //画时针 let ctx2 = cavEles[1].getContext("2d"); //获取尺寸 let { offsetWidth: w, offsetHeight: h } = cavEles[0]; //获取π let { PI } = Math; // 设置中心 ctx2.tran

2021-01-31 17:12:32 141

原创 DOM

DOM：Document Object Model，文档对象模型。功能：操作HTML元素。 document是页面视口的区域。节点(Node) nodename nodeValue nodeType 元素节点标签名 null 1 文本节点 #text 标签中文本内容 3 属性节点属性名属性值 2 注释节点 comments 注释内容 8 文档document 9 注：no

2021-01-31 17:05:18 140

原创 BOM

Bom(Browser Object Model)浏览器对象模型每打开一个浏览器,就会产生一个window对象(GO),所有BOM的顶层对象就是window BOM分支 1.screen(获取显示器尺寸,不包含任务栏) // 属性 screen.availWidth // 显示器宽度 screen.availHeight // 显示器高度 2.navigator(获取浏览器信息) navigator.appName // 浏览器名称 navigator.appVersion // 浏览器版本 navig

2021-01-31 17:02:18 110

原创 JS基础理论

[扩展] 【创建变量】 ES5 var xx; 声明的变量，可以重复声明 ES6 let和const; let声明变量，const声明常量。【数据类型】 1 基本数据类型（值类型）： String 字符串 "" '' ``(字符串模板ES6，内写${变量名}) name = "lzy" console.log(`${name}欢迎光临`); Number 数值整形、浮点型、NaN(it not a number) Boolean 布

2021-01-11 18:14:48 215

原创 Flex布局

布局原理设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。可以用于任何元素，采用flex布局的元素被称为flex容器，它的所有子元素自动成为容器成员，成为flex项目，简称项目。原理：通过给父盒子添加flex属性(display: flex)，来控制子盒子的位置和排列方式。默认情况下，项目都排在一条线上。 flex布局中默认的子元素不换行。如果装不开，就会缩小子元素宽度。除图片 display: -we

2021-01-10 18:59:29 386

原创 CSS盒子模型

盒子模型 box-sizing: content-box;(标准盒模型) box-sizing: border-box;(ie盒模型) 适用场景: 当标签尺寸的基础上又添加padding或border的尺寸,为了实现标签在页面的实际尺寸仍然是设置的尺寸。标准盒子模型元素(子盒子可以比父盒子大) 1.组成元素边框border 内边距padding 内容content 外边距margin(控制盒子和盒子以前的距离) 注：行内元素尽量只设置左右内外边距，不要设置上下内外边距。

2020-12-28 18:47:39 250

原创 CSS样式

CSS 三大特性申明冲突:多个选择器，选中同一个元素，相同属性名不同属性值。浏览器自动触发重叠机制。 1.层叠性就近原则 2.继承性 text-，font-，line-，color 可以继承强制继承 1.继承不能继承的属性 2.继承已经声明过的属性子元素 {属性:inherit} 3.优先级权重相同，层叠性。不同，采取优先级。权重越大，级别越高。继承或* 权重0000 标签选择器权重0001 类选择器权重 0010 id选择器权重0100 style 权重1000 !import

2020-12-28 18:45:13 520

原创 CSS选择器

CSS 用于控制网页的样式和布局。 CSS三种引用方式 1.行内样式表格式： <元素名 style="属性1:属性值1; 属性2:属性值2;"> 介绍：写在标签内部，通常用于测试单个属性时使用。 2.内部样式表格式： <style type="text/css"(可省略)> 标签名1{属性1：属性值1；属性2：属性值2；} 标签名2{属性1：属性值1；属性2：属性值2；} </style> 介绍：通常放在head中，一般用于页面的测试。

2020-12-21 19:14:47 148

原创 HTML常用元素

HTML常用元素，如有遗漏请各种大佬补充分享两个html学习网站 W3C:http://www.w3school.com.cn/ MDN:https://developer.mozilla.org/zh-CN/ 元素/标签 1.a元素 <a href="url">内容</a> 超链接元素 1.1 <a href="mailto:邮箱地址">发送邮箱</a> 1.2 <a href="tel:电话号码">打电话</a>

2020-12-15 18:00:14 291