接day26CSS=>CSS定位
overflow属性
| 值 | 描述 | 示例 |
|---|---|---|
| visible | 默认值，内容不会被修剪，会呈现在元素框之外 | |
| hidden | 内容会被修剪，并且其余内容是不可见的 | overflow: hidden; |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 | overflow: scroll; |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 | |
| inherit | 继承父类元素的overflow属性值 |
z-index属性
1）此属性指定了一个元素的堆叠顺序（哪个元素应该放在上面或者下面）
2）值越大，越靠上
3)没有指定z-index，后面的元素会压住前面的元素
| 值 | 描述 | 示例 |
|---|---|---|
| number | 根据数字确定堆叠顺序，值越大，越靠前 | z-index: 999; |
| auto | overflow: auto; | |
| inherit | 继承父元素的z-index属性值 | overflow: inherit; |
7.4 top/bottom/left/right属性
定位一个元素的上外边距与其包含块上边框之间的偏移量。
top: 10%; //元素向下移动10%
left: -10px; //元素向左移动10像素
8 CSS显示
8.1 display属性
| 值 | 描述 |
|---|---|
| 值 | 描述 |
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符 |
| inline | 默认值，此元素会被显示为内联元素 |
| inline-block | 行内块元素 |
| table | 此元素会作为块级表格来显示（类似table标签），表格前后带有换行符 |
| table-row | 此元素会作为一个表格行显示（类似tr） |
| table-cell | 此元素会作为一个表格单元格显示（类似td和th） |
| inherit | 继承父元素的display属性的值 |
8.2 visibility属性
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符 |
| inline | 默认值，此元素会被显示为内联元素 |
| inline-block | 行内块元素 |
| table | 此元素会作为块级表格来显示（类似table标签），表格前后带有换行符 |
| table-row | 此元素会作为一个表格行显示（类似tr） |
| table-cell | 此元素会作为一个表格单元格显示（类似td和th） |
| inherit | 继承父元素的display属性的值 |
| 值 | 描述 |
|---|---|
| visible | 默认值，元素是可见的 |
| hidden | 元素不可见，但是原有的位置还存在 |
| collapse | 在表格元素中使用，此值可以删除一行或一列，但是不会影响表格布局；被行和列占据的空间会l留给其他内容使用；此值在其他元素中使用，等效于hidden； |
| inherit | 继承父元素的visibility属性的值 |
9 CSS伪类
伪类用于定义元素在特殊状态下的样式。
例如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
| 值 | 描述 | 示例 |
|---|---|---|
| :link | 选择未访问的链接时 | a:link |
| :visited | 选择访问过的链接时 | a:visited |
| :hover 鼠标悬停状态（鼠标悬停事件） | a:hover | |
| :active | 选择正在活动的链接时 | |
| :focus | 获得焦点时的状态（获得焦点事件） | input:focus |
| :first-letter | 选择每个p标签的首字母 | p:first-letter |
| :first-line | 选择每个p标签的第一行 | |
| ::before | 在每个p标签之前插入内容 | p::before{content: "hi ";} |
| ::after | 在每个p标签之后插入内容 | |
| :lang(language_code) | 为元素的lang属性选择一个初始值 | p:lang(en)示例：当鼠标放在图片上悬停时，修改图片尺寸img:hover{width: 200px;height: 200px;} |
<img src="../../img/icon.jpg" width="100px" height="100px" />
HTML的lang属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的；
示例：
<html lang="en"></html>
<p lang="zh"></p>
ISO 639-1 语言代码
en 英语
zh 中文简体/繁体
fr 法语
it 意大利语
ja 日语
ko 朝鲜语/韩语
ru 俄语
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框（父级框元素）或另一个浮动框为止。
如果元素设置了浮动，后面紧邻的元素则会受到浮动的影响，若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位使得元素脱离DOM文档流。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
特点：
1 设置元素浮动，元素相当于往上移动一个图层；
2 设置元素浮动，元素会具有内联元素的特性，即跟其他相邻的浮动元素在同一行；
属性 描述 值
clear 指定不允许元素的哪一侧有浮动元素 left
right
both 两边
none
inherit
float 指定一个盒子（元素）是否浮动 left
right
none
inherit继承父元素
示例：
<html>
<head>
<style>
div{
border: 0px solid #000000;
width: 100px;
height: 100px;
margin: 5px;
color: white;
}
</style>
</head>
<body>
<div style="float: left; background-color: black;">1</div>
<div style="float: left; background-color: red;">2</div>
<div style="float: left; background-color: blue;">3</div>
</body>
</html>
JavaScript
1 javascript简介
javascript 简称JS，是一种基于对象Object和事件驱动Event Driver的解释型脚本语言，用于增强HTML页面的动态交互性。
2 特点
1)嵌套在HTML中；
2)环境支持，JS在运行中需要浏览器环境的支持，如果使用的浏览器不支持js脚本，那么浏览器在运行时将忽略js代码；
3)解释执行，无需经过专门编译器的编译，在嵌入脚本的HTML文档载入时被浏览器逐行地解释执行；
4)弱类型语言，js中不需要指定变量的类型；
5)基于对象，js提供了很多内建对象，也允许定义新的对象，还提供对DOM（文档对象模型）的支持；
6)事件驱动，HTML中控件（如文本框、按钮）的相关事件触发时可以自动执行js代码；
7)跨平台，js是依赖浏览器运行的，与具体的操作系统无关。
3 基本语法
3.1 引入JS脚本
内部引入
<script type="text/javascript">
//js脚本代码
</script>
外部引入js文件
<head>
<script type="text/javascript" src="../js/div.js"></script>
</head>
3.2 声明变量
JS中的任何数据类型的变量都可以用var关键字声明；
示例：
var no = 1;
var str = "abc";
var obj = {
name: "张三",
age: 12
};
3.3 数据类型
3.3.1 五种原始数据类型
数据类型 说明 示例
Number 数字类型
可以声明整数、小数、正数、负数 var no1 = 1;
var no2 = new Number(12);
var no3 = 12.12;
var no4 = -12.123;
Boolean 布尔类型
0-false
1-true var no_bt = true;
var no_bf = false;
var no_nf = new Boolean(0);
var no_nt = new Boolean(-1);
var no_nt2 = new Boolean(2);
//赋值非0都是true
String 字符串类型 var str1 = "李四";
var str2 = new String("abc");
Null 空值，属于Object类型 var no = null;
Undefined 无（未找到），表示变量未初始化或未接收到函数的返回值； var no = undefined;
3.3.2 引用类型
数据类型 说明 示例
Array 数组 var arr = [1,2,3];
//一个数组可以存放不同类型的元素
var arr2 = [1, "abc", true];
//声明数组元素
var arr3 = new Array(1,2,3);
//声明数组长度
var arr4 = new Array(3);
arr4[0]='a';
arr4[1]='b';
arr4[2]='c';
//获取数组长度
console.info(arr4.length);
Object 对象 var obj = {
//属性
name:"张三",
age:12,
addr:"青岛"
}
日期类型
Date() var d = new Date();
//把Date对象的日期转为字符串
//Tue Jul 20 2021
console.info(d.toDateString());
//把Date对象转为字符串
//Tue Jul 20 2021 17:58:27 GMT+0800 (中国标准时间)
console.info(d.toString());
//返回四位数字的年份
d.getFullYear();
//返回月份0-12
d.getMonth();
//返回一个月中的第几天
d.getDate();
//返回小时0-23
d.getHours()
//返回分钟0-59
d.getMinutes();
//返回秒数0-59
d.getSeconds();
//返回1970年1月1日至今的毫秒数（时间戳）
d.getTime();
正则类型
RegExp() var str = "15701238485";
//方式1 创建正则表达式
var regx = /^1[345789]\d{9}$/;
//方式2 创建正则表达式对象
var regx = new RegExp("^1[345789]\d{9}$");
//test()方法验证字符串是否跟正则表达式匹配，返回布尔值
var tar = regx.test(str);
console.info(tar);
Function 函数 //构造一个名为t的函数
var t = function(){};
3.3.3 数据类型转换
1 parseInt()转成数字类型
示例：
var no = "1";
console.info(no+1);//打印结果 11
var no2 = parseInt(no);
console.info(no2+1);//打印结果 2
注意当转换失败时，会报NaN（Not a Number），指不是一个数字，所以导致转换失败；
可以用isNaN()方法验证，将要类型转换的值是否是数字；
示例：
var no = "1";
var tar = isNaN(no);
2 parseFloat()转成小数
3.4 运算符
3.4.1 算术运算符
- 加法运算符
- 减
- 乘
/ 除
% 取模（取余）
++ 自增 var no = 1;
//++在变量后，变量先参与代码执行，后自加1
console.info(no++);
//++在变量前，变量先自加1，后参与代码执行
console.info(++no);
-- 自减
3.4.2 赋值运算符
= 等于 var no = 1;
+= 加等于 var no += 1; 等价于 var no = no + 1;
-= 减等于
*= 乘等于
/= 除等于
%= 取模等于
3.4.3 比较运算符
== 等于（判断值） var no = 1;
var no2 = "1";
console.info(no == no2);//返回true
=== 全等（同时判断值和类型） var no = 1;
var no2 = "1";
console.info(no === no2);//返回false
!= 不等于（判断值）
> 大于（判断值） var no = 2;
var no2 = "1";
console.info(no > no2);//返回true
>= 大于等于
< 小于
<= 小于等于
3.4.4 逻辑运算符
&& 与 and a && b;
a=true 且 b=true，则返回true，否则返回false
|| 或 or a || b;
a和b都等于false，则返回false，否则返回true
! 非 not !true 等于 false
3.4.5 三元运算符(条件运算符)
Condition ? Value if true : value if false;
示例：
var text = (a > b) ? "yes" : "no";
3.5 分支语句
if语句
if(condition){
} else if(condition){
} else {
}
switch语句
switch(){
case v1:
break;
case v2:
break;//跳出分支
default:
//当所有的case值都不匹配时，执行default分支
}
3.6 循环语句
for/in循环
示例：
//创建对象
var user = {
name:"张三",
age: 12,
sex: "男"
}
for(key in user){
//获取对象的属性值
var value = user[key];
console.info(key + ":"+ value);
}
for循环
var arr = [1,2,3,4];
for(var i = 0; i < arr.length; i++){
console.info(arr[i]);
}
while循环
while(condition){
}
do while()循环
do{
}while(condition);
break与continue关键字
break 跳出循环，循环终止；
continue 跳出本次循环，继续下一次循环；
3.7 函数function
函数用function关键字声明
function 函数名{
return [返回值];
}
无参无返回值函数
function f1(){
}
有参无返回值函数
function f2(a, b){
//参数列表中的形参，不需要用var声明
}
有参有返回值函数
function f3(a, b){
return a+b;
}
调用函数
f1();
f2(1, 2);
var c = f3(1, 2);
3.8 对象
创建对象
var user = {
//对象属性
name:"张三",
age: 12,
sex: "男",
//对象方法
move:function(){
console.info("user is moving");
}
}
获取对象属性值
var property = user.name;
或者
var property = user["age"];
修改属性值
user.name = "李四";
或
user["age"] = 20;
添加属性
user.addr = "青岛";
删除属性
delete user.addr;
3.9 DOM文档对象模型
DOM(Document Object Model) 文档对象模型
当页面被加载时，浏览器会创建页面的DOM，可以把DOM理解为当前被加载的HTML页面的对象；
3.9.1 document对象
getElementById()
根据标签的id，返回一个标签对象(element)
示例：
var ele = document.getElementById("user_name");
console.info(ele.value);
getElementsByName()
根据标签name属性值，返回一个标签对象的集合
示例：
var ele = [];
ele = document.getElementsByName("p2");
console.info(ele[0].innerHTML);
getElementsByTagName()
根据标签名，返回一个标签对象的集合
3.9.2 element对象
属性
element.attributes; 返回标签中的属性对象集合
element.innerHTML; 设置或返回标签元素的内容;
内容中包含的子HTML标签会当成字符串处理；
获取标签内容
var c = element.innerHTML;
设置标签内容
element.innerHTML = "abc";
element.innerText 设置或返回标签元素的内容;
内容中的子HTML标签会显示样式；
element.id; 设置或获取元素的id
element.value; 设置或获取元素的value属性值； //获取value属性值
var v = element.value;
//给value属性赋值
element.value = "1";
element.className; 设置或获取元素的class属性值
element.style; 设置会或获取元素的样式 element.style = "font-size: 10px";
方法
ele.getAttribute(); 获取元素的指定属性值 var c = ele.getAttribute("align");
ele.setAttribute(); 设置元素属性值 ele.setAttribute("align","left");
ele.hasAttribute(); 判断元素是否有该属性值，返回布尔值 var bo = ele.hasAttribute("width");
console.info(bo);//true/false
ele.removeAttribute(); 从元素中移除指定属性 ele.removeAttribute("width");
ele.toString(); 把元素转换为字符串
3.9.3 DOM事件
onBlur 元素失去焦点事件
onfocus 元素获得焦点
onchange 元素内容改变时
onclick 点击触发事件
ondblclick 双击触发事件
onmouseout 鼠标从元素上移开
onmouseover 鼠标移到某元素上
onsubmit 提交按钮被点击
onreset 重置按钮被点击
示例：