前端--css补充和js开端
溢出属性
文本内容超出了标签的最大范围。就类似于下面这种情况。
解决方法1：{overflow: hidden;},直接隐藏超出的文本内容。
解决方法2:{overflow: auto\scroll;} 提供滚动条查看
溢出实战案例:让一张图片占据div全部内容。
div {
overflow: hidden;
}
div img {
width: 100%;
}
定位属性
定位的状态
| 定位状态 | 属性 | 说明 |
|---|---|---|
| 静态定位 | static | 所有的标签默认都是静态定位即不能通过定位操作改变位置 |
| 相对定位 | relative | 相对于标签原来的位置做定位 |
| 绝对定位 | absolute | 相对于已经定位过的父标签做定位 |
| 固定定位 | fixed | 相对于浏览器窗口做定位 |
定位操作
relative:相对于标签原来的位置做定位
<div style="width: 100px;
height: 100px;
background: royalblue">
</div>
<div style="width: 100px;
height: 100px;background: mediumvioletred;
position: relative;
left: 100px;
top: 100px">
</div>
absolute:相对于已经定位过的父标签做定位，如果没有父标签或者父标签没有定位，则以body为准，相当于变成了相对定位。
<div style="width: 100px;
height: 100px;
background: royalblue">
</div>
<div style="width: 100px;
height: 100px;background: mediumvioletred;
position: absolute;
left: 100px;
top: 100px">
</div>
fixed:相对于浏览器窗口做定位，下拉还是上划都不会改变位置只要窗口不变。
<div style="width: 100px;
height: 100px;
background: royalblue">
当前标记位置>>>>当前标记位置>>>>当前标记位置>>>>
</div>
<div style="width: 100px;
height: 100px;background: mediumvioletred;
position: fixed;
left: 100px;
top: 100px">
</div>
z-index属性
前端界面其实是一个三维坐标系，z轴指向用户。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index Demo</title>
<style type="text/css">
div{
width: 200px;height: 200px;
text-align: center;
font-size: 50px;
line-height: 200px;
position: absolute;
}
#red{left: 100px;top: 100px;}
#green{left: 200px;top: 200px;}
</style>
</head>
<body>
<!-- Z-index层叠性原则：
1.同层级元素(或position:static)默认情况下文档流后面的元素会覆盖前面的。（后来居上）
2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，
即z-index越大优先级越高。 -->
<div id="red" style="background: red;z-index: 0;">A</div>
<div id="green" style="background-color: green;">B</div>
<div id="blue" style="background-color: blue;z-index: -1;">C</div>
</body>
</html>
效果：
JavaScript简介
JavaScript是一种专为与网页交互而设计的脚本语言，简称JS,是一门前端的编程语言。
在年龄编写js？可以在pycharm提供的js文件或者在浏览器提供的js环境(学习阶段推荐)。
在html标签中可以直接在head里的strip标签里编写js，或者通过引入外部的js文件。
变量与注释
注释语法
// 单行注释
/*多行注释*/
结束符号:分号结束
console.log('hello world');
变量声明:在js中定义变量需要使用关键字声明
var name = 'jason' var声明都是全局变量
let name = 'jason' let可以声明局部变量
const pi = 3.14 常量声明
数据类型
在js中查看数据类型的方式是typeof。
数值类型-Number
js中的数值类型相当于python里面的整型int和浮点型float。
常用方法
var a=123
var b=123.1
typeof a // 'number'
typeof b // 'number'
parseInt(a) // 123
parseInt(b) // 123 取整数部分
parseFloat(b) // 123.1 取浮点数
parseInt('anc') // NaN NaN(not a number)当前数据不是数字
字符类型-String
js中的字符串类型相当于python里面的字符串str。
js中的字符串类型默认只能是单引号和双引号，格式化字符串小顿号。
var name='jason'
var age="18"
console.log(`my name is ${name} my age is ${age}`) // my name is jason my age is 18
| 功能 | 方法 |
|---|---|
| 字符的拼接 | + |
| 统计长度 | length |
| 移除空白(不能指定) | trim()、trimLeft()、trimRight() |
| 切片操作 | substring(start,stop)，slice(start,stop)前者不支持负数索引后者支持 |
| 大小写转换 | .toLowerCase()、.toUpperCase() |
| 切割字符串 | split() |
切片操作演示
var s='abcdef'
s.substring(1,3) // 'bc'
s.slice(-3,-1) // 'de'
切割字符串演示:
第一个参数：字符串或正则表达式，从该参数指定的地方分割
第二个参数：该参数可指定返回的数组的最大长度，如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
var s='abcdef'
s.split('',3) // (3) ['a', 'b', 'c']
s.split('') // ['a', 'b', 'c', 'd', 'e', 'f']
s.split('b',3) // (2) ['a', 'cdef']
布尔类型-Boolean
js中布尔值是全小写：true和false。
布尔值为false:0、空字符串、null、undefined、NaN。
null相当于定义了一个变量但是它是空的，没有值。undefined相当于没有定义的变量。
对象之数组-Array
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。
数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片，取不到end |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串，默认是使用','隔开元素； |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
forEach
参数：function(currentValue, index, arr)
| 参数 | 描述 |
|---|---|
| currentValue | 必需。当前元素 |
| index | 可选。当前元素的索引值。 |
| arr | 可选。当前元素所属的数组对象 |
函数只有一个形参：取数组的值；函数有两个形参：取的是数组里元素的值、索引；函数有三个形参：取的是值、索引、数组。
var l2=['jason', 'tony', 'kevin', 'oscar', 'jerry']
l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
VM3663:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 tony 1 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
splice
splice(起始位置,删除个数,新增的值)。
var c=[1,2,3,4,5]
c.splice(1,2,'abc')
console.log(c) // (4) [1, 'abc', 4, 5]
浙公网安备 33010602011771号