目录
一、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() | 返回某个字符串对象的原始值 |