萌新在线嘤嘤嘤-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 97

原创 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 95

原创 BOM

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

2021-01-31 17:02:18 76

原创 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 168

原创 Flex布局

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

2021-01-10 18:59:29 317

原创 CSS盒子模型

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

2020-12-28 18:47:39 201

原创 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 465

原创 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 118

原创 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 227

Lzy512697497的博客