文章目录
溢出属性
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值:
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
定位
position 属性指定了元素的定位类型。
position 属性的五个值:
- static
- relative
- fixed
- absolute
- sticky
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
static 定位
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
relative 定位
相对定位元素的定位是相对其正常位置。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于
sticky 定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
z-index
重叠的元素
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
一个元素可以有正数或负数的堆叠顺序
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。
JavaScript简介
JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态效果与交互功能,在 Web 开发领域有着举足轻重的地位。
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页,其中:
HTML 用来定义网页的内容,例如标题、正文、图像等;
CSS 用来控制网页的外观,例如颜色、字体、背景等;
JavaScript 用来实时更新网页中的内容,例如从服务器获取数据并更新到网页中,修改某些标签的样式或其中的内容等,可以让网页更加生动。
JavaScript 的历史
JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
之所以将 LiveScript 更名为 JavaScript,是因为 JavaScript 是受 Java 的启发而设计的,因此在语法上它们有很多相似之处 ,JavaScript 中的许多命名规范也都借鉴自 Java,还有一个原因就是为了营销,蹭 Java 的热度。
同一时期,微软和 Nombas(一家名为 Nombas 的公司)也分别开发了 JScript 和 ScriptEase 两种脚本语言,与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准,不能互用。为了解决这一问题,1997 年,在 ECMA(欧洲计算机制造商协会)的协调下,Netscape、Sun、微软、Borland(一家软件公司)组成了工作组,并以 JavaScript 为基础制定了 ECMA-262 标准(ECMAScript)。
第二年,ISO/IEC(国际标准化组织及国际电工委员会)也采用了 ECMAScript 作为标准(即 ISO/IEC-16262)。
JavaScript 与 ECMAScript 的关系
ECMAScript(简称“ES”)是根据 ECMA-262 标准实现的通用脚本语言,ECMA-262 标准主要规定了这门语言的语法、类型、语句、关键字、保留字、操作符、对象等几个部分,目前 ECMAScript 的最新版是 ECMAScript6(简称“ES6”)。
至于 JavaScript,有时人们会将 JavaScript 与 ECMAScript 看作是相同的,其实不然,JavaScript 中所包含的内容远比 ECMA-262 中规定的多得多,完整的 JavaScript 是由以下三个部分组成:
核心(ECMAScript):提供语言的语法和基本对象;
文档对象模型(DOM):提供处理网页内容的方法和接口;
浏览器对象模型(BOM):提供与浏览器进行交互的方法和接口。
JS变量与注释
编写js代码的位置
1.pycharm提供的js文件
2.浏览器提供的js环境(学习阶段推荐)
- 注释语法
// 单行注释
/*多行注释*/
- 结束符号
分号结束 console.log(‘hello world’); - 变量声明
在js中定义变量需要使用关键字声明
1.var
var name = ‘jason’
2.let
let name = ‘jason’
‘’‘var声明都是全局变量 let可以声明局部变量’‘’ - 常量声明
const pi = 3.14
数据类型
typeof可以查看数据的数据类型。
数值(Number)
(相当于python里面的整型int和浮点型float)
整数或浮点数
Number
NaN:属于数值类型 意思是'不是一个数字'(not a number)
parseInt('abc') 不报错返回NaN
parseFloat('abc')不报错返回NaN
字符类型(string)
(相当于python里面的字符串str)
String
默认只能是单引号和双引号
var name1 = 'jason'
var name2 = "jason"
格式化字符串小顿号
var name3 = `jason`
1.字符的拼接
js中推荐使用加号
2.统计长度
js中使用length python中使用len()
3.移除空白(不能指定)
js中使用trim()、trimLeft()、trimRight()
python中使用strip()、lstrip()、rstrip()
4.切片操作
js中使用substring(start,stop)、slice(start,stop)
前者不支持负数索引后者支持
python中使用[index1:index2]
5.大小写转换
js中使用.toLowerCase()、.toUpperCase()
python中使用lower()、upper()
6.切割字符串
js中和python都是用split() 但是有点区别
ss1.split(' ')
['jason', 'say', 'hello', 'big', 'baby']
ss1.split(' ', 1)
['jason']
ss1.split(' ', 2)
['jason', 'say']
7.字符串的格式化
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
python中使用%或者format
布尔类型(Boolean)
Boolean(相当于python中的布尔值bool)
js中布尔值是全小写
true false
布尔值为false的 0 空字符串 null undefined NaN
python中布尔值时首字母大写
True False
布尔值为False的 0 None 空字符串 空列表 空字典…
null的意思是空 undefined的意思是没有定义
var bb = null;
bb
null
var aa
aa
undefined
""
对象
(相当于python中的列表、字典、对象)
数组(相当于python中的列表)
Array
var l1 = [11, 22, 33]
1.追加元素
js中使用push() python中使用append()
2.弹出元素
js和python都用的pop()
3.头部插入元素
js中使用unshift() python中使用insert()
4.头部移除元素
js中使用shift() python中可以使用pop(0) remove()
5.扩展列表
js中使用concat() python中使用extend()
6.forEach:列出数组的每个元素:
7.splice
splice(起始位置,删除个数,新增的值)