蘇阿細
相聚有时，后会无期
搜索到
94
篇与
的结果
-
二、数据类型 1. 数值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>数值</title> </head> <body> <script> /* 数值（Number） - 在js中，所有的整数和浮点数都是Number类型 - js中的数值并不是无限大的，当超过一定范围后，会显示近似值 - Infinity是一个特殊的数值，表示无穷大 - 进行计算时，需注意精度的问题 */ let a = 10 a = 100 a = 99999 * 999999 a= Infinity a = 1 - 'a' //NaN（Not a number） console.log(a) /* 大整数（BigInt） - 用来表示比较大的整数 - 大整数使用n结尾，它可以表示的数字范围是无限大 */ /* 其他进制的数字 - 二进制 0b - 八进制 0o - 十六进制 0x */ let b b = 0b1010 b = 0o10 b = 0xff console.log(b) //打印时都是十进制 </script> </body> </html> 2. 类型检查<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类型检查</title> </head> <body> <script> let a = 10 let b = 10n console.log(a) console.log(b) //typeof检查的是变量的值的类型，而不是变量的类型，在js中，变量是没有类型的 //typeof返回的结果是一个字符串 console.log(typeof a) console.log(typeof b) </script> </body> </html> 3. 字符串<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>字符串</title> </head> <body> <script> /* 字符串 - 在js中使用单引号或双引号表示字符串 - 转义字符 \ 做斜杠 \t 制表符 \n 换行 - 模板字符串 使用 ` 表示，可以跨行，引号不能跨行 */ let a = '孙笑川' a = '这是一个"字符串"' a = "这是一个\"字符串\"" console.log(a) let b = `我的名字是： 孙笑川` console.log(b) let name = '孙笑川' let str = `我的名字是${name}` console.log(str) </script> </body> </html> 4. 其他的数据类型<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>其他的数据类型</title> </head> <body> <script> /* 布尔值（Boolean） - 用于逻辑判断 - 只有true、false两个值 */ let flag = false console.log(flag) console.log(typeof flag) /* 空值（Null） - 表示空对象 - 空值只有一个，即null - 使用typeof检查空值时，会返回"object"，这其实是js发展历史中的一个bug，typeof无法检查 */ let a = null console.log(a) console.log(typeof a) /* 未定义（Undefined） - 当声明一个变量没有赋值时，它的值就是undefined - 使用typeof检查时，返回的是"undefined" */ //let b let b = undefined console.log(b) /* 符号（Symbol） - 用来创建一个唯一的标识符 - 使用typeof检查时，返回的是"Symbol" */ let c = Symbol() //调用Symbol函数创建了一个符号 console.log(c) //这七种数据类型的原始值不可变（即创建之后不可修改） </script> </body> </html> 5. 类型转换 - 字符串<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类型转换-字符串</title> </head> <body> <script> /* 将一种数据类型转换为其他类型 */ let a = 10 a = true a = 100n //a = null console.log(typeof a, a) /* 1.调用toString()方法，注意：null和undefined没有该方法 */ a = a.toString() console.log(typeof a, a) /* 2.调用String()函数 对于拥有toString()方法的值调用String()函数时，实际上就是在调用toString() 对于null、undefined等值，则是直接进行转换 */ let b = 10 b = null b = undefined console.log(typeof b, b) b = String(b) console.log(typeof b, b) </script> </body> </html> 6. 类型转换 - 数值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类型转换-数值</title> </head> <body> <script> /* 1.使用Number()函数 - 字符串： 如果字符串是一个合法的数字，则会自动转换为对应的数值 反之，则是 Nan 如果字符串是空串或纯空格的字符串，转换后则是0 - 布尔值： true转换为1，false转换为0 - null 转换为0 - undefined 转换为Nan 2.专门将字符串转换为数值的两个方法 - parseInt() 转换为整数 解析时会自左向右逐一读取字符串，直到读取完字符串中所有有效的整数 有些时候可以使用该方法对数值进行取整（不推荐） - parseFloat() 转换为浮点数 解析时会自左向右逐一读取字符串，直到读取完字符串中所有有效的浮点数（小数） */ let a = '123' a = 'abc' //Nan a = '11px' //Nan a = '' //0 a = ' ' //0 a = true //1 a = false //0 a = null //0 a = undefined //Nan console.log(typeof a, a) a = Number(a) console.log(typeof a, a) let b = '123' b = '123px' //123 b = 456 //当传的值不是字符串而是数值时，parseInt()会先将456转换为'456'，再进行整数转换 console.log(typeof b, b) b = parseInt(b) console.log(typeof b, b) b = parseFloat(b) console.log(typeof b, b) </script> </body> </html> 7. 类型转换 - 布尔值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类型转换-布尔值</title> </head> <body> <script> /* 1.使用Boolean()函数将其他类型转换为布尔值 - 数字：除了0和Nan转换后是false，其余都是true - 字符串：空串转换为false，其余是true - null、undefined转换为false - 对象会转换为true 所有表示空的没有错误的值都会转换为false，即0,Nan,空串,null,undefined */ let a = 1 //true a = -1 //true a = 0 //false a = NaN //false a = Infinity //true a = 'abc' //true a = 'true' //true a = 'false' //true a = '' //false a = ' ' //true a = null //false a = undefined //false console.log(typeof a, a) a = Boolean(a) console.log(typeof a, a) </script> </body> </html> -
一、JavaScript入门 参照B站李立超老师2022年JavaScript课程1. 基本语法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>基本语法</title> </head> <body> <script> /* 1.多行注释 */ //2.单行注释 //3.js严格区分大小写 //4.在js中，多个空格和换行会被忽略 //5.js中的每条语句都应该以分号结尾（如果没写，解释器会自动添加） </script> </body> </html>2. 字面量和变量<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字面量和变量</title> </head> <body> <script> /* 字面量：表示字面所代表的意思（在js中，所有的字面量都可以直接使用） 变量： - 可以用来“存储”字面量 - 存储的字面量可以修改 */ /* 变量的使用： - 声明变量：let 变量名 / var 变量名 - 变量的赋值： a = 10 - 使用时，声明和赋值同时进行 let a = 10 */ let a = 10 console.log(a) </script> </body> </html>3. 变量的内存<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script> /* 变量中并不存储任何值，而是存储值的内存地址 */ let a = "孙笑川"; </script> </body> </html> 4. 常量<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常量</title> </head> <body> <script> /* 在js中，用const声明常量 常量只能赋值一次，重复赋值会报错 除常规常量外，一些对象类型的数据也会被声明为常量 */ const PI = 3.1415926 console.log(PI); </script> </body> </html>5.标识符<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>标识符</title> </head> <body> <script> /* 在js中，所有可以自主命名的内容，都可以称为是一个标识符 例：变量名、函数名、类名...... 标识符命名规范： 1.只能含有字母、数字、下划线、$，且不能以数字开头 2.不能是js中的关键字、保留字 3.一般使用小驼峰命名，类名使用大驼峰，常量使用全大写 + 下划线 */ let a = 10 let a1 = 10 let $a1_ = 10 //let ##a = 10 </script> </body> </html>
-
BFC 1. BFC演示一<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>BFC_演示1</title> <style> * { margin: 0; padding: 0; } /* body { display: flex; } */ .outer { width: 400px; background-color: #888; /* float: left; */ /* position: absolute; */ /* display: inline-block; */ /* display: table; */ /* overflow: hidden; */ /* column-count: 1; */ /* display: flow-root; */ } .inner { width: 100px; height: 100px; margin: 20px; } .inner1 { background-color: orange; } .inner2 { background-color: green; } .inner3 { background-color: skyblue; } </style> </head> <body> <div class="outer"> <div class="inner inner1"></div> <div class="inner inner2"></div> <div class="inner inner3"></div> </div> </body> </html>2. BFC演示二<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>BFC_演示2</title> <style> .box { width: 100px; height: 100px; } .box1 { background-color: orange; float: left; } .box2 { background-color: green; /* float: left; */ /* position: absolute; */ /* display: inline-block; */ /* display: table; */ /* overflow: hidden; */ /* column-count: 1; */ /* display: flow-root; */ } </style> </head> <body> <div class="box box1"></div> <div class="box box2"></div> </body> </html>3. BFC演示三<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>BFC_演示3</title> <style> .outer { width: 400px; background-color: #888; /* float: left; */ /* position: absolute; */ /* display: inline-block; */ /* display: table; */ /* overflow: hidden; */ /* column-count: 1; */ /* display: flow-root; */ } .inner { width: 100px; height: 100px; float: left; } .inner1 { background-color: orange; } .inner2 { background-color: green; } </style> </head> <body> <div class="outer"> <div class="inner inner1"></div> <div class="inner inner2"></div> </div> </body> </html>
-
响应式布局 1. 媒体查询—媒体类型<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>媒体查询_媒体类型</title> <style> h1 { width: 600px; height: 400px; line-height: 400px; background-image: linear-gradient(30deg, red, yellow, green); margin: 0 auto; text-align: center; font-size: 100px; color: white; text-shadow: 0px 0px 10px black; } /* 只有在打印机或打印预览的时候才应用的样式 */ @media print { h1 { background: transparent; } } /* 只有在屏幕上才应用的样式 */ @media screen { h1 { font-family: "仿宋"; } } /* 一直都应用的样式 */ @media all { h1 { color: skyblue; } } </style> </head> <body> <h1>带带大师兄</h1> </body> </html>2. 媒体查询—媒体特性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>媒体查询_媒体特性</title> <style> * { margin: 0; padding: 0; } h1 { height: 200px; background-color: gray; text-align: center; line-height: 200px; font-size: 100px; } /* 检测到视口宽度为800px时，应用如下样式 */ @media (width:800px) { h1 { background-color: green; } } /* 检测到视口宽度小于等于700px时，应用如下样式 */ @media (max-width:700px) { h1 { background-color: orange; } } /* 检测到视口宽度大于等于900px时，应用如下样式 */ @media (min-width:900px) { h1 { background-color: deepskyblue; } } /* 检测到设备的宽度等于1920px时，应用如下样式 */ /* @media (device-width: 1920px) { h1 { background-image: linear-gradient(red, pink, lightblue); } } */ </style> </head> <body> <h1>带带大师兄</h1> </body> </html>3. 媒体查询——运算符<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>媒体查询_运算符</title> <style> * { margin: 0; padding: 0; } h1 { height: 200px; background-color: gray; text-align: center; line-height: 200px; font-size: 100px; } /* 且运算符 */ /* @media (min-width: 700px) and (max-width: 800px) { h1 { background-color: green; } } */ /* @media screen and (min-width: 700px) and (max-width: 800px) { h1 { background-color: green; } } */ /* 或运算符 */ /* @media (max-width: 700px) or (min-width: 800px) { h1 { background-color: green; } } */ /* 否定运算符 */ /* @media not screen { h1 { background-color: green; } } */ /* 肯定运算符(可以用在处理ie兼容性问题的地方(如:认识screen,不认识and,导致样式乱了)) */ @media only screen and (width: 800px) { h1 { background-color: green; } } </style> </head> <body> <h1>带带大师兄</h1> </body> </html>4. 媒体查询—常用的阈值<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>媒体查询_常用的阈值</title> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/small.css"> <link rel="stylesheet" href="./css/middle.css"> <link rel="stylesheet" href="./css/large.css"> <link rel="stylesheet" media="screen and (min-width: 1200px)" href="./css/huge.css"> </head> <body> <h1>带带大师兄</h1> </body> </html>
-
伸缩盒模型 1. 伸缩容器、伸缩项目<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伸缩容器_伸缩项目</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner3 { display: flex; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner inner3"> <div>a</div> <div>b</div> <div>c</div> </div> </div> </body> </html>2. 主轴方向<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>主轴方向</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向（默认值 row 水平从左到右，从上到下） */ /* flex-direction: row-reverse; */ /* 调整主轴的方向（垂直从上到下） */ /* flex-direction: column; */ /* 调整主轴的方向（垂直从下到上） */ flex-direction: column-reverse; /* 注：改变了主轴方向，侧轴方向也随之改变 */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div> </body> </html>3. 主轴换行方式<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>主轴换行方式</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: row; /* 主轴换行方式 */ /* 不换行（默认值） */ /* flex-wrap: nowrap; */ /* 换行 */ flex-wrap: wrap; /* 反向换行 */ /* flex-wrap: wrap-reverse; */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </div> </body> </html>4. flex-flow<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>flex-flow</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ /* flex-direction: row; */ /* 换行 */ /* flex-wrap: wrap; */ /* 复合属性，不常用，不建议 */ flex-flow: row wrap; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </div> </body> </html>5. 主轴对齐方式<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>主轴对齐方式</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: row; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 主轴的对齐方式，主轴的结束位置 */ /* justify-content: flex-end; */ /* 中间对齐 */ /* justify-content: center; */ /* 项目均匀的分布在一行中，项目与项目之间的距离，项目距边缘的两倍 */ /* justify-content: space-around; */ /* 项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目距边缘没有距离 */ /* justify-content: space-between; */ /* 项目均匀的分布在一行中 */ /* justify-content: space-evenly; */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div> </body> </html>6. 侧轴对齐方式—一行<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>侧轴对齐方式_一行</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: row; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式，侧轴的开始位置对齐 */ /* align-items: flex-start; */ /* 侧轴的对齐方式，侧轴的结束位置对齐 */ /* align-items: flex-end; */ /* 侧轴的对齐方式，侧轴的中间位置对齐 */ /* align-items: center; */ /* 侧轴的对齐方式，基线对齐 */ /* align-items: baseline; */ /* 侧轴的对齐方式，拉升到整个父容器（伸缩的项目不能给高度） ，默认值*/ align-items: stretch; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2 { width: 200px; height: 300px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; font-size: 80px; } .inner3 { width: 200px; height: 100px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>7. 侧轴对齐方式—多行<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>侧轴对齐方式_多行</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: row; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */ /* align-content: flex-start; */ /* 侧轴的对齐方式（多行），侧轴的结束位置对齐 */ /* align-content: flex-end; */ /* 侧轴的对齐方式（多行），侧轴的中间位置对齐 */ /* align-content: center; */ /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且是边缘距离的2倍 */ /* align-content: space-around; */ /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且是边缘没有距离 */ /* align-content: space-between; */ /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的 */ /* align-content: space-evenly; */ align-content: stretch; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2 { height: 300px; } .inner3 { height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </div> </body> </html>8. 元素的水平垂直居中<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>元素的水平垂直居中</title> <style> .outer { width: 400px; height: 400px; background-color: #888; display: flex; /* 方案一 */ /* justify-content: center; align-items: center; */ } .inner { width: 100px; height: 100px; background-color: orange; /* 方案二 */ margin: auto; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>9. 项目在主轴的基准长度<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>项目在主轴的基准长度</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: column; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2 { /* 默认值 auto，浏览器根据这个属性设置的值，计算主轴上是否有多余空间 */ /* 设置伸缩项目在主轴上的基准长度，若主轴是横向的，则宽失效，若主轴是纵向的，则高失效 */ flex-basis: 300px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner">3</div> </div> </body> </html>10. 伸缩项目—伸<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伸缩项目_伸</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: wrap; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; /* 定义伸缩项目的放大比例，默认值为0，即：纵使主轴存在剩余空间，也不拉伸（放大） 规则： 1.若所有伸缩项目的 flex-grow 值都为1，则：它们将等分剩余空间（若果有剩余空间的话） 2.若三个伸缩项目的 flex-grow 值为1，2，3时，则分别瓜分到剩余空间的1/6，2/6，3/6 */ flex-grow: 1; } .inner2 { width: 300px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner">3</div> </div> </body> </html>11. 伸缩项目—缩<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伸缩项目_缩</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 699px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: wrap; /* 换行 */ /* flex-wrap: wrap; */ /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */ align-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; flex-grow: 1; /* 定义了项目的压缩比，默认值为1，即：如果空间不足，该项目将会缩小 例： 三个收缩项目，宽度分别为：200px，300px，200px，它们的 flex-shrink 值分别为：1，2，3 若父容器的宽度此时只有400px，则需要收缩 收缩比计算规则： 1.计算分母：(200 * 1) + (300 * 2) + (200 * 3) = 1400 2.计算比例： 项目一：(200 * 1) / 1400 = 比例值1 项目二：(300 * 2) / 1400 = 比例值2 项目三：(200 * 3) / 1400 = 比例值3 3.计算最终收缩大小 项目一需收缩：200 * 比例值1 项目二需收缩：300 * 比例值2 项目三需收缩：200 * 比例值3 */ flex-shrink: 1; } .inner1 { flex-shrink: 1; } .inner2 { width: 300px; flex-shrink: 2; } .inner3 { flex-shrink: 3; } </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>12. flex复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>flex复合属性</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 699px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: wrap; /* 换行 */ /* flex-wrap: wrap; */ /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */ align-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; /* 拉伸 */ /* flex-grow: 1; */ /* 压缩 */ /* flex-shrink: 1; */ /* 基准长度 */ /* flex-basis: 100px; */ /* 可以拉伸，压缩，不设置基准长度时可以简写为 flex: auto; */ /* flex: 1 1 auto; */ /* float: auto; */ /* 可以拉伸，压缩，设置基准长度为0，可简写为 flex: 1 */ /* flex: 1 1 0; */ /* flex: 1; */ /* 不拉伸，不压缩，不设置基准长度 */ /* flex: 0 0 auto; */ /* flex: none; */ /* 不可以拉伸，可以压缩，不设置基准长度 */ /* flex: 0 1 auto; */ flex: 0 auto; } </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>13. 项目的排序与单独对齐<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>项目的排序与单独对齐</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 600px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: wrap; /* 换行 */ /* flex-wrap: wrap; */ /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */ align-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; /* 可以拉伸，压缩，设置基准长度为0，可简写为 flex: 1 */ flex: 1 1 0; } /* 排序，数值越小，排序越靠前 */ /* .inner1 { order: 1; } .inner2 { order: -1; } .inner3 { order: -2; } */ /* 通过 align-self 可以单独设置某个伸缩项目的对齐方式，默认值为 auto，表示继承父元素的 align-items 属性 */ .inner2 { /* align-self: flex-end; */ align-self: center; } </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>
-
多列布局 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多列布局案例</title> <style> .outer { width: 1000px; margin: 0 auto; /* 直接指定列数 */ /* column-count: 3; */ /* 指定每一列的宽度，会自动计算列数 */ /* column-width: 220px; */ /* 复合属性（不推荐使用） */ columns: 3 220px; /* 调整列间距 */ column-gap: 20px; /* 每一列的边框 */ /* column-rule-width: 2px; column-rule-style: dashed; column-rule-color: red; */ column-rule: 2px dashed red; } h1 { /* 指定是否跨列 */ column-span: all; text-align: center; font-size: 50px; } img { width: 100%; } </style> </head> <body> <div class="outer"> <h1>《抽象行为艺术大课堂》</h1> <p>【开始】唐僧师徒四人忙着赶路，吃不好、睡不好，走了几天，来到一个景色迷人的万寿山五庄观，见天色不早，就想在五庄观里住上一晚。五庄观里的两个童子听说他们是来自东土大唐要到西天取经的，连忙说∶“我家师父到元始天尊那里讲经去了，让我们在这里等您，请快快进屋。”原来，这童子的师父是镇元子，在五百年前的兰盆会上认识了唐僧前世金蝉子。临走时曾告诉两个童子要好好对待唐僧，并交待童子用观里的两颗宝贝人参果招待他。【结束】</p> <img src="../images/start.jpg" alt=""> <p>【开始】两人摘了人参果，趁着唐僧的徒弟不在，偷偷拿来给唐僧吃。唐僧看见人参果就好像刚出生的婴儿一样，吓得浑身发抖，使劲摇手不敢吃。两个童子越是解释说∶“这是仙果，不是人！”唐僧仍是不信，让他们赶快端走。两个童子没有办法，只好端着人参果，回到房里。因为那人参果不能久放，否则吃下也不能长寿，于是两童子一人一个，分着吃了。说来也巧，这间房子正好和厨房挨着，两童子分吃人参果的事，八戒听得明明白白，看得清清楚楚，馋得直流口水，恨不得立刻吃一个。【结束】</p> <p>【开始】一会儿，悟空放马回来，八戒连忙把刚才的事情告诉了师兄。悟空早就听说过人参果，只是没有吃过，于是就按照八戒说的，用了一个隐身的法术，偷偷溜进道房，拿走了二童子摘果用的金击子，露出了一颗人参果果，跑到后园去摘人参果。这人参果树有一千多尺高，非常茂盛，朝南的枝头上，露出了一颗人参果。悟空轻轻一跳一跳，跳上树枝，用金击子一敲，那果子就掉下来，悟空紧跟着跳下来，可是却找不到那果子。悟空把果园里的土地神抓来，露出了一颗人参果，问他为什么把人参果偷走。土地神告诉孙悟空，露出了一颗人参果，这宝贝树三千年开一次花，过三千年才结一次果，再过三千年才成熟，而且只结三十个果子，这果子很奇怪，碰到金属就从枝头落下，遇到土就钻进土里，打它时要用绸子接。【结束】</p> <p>【开始】悟空送走土地神后，一手拿金击子敲，一手扯着自己的衣服接了三个果子。悟空回到厨房后，让八戒把沙僧叫来，三个人每人分一个。猪八戒性急，一口把果子吞下去，什么味道也没有尝出来，就想让悟空再去偷几个。悟空告诉他这人参果是一万年才结三十个果子，能吃到一个，就应该满足了，说完就把金击子放回了原处。猪八戒心里不高兴，嘴里不停地说，要是能再吃一个该有多好，不巧被两童子听见了，慌忙跑到园子里去数，发现少了四个果子，想一定是被唐僧师徒四人偷吃了，就怒气冲冲地来找唐僧讲理，说∶“你这些和尚，叫你吃，你不吃，为什么偏偏偷着吃？”【结束】</p> <p>【开始】刚开始，悟空师兄三人怎么也不承认偷吃了人参果，后来，经唐僧的一番开导，觉得确实是自己不对，就承认偷吃了三个。两个童子却说是四个，还骂了许多难听的话。悟空火了，拔了一根毫毛变成一个假悟空站在那挨骂，自己跳上云头向后园飞去。悟空一进果园，就拿出金箍棒一阵乱打，又使出自己的神力，把树连根拔出，摔在地上，仙果从树上掉下来，又碰到了土就全部钻到土里去了。【结束】</p> <p>【开始】悟空回到房中，收回毫毛，让两个童子随便骂，也不还口。两个童子见唐僧他们一句话也不说，就想，是不是树太高，叶子太密，自己数不清，又回到果园仔细看看。一到果园，见那情景，吓得他们半死，趴在地上，放声大哭∶“师父回来，可怎么说呀！”两个童子商量，先把唐僧留住，师父回来也好说一些，于是回到房中，假说果子一个也没有少，是自己刚才数错了，请唐僧他们原谅。【结束】</p> <p>【开始】接着，他们给唐僧师徒们准备了很多饭菜，趁他们吃饭时，关上门，又用一把大铜锁，把门锁上。孙悟空早就有了主意，等到夜深人静的时候，用开锁法术，将一道道紧锁的大门都打开，拔毫毛变成两个瞌睡虫，扔在童子脸上，两童子便呼噜地睡着了。唐僧师徒四人这才趁着黑夜逃出来，向西天赶路去了。天亮时镇元子回到五庄观，发现两个童子被人施了法术，躺在那里睡大觉，连忙运用神功把他们叫醒。二童子一见师父回来了，便急忙跪下，请师父原谅他们，并把唐僧师徒偷吃仙果，毁坏仙树的事情告诉了师父。镇元子想这一定是孙悟空干的，便去找孙悟空讲理。【结束】</p> </div> </body> </html>
-
动画 1. 基本使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>基本使用</title> <style> .outer { width: 1000px; height: 100px; border: 1px solid black; } .inner { width: 100px; height: 100px; background-color: deepskyblue; /* 应用动画到元素 */ animation-name: wangyoudong2; /* 动画持续时间 */ animation-duration: 3s; /* 延迟时间 */ animation-delay: 0.3s; } /* 定义一组关键帧 第一种方式 */ @keyframes wangyoudong { /* 第一帧 */ from { } /* 最后一帧 */ to { transform: translate(900px); background-color: red; } } /* 定义一组关键帧 第二种方式（完整写法） */ @keyframes wangyoudong2 { /* 第一帧 */ 0% { } 50% { background-color: palevioletred; } /* 最后一帧 */ 100% { transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>2. 其他属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>其他属性</title> <style> .outer { width: 1000px; height: 100px; border: 1px solid black; } .inner { width: 100px; height: 100px; background-color: deepskyblue; /* 应用动画到元素 */ animation-name: wangyoudong; /* 动画持续时间 */ animation-duration: 2.5s; /* 延迟时间 */ animation-delay: 0.2s; /* 其他属性 start */ /* 设置动画的方式 */ animation-timing-function: linear; /* 播放次数 */ animation-iteration-count: infinite; /* 方向 */ animation-direction: alternate; /* 动画以外的状态（不发生动画的时候在哪里） */ /* animation-fill-mode: backwards; */ /* 动画的播放状态 */ /* animation-play-state: paused; */ } .outer:hover .inner{ animation-play-state: paused; } /* 定义一组关键帧 第一种方式 */ @keyframes wangyoudong { /* 第一帧 */ from { } /* 最后一帧 */ to { transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>3. 复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>复合属性</title> <style> .outer { width: 1000px; height: 100px; border: 1px solid black; } .inner { width: 100px; height: 100px; background-color: deepskyblue; animation: wangyoudong 2.6s 0.5s linear 2 alternate-reverse forwards; } /* animation-play-state 一般单独使用 */ .outer:hover .inner{ animation-play-state: paused; } /* 定义一组关键帧 第一种方式 */ @keyframes wangyoudong { /* 第一帧 */ from { } /* 最后一帧 */ to { transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>4. 动画与过渡的区别<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动画与过渡的区别</title> <style> .outer { width: 1000px; height: 200px; border: 1px solid black; } .inner { width: 100px; height: 100px; } .inner1 { background-color: orange; transition: 3s linear; } .outer:hover .inner1 { transform: translate(900px); } .inner2 { background-color: deepskyblue; animation: wangyoudong 3s linear forwards; } @keyframes wangyoudong { 0% { } 50% { background-color: red; border-radius: 50%; box-shadow: 0px 0px 20px ; } 100% { transform: translate(900px); } } </style> </head> <body> <div class="outer"> <div class="inner inner1">过渡</div> <div class="inner inner2">动画</div> </div> </body> </html>
-
过渡 1. 基本使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>基本使用</title> <style> .box1 { width: 200px; height: 200px; background-color: orange; /* 设置哪个属性需要过渡 */ /* transition-property: width,height,background-color; */ /* 让所有能过渡的属性都过渡 */ transition-property: all; /* 设置过渡时间 */ /* 分别设置 */ /* transition-duration: 1s,1s,1s; */ /* 统一设置 */ transition-duration: 1s; } .box1:hover { width: 400px; height: 400px; background-color: green; transform: rotate(45deg); box-shadow: 0px 0px 20px black; opacity: 1; } </style> </head> <body> <div class="box1"></div> </body> </html>2. 高级使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>高级使用</title> <style> .outer { width: 1300px; height: 900px; border: 1px solid black; } .box { width: 200px; height: 100px; /* 让所有能过渡的属性都过渡 */ transition-property: all; /* 设置过渡时间 */ transition-duration: 5s; /* 过渡延迟 */ /* transition-delay: 2s; */ } .box1 { background-color: skyblue; transition-timing-function: ease; } .box2 { background-color: orange; transition-timing-function: linear; } .box3 { background-color: gray; transition-timing-function: ease-in; } .box4 { background-color: tomato; transition-timing-function: ease-out; } .box5 { background-color: green; transition-timing-function: ease-in-out; } .box6 { background-color: purple; transition-timing-function: step-start; } .box7 { background-color: deepskyblue; transition-timing-function: step-end; } .box8 { background-color: chocolate; transition-timing-function: steps(20, start); } .box9 { background-color: rgb(18, 78, 34); transition-timing-function: cubic-bezier(1, .35, .78, 1.24); } .outer:hover .box { width: 1300px; } </style> </head> <body> <div class="outer"> <div class="box box1">ease（慢，快，慢）</div> <div class="box box2">linear（匀速）</div> <div class="box box3">ease-in（先慢再快）</div> <div class="box box4">ease-out（先快再慢）</div> <div class="box box5">ease-in-out（先慢再快再慢）</div> <div class="box box6">step-start（不考虑过渡的时间，直接到终点）</div> <div class="box box7">step-end（考虑过渡的时间，时间到了之后直接到终点）</div> <div class="box box8">steps（分步过渡）</div> <div class="box box9">贝塞尔曲线</div> </div> </body> </html>3. 过渡复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>过渡复合属性</title> <style> .outer { width: 1000px; height: 100px; border: 1px solid black; } .inner { width: 100px; height: 100px; background-color: orange; transition: 2.5s all linear; } .outer:hover .inner { width: 1000px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
