目录
一、CSS盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
- padding: 用于控制内容与边框之间的距离
- border(边框): 围绕在内边距和内容外的边框
- content(内容): 盒子的内容，显示文本和图像
1.margin外边距
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
/*简写*/
.margin-test {
margin: 5px 10px 15px 20px; /*上右下左*/
}
/*常见居中*/
.mycenter {
margin: 0 auto;
}
2.padding内填充
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
/*简写*/
.padding-test {
padding: 5px 10px 15px 20px; /*上右下左*/
}
padding的常用简写方式：
- 提供一个：用于四边
- 提供两个：第一个用于上－下，第二个用于左－右
- 如果提供三个：第一个用于上，第二个用于左－右，第三个用于下
- 提供四个参数值：将按上－右－下－左的顺序作用于四边
二、浮动布局（float）
在 CSS 中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素
1.浮动的特点
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
2.浮动的三种取值
- left：向左浮动
- right：向右浮动
- none：默认值，不浮动
3.clear属性
clear属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 左侧不允许浮动元素 |
| right | 右侧不允许浮动元素 |
| both | 左右两侧均不允许浮动元素 |
| none | 默认值，允许浮动元素出现在两侧 |
| inherit | 规定应该从父元素继承 clear 属性的值 |
注意：clear属性只会对自身起作用，而不会影响其他元素
4.清除浮动
清除浮动的副作用（父标签塌陷问题）
4.1.清除浮动主要的三种方式：
- 固定高度
- 伪元素清除法
- overflow:hidden
4.2.伪元素清除法（使用较多）
.clearfix:after {
content: "";
display: block;
clear: both;
}
三、溢出属性（overflow）
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）
四、定位（position）
1.static（静态）
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的，所有的标签默认都不能直接通过定位修改位置，必须要切换成这三种：relative、absolute、fixed
2.relative（相对定位）
相对于标签原来的位置做定位
3.absolute（绝对定位）
基于已经定位过的父标签做定位（如果没有父标签则以body为参照）
4.fixed（固定定位）
相对于浏览器窗口做定位
五、z-index
#i2 {
z-index: 999;
}
设置对象的层叠顺序
- z-index 值表示谁压着谁，数值大的压盖住数值小的
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素
- 从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义模态框</title>
<style>
.cover {
background-color: rgba(0,0,0,0.65);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
}
.modal {
background-color: white;
position: fixed;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin: -200px 0 0 -300px;
z-index: 1000;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="modal"></div>
</body>
</html>
六、透明效果（opacity）
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明
语法
opacity: value|inherit;
| 值 | 描述 |
|---|---|
| value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明） |
| inherit | 应该从父元素继承 opacity 属性的值 |
/* 完全不透明 */
opacity: 1;
opacity: 1.0;
/* 半透明 */
opacity: 0.6;
/* 完全透明 */
opacity: 0.0;
opacity: 0;
opacity: inherit;
JavaScript
一、简介
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备
1.JavaScript
- JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言
- JavaScript 是可插入 HTML 页面的编程代码
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执
- JavaScript 很容易学习
2.ECMAScript版本
JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化
| 年份 | 名称 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则表达式 添加 try/catch |
| ECMAScript 4 | 没有发布 | |
| 2009 | ECMAScript 5 | 添加 “strict mode”，严格模式 添加 JSON 支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 | 增加指数运算符 (**) 增加 Array.prototype.includes |
注：ES6就是指ECMAScript 6
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
- 核心（ECMAScript）
- 文档对象模型（DOM） Document object model (整合js，css，html)
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
简单地说，ECMAScript 描述了JavaScript语言本身的相关内容
3.JavaScript引入方式
- script标签内写代码
- 引入额外的JS文件
// script标签内写代码
<script>
// 在这里写你的JS代码
</script>
// 引入额外的JS文件
<script src="myscript.js"></script>
4.JavaScript注释
//单行注释
/*多行注释*/
5.结束符
JavaScript中的语句要以分号 ; 为结束符
二、变量与常量
1.关键字
- var：全局有效
- let：如果在局部名称空间中使用 那么仅在局部名称空间有效
- const：定义常量
2.变量声明：
- JavaScript的变量名可以使用_、数字、字母、$组成，不能以数字开头
- 声明变量使用
var 变量名;的格式来进行声明 - 变量名是区分大小写的
- 推荐使用驼峰式命名规则
- 保留字不能用做变量名
var name = "Alex";
var age = 18;
JS也是动态类型:变量名绑定的数据值类型不固定
var name = 'jason'
name = 123
name = [11, 22, 33, 44]
三、数据类型
JavaScript拥有动态类型
var x; // 此时x是undefined
var x = 1; // 此时x是数字
var x = "Alex" // 此时x是字符串
在js中查看数据类型可以使用 typeof
1.数值类型（Number）
js中整型浮点型统称为数值类型Number
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
NaN：表示不是一个数字（Not a Number）
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
2.字符串类型（String）
2.1.简介
JavaScript 字符串用于存储和处理文本，字符串可以存储一系列字符，字符串可以是插入到引号中的任何字符。可以使用单引号或双引号
js中涉及到字符串拼接，推荐使用+
var a = "Hello"
var b = "world;
var c = a + b;
console.log(c); // 得到Helloworld
2.2.字符串属性
| 属性 | 描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
2.3.字符串方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/282039.html